layoutdt

SUBMITTED BY: icnet

DATE: Oct. 29, 2023, 3:33 a.m.

UPDATED: Nov. 2, 2023, 10:58 a.m.

FORMAT: Text only

SIZE: 40.7 kB

History Raw Download

HITS: 508

Report
  1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
  8. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  10. <link rel="stylesheet" href="https://guardianofc.github.io/css/bootstrap.min.css">
  11. <script type="text/javascript"
  12. src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
  13. integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  14. crossorigin="anonymous"></script>
  15. <title>Guardian</title>
  16. <style>
  17. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
  19. :root {
  21. /*Editar background*/
  22. --bg: #fff;
  23. --bg-img: url(https://i.ibb.co/2qnXWZs/20230728-173338.png);
  25. /*Editar o modal*/
  26. --btn-modal: #0000003f;
  27. --btn-modal-border: 50px;
  28. --modal-shadow: #ffffff;
  29. --modal-bg: #431F65;
  30. --config-color: #0000003f;
  31. --category-color: #0000003f;
  32. --text-color: #ffffff;
  34. /*Editar os t铆tulos e container*/
  35. --title: #fff;
  36. --title-2: #fff;
  37. --container-linear: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
  39. /*Editar a box (user/password)*/
  40. --box-color: #fff;
  41. --box-text: #fff;
  42. --box-border: 55px;
  43. --box-icon: #fff;
  44. --box-typing: #fff;
  46. /*Editar os 铆cones*/
  47. --icon: #fff;
  48. --icon-border: 50px;
  49. --icon-border-color: 1px solid #fff;
  50. --icon-pressed: #aaa;
  52. /*Editar os bot茫o start*/
  53. --btn-color: #5995fd;
  54. --btn-border: 50px;
  55. --btn-text: #fff;
  56. --btn-pressed: #4d84e2;
  57. --btn-transparent: 2px solid #fff;
  58. }
  61. * {
  62. margin: 0;
  63. padding: 0;
  64. box-sizing: border-box;
  65. }
  67. body {
  68. height: 100vh;
  69. display: flex;
  70. flex-direction: column;
  71. align-items: center;
  72. justify-content: center;
  73. }
  75. body,
  76. input {
  77. font-family: "Poppins", sans-serif;
  78. }
  80. .container {
  81. height: 100%;
  82. display: flex;
  83. flex-direction: column;
  84. justify-content: center;
  85. align-items: center;
  86. width: 100vw;
  90. position: relative;
  91. /*background: var(--bg-img) center center / cover rgb(32, 32, 32);*/
  92. background: var(--bg-img) center center / cover rgb(32, 32, 32);
  93. overflow: hidden;
  94. }
  96. .forms-container {
  97. position: absolute;
  98. width: 100%;
  99. height: 100vh;
  100. top: -3%;
  101. left: 0;
  102. }
  104. .signin-signup {
  105. position: absolute;
  106. top: 50%;
  107. transform: translate(-50%, -50%);
  108. left: 75%;
  109. width: 50%;
  110. transition: 1s 0.7s ease-in-out;
  111. display: grid;
  112. grid-template-columns: 1fr;
  113. z-index: 5;
  114. }
  116. form {
  117. display: flex;
  118. align-items: center;
  119. justify-content: center;
  120. flex-direction: column;
  121. padding: 0rem 5rem;
  122. transition: all 0.2s 0.7s;
  123. overflow: hidden;
  124. grid-column: 1 / 2;
  125. grid-row: 1 / 2;
  126. }
  128. form.sign-up-form {
  129. opacity: 0;
  130. z-index: 1;
  131. }
  133. form.sign-in-form {
  134. z-index: 2;
  135. }
  137. .title {
  138. font-size: 1.5rem;
  139. color: var(--title);
  140. margin-bottom: 10px;
  141. }
  143. .bg-input {
  145. width: 100%;
  146. background-color: transparent;
  147. margin: 10px 0;
  148. height: 55px;
  149. border-radius: var(--box-border);
  150. border: 3px solid #fff;
  151. grid-template-columns: 15% 85%;
  152. padding: 0 0.4rem;
  154. }
  156. input {
  157. width: 100%;
  158. background: transparent;
  159. border: none;
  160. outline: none;
  161. color: var(--box-typing);
  162. line-height: 1;
  163. font-weight: 600;
  164. font-size: 1.1rem;
  165. }
  167. .bg-input i.icon {
  168. color: var(--box-icon);
  169. }
  171. .bg-input input::placeholder {
  172. color: #fff;
  173. font-weight: 500;
  174. }
  176. .social-text {
  177. color: #fff;
  178. padding: 0.7rem 0;
  179. font-size: 1rem;
  180. }
  182. .social-media {
  183. display: flex;
  184. justify-content: center;
  185. }
  187. .social-icon {
  188. height: 46px;
  189. width: 46px;
  190. display: flex;
  191. justify-content: center;
  192. align-items: center;
  193. margin: 0 0.45rem;
  194. color: var(--icon);
  195. border-radius: var(--icon-border);
  196. border: var(--icon-border-color);
  197. text-decoration: none;
  198. font-size: 1.1rem;
  199. transition: 0.3s;
  200. }
  202. .social-icon:hover {
  203. color: var(--icon-pressed);
  204. border-color: var(--icon-pressed);
  205. }
  207. .btn {
  208. width: 150px;
  210. border: none;
  211. outline: none;
  212. height: 49px;
  213. border-radius: var(--btn-border);
  214. color: var(--btn-text);
  215. text-transform: uppercase;
  216. font-weight: 600;
  217. margin: 20px 0;
  218. cursor: pointer;
  219. transition: 0.5s;
  220. }
  222. .btn:hover {
  223. background-color: var(--btn-pressed);
  224. }
  226. .panels-container {
  227. position: absolute;
  228. height: 100%;
  229. width: 100%;
  230. top: 0;
  231. left: 0;
  232. display: grid;
  233. grid-template-columns: repeat(2, 1fr);
  234. }
  236. .container:before {
  237. content: "";
  238. position: absolute;
  239. height: 2000px;
  240. width: 2000px;
  241. top: -10%;
  242. right: 48%;
  243. transform: translateY(-50%);
  244. background-image: var(--container-linear);
  245. /*background-color: var(container-color)*/
  246. transition: 1.8s ease-in-out;
  247. border-radius: 50%;
  248. z-index: 6;
  249. }
  251. .image {
  252. width: 100%;
  253. transition: transform 1.1s ease-in-out;
  254. transition-delay: 0.4s;
  255. }
  257. .panel {
  258. display: flex;
  259. flex-direction: column;
  260. align-items: flex-end;
  261. justify-content: space-around;
  262. text-align: center;
  263. z-index: 6;
  264. }
  266. .left-panel {
  267. pointer-events: all;
  268. padding: 3rem 17% 2rem 12%;
  269. }
  271. .right-panel {
  272. pointer-events: none;
  273. padding: 3rem 12% 2rem 17%;
  274. }
  276. .panel .content {
  277. color: var(--title-2);
  278. transition: transform 0.9s ease-in-out;
  279. transition-delay: 0.6s;
  280. }
  282. .panel h3 {
  283. font-weight: 600;
  284. line-height: 1;
  285. font-size: 1.5rem;
  286. }
  288. .panel p {
  289. font-size: 0.95rem;
  290. padding: 0.7rem 0;
  291. }
  293. .btn.transparent {
  294. margin: 0;
  295. background: none;
  296. border: var(--btn-transparent);
  297. width: 130px;
  298. height: 41px;
  299. font-weight: 600;
  300. font-size: 0.8rem;
  301. }
  303. .right-panel .image,
  304. .right-panel .content {
  305. transform: translateX(800px);
  306. }
  308. .container.sign-up-mode:before {
  309. transform: translate(100%, -50%);
  310. right: 52%;
  311. }
  313. .container.sign-up-mode .left-panel .image,
  314. .container.sign-up-mode .left-panel .content {
  315. transform: translateX(-800px);
  316. }
  318. .container.sign-up-mode .signin-signup {
  319. left: 25%;
  320. }
  322. .container.sign-up-mode form.sign-up-form {
  323. opacity: 1;
  324. z-index: 2;
  325. }
  327. .container.sign-up-mode form.sign-in-form {
  328. opacity: 0;
  329. z-index: 1;
  330. }
  332. .container.sign-up-mode .right-panel .image,
  333. .container.sign-up-mode .right-panel .content {
  334. transform: translateX(0%);
  335. }
  337. .container.sign-up-mode .left-panel {
  338. pointer-events: none;
  339. }
  341. .container.sign-up-mode .right-panel {
  342. pointer-events: all;
  343. }
  345. @media (max-width: 870px) {
  346. .container {
  347. min-height: 800px;
  348. height: 100vh;
  349. }
  351. .signin-signup {
  352. width: 100%;
  353. top: 95%;
  354. transform: translate(-50%, -100%);
  355. transition: 1s 0.8s ease-in-out;
  356. }
  358. .signin-signup,
  359. .container.sign-up-mode .signin-signup {
  360. left: 50%;
  361. }
  363. .panels-container {
  364. grid-template-columns: 1fr;
  365. grid-template-rows: 1fr 2fr 1fr;
  366. }
  368. .panel {
  369. flex-direction: row;
  370. justify-content: space-around;
  371. align-items: center;
  372. padding: 2.5rem 8%;
  373. grid-column: 1 / 2;
  374. }
  376. .right-panel {
  377. grid-row: 3 / 4;
  378. }
  380. .left-panel {
  381. grid-row: 1 / 2;
  382. }
  384. .image {
  385. width: 200px;
  386. transition: transform 0.9s ease-in-out;
  387. transition-delay: 0.6s;
  388. }
  390. .panel .content {
  391. padding-right: 15%;
  392. transition: transform 0.9s ease-in-out;
  393. transition-delay: 0.8s;
  394. }
  396. .panel h3 {
  397. font-size: 1.2rem;
  398. }
  400. .panel p {
  401. font-size: 0.7rem;
  402. padding: 0.5rem 0;
  403. }
  405. .btn.transparent {
  406. width: 110px;
  407. height: 35px;
  408. margin-top: 5px;
  409. margin-bottom: 15px;
  410. font-size: 0.7rem;
  411. }
  413. .container:before {
  414. width: 1500px;
  415. height: 1500px;
  416. transform: translateX(-50%);
  417. left: 30%;
  418. bottom: 68%;
  419. right: initial;
  420. top: initial;
  421. transition: 2s ease-in-out;
  422. }
  424. .container.sign-up-mode:before {
  425. transform: translate(-50%, 100%);
  426. bottom: 32%;
  427. right: initial;
  428. }
  430. .container.sign-up-mode .left-panel .image,
  431. .container.sign-up-mode .left-panel .content {
  432. transform: translateY(-300px);
  433. }
  435. .container.sign-up-mode .right-panel .image,
  436. .container.sign-up-mode .right-panel .content {
  437. transform: translateY(0px);
  438. }
  440. .right-panel .image,
  441. .right-panel .content {
  442. transform: translateY(300px);
  443. }
  445. .container.sign-up-mode .signin-signup {
  446. top: 5%;
  447. transform: translate(-50%, 0);
  448. }
  449. }
  451. @media (max-width: 570px) {
  452. form {
  453. padding: 0 1.5rem;
  454. }
  456. .image {
  457. display: none;
  458. }
  460. .panel .content {
  461. padding: 0.5rem 1rem;
  462. }
  464. .container {
  465. padding: 1.5rem;
  466. }
  468. .container:before {
  469. bottom: 72%;
  470. left: 50%;
  471. }
  473. .container.sign-up-mode:before {
  474. bottom: 28%;
  475. left: 50%;
  476. }
  477. }
  479. .modal {
  480. backdrop-filter: blur(5px);
  481. -webkit-backdrop-filter: blur(5px);
  482. }
  484. .modal-content {
  485. border: none;
  486. background: var(--modal-bg);
  487. box-shadow: 0 5px 10px var(--modal-shadow);
  488. color: var(--text-color);
  489. }
  491. .modal-dialog {
  492. padding: 0 0.5rem;
  493. }
  495. .bg-category {
  496. background: var(--category-color);
  497. }
  499. .bg-config {
  500. background: var(--config-color);
  501. }
  503. .bt {
  504. width: 150px;
  505. background-color: var(--btn-modal);
  506. border: none;
  507. outline: none;
  508. height: 49px;
  509. border-radius: var(--btn-modal-border);
  510. text-transform: uppercase;
  511. font-weight: 600;
  512. margin: 10px 0;
  513. cursor: pointer;
  514. transition: 0.5s;
  515. }
  517. .d-flex {
  518. margin: 10px 15px;
  520. justify-content: center;
  521. align-items: center;
  522. }
  524. .ms-2 {
  525. margin-left: 0.5rem;
  526. }
  528. .btn {
  530. background: linear-gradient(-45deg, #8D4ED1, #431F65);
  531. background-size: 400% 400%;
  532. animation: gradient 10s ease infinite;
  533. }
  535. @keyframes gradient {
  536. 0% {
  537. background-position: 0% 50%;
  538. }
  540. 50% {
  541. background-position: 100% 50%;
  542. }
  544. 100% {
  545. background-position: 0% 50%;
  546. }
  547. }
  549. .container:before {
  551. background: linear-gradient(70deg, #8D4ED1, #431F65);
  552. background-size: 100% 100%;
  554. }
  556. @keyframes gradient {
  557. 0% {
  558. background-position: 0% 50%;
  559. }
  561. 50% {
  562. background-position: 100% 50%;
  563. }
  565. 100% {
  566. background-position: 0% 50%;
  567. }
  568. }
  570. .titulo {
  571. margin-top: 10px;
  572. }
  574. h4 {
  575. font-size: 1rem;
  576. }
  578. .img {
  579. margin: -90px;
  580. }
  581. </style>
  582. </head>
  584. <body>
  585. <div class="container">
  586. <div class="forms-container">
  587. <div class="signin-signup">
  588. <form class="sign-in-form">
  589. <div class="img">
  590. <img src="https://i.ibb.co/MM1Pw2B/20230724-165647.png" alt=""
  591. style="width: 260px; height: 260px;">
  592. </div>
  593. <div class="d-flex gap-2 justify-content-center align-items-center bg-input" id="config-area">
  594. <i class="icon fa fa-cogs"></i>
  595. <input type="text" placeholder="CONFIG." disabled id="config">
  596. <i class="icon fa fa-angle-double-down"></i>
  597. </div>
  598. <div class="d-flex gap-2 justify-content-center align-items-center bg-input">
  599. <i class="icon fa fa-user"></i>
  600. <input type="text" placeholder="Nome de usuario" id="username">
  601. </div>
  602. <div class="d-flex gap-2 justify-content-center align-items-center bg-input">
  603. <i class="icon fa fa-lock"></i>
  604. <input type="text" placeholder="Senha" id="password">
  605. <i class="icon fa fa-eye"
  606. onclick="password.type==`text`?password.type = `password`:password.type = `text`"></i>
  607. </div>
  608. <div class="d-flex gap-2 justify-content-center align-items-center bg-input">
  609. <i class="icon fa fa-lock"></i>
  610. <input type="text" placeholder="V2ray UUID" id="uuid">
  611. <i class="icon fa fa-eye"
  612. onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`"></i>
  613. </div>
  614. <button type="button" class="btn solid" id="start-stop">INICIAR</button>
  615. <p class="social-text" id="state" style="color: #fff;"></p>
  616. <div class="social-media">
  617. <a class="social-icon" id="sync" onclick="DtStartAppUpdate.execute()">
  618. <i class="bi bi-arrow-repeat"></i>
  619. </a>
  620. <a class="social-icon" id="logger">
  621. <i class="bi bi-file-earmark-text"></i>
  622. </a>
  623. <a class="social-icon" id="checkUser" onclick="DtStartCheckUser.execute()">
  624. <i class="bi bi-calendar2-day"></i>
  625. </a>
  626. </div>
  627. </form>
  628. <form class="sign-up-form">
  629. <h2 class="title">DESFRUTE</h2>
  630. <p class="social-text">Aqui est茫o algumas ferramentas 煤teis</p>
  631. <div class="social-media">
  632. <a class="social-icon" data-bs-target="#speedTestModal" data-bs-toggle="modal">
  633. <i class="bi bi-speedometer"></i>
  634. </a>
  635. <a class="social-icon" onclick="DtIgnoreBatteryOptimizations.execute()">
  636. <i class="bi bi-battery-full"></i>
  637. </a>
  638. <a class="social-icon" onclick="toggleHotSpot()">
  639. <i id="hotspotIcon" class="bi bi-wifi"></i>
  640. </a>
  641. <a class="social-icon" onclick="DtStartWebViewActivity.execute('https://pshnet.online')">
  642. <i class="bi bi-globe"></i>
  643. </a>
  644. <a class="social-icon" onclick="DtCleanApp.execute()">
  645. <i class="bi bi-trash3"></i>
  646. </a>
  647. </div>
  648. </form>
  649. </div>
  650. </div>
  651. <div class="panels-container">
  652. <div class="panel left-panel">
  653. <div class="content">
  654. <span class="bi bi-wifi" id="name"> TIM:</span>
  655. <span id="ip">127.0.0.1</span>
  656. <h3 class="titulo">Mais Ferramentas</h3>
  657. <button class="btn transparent" id="sign-up-btn">
  658. <i class="bi bi-gear"></i>
  659. </button>
  660. <div class="d-flex">
  661. <h4 class="bi bi-person ms-2" id="total">00</h4>
  662. </div>
  663. </div>
  664. <img src="https://i.imgur.com/bqqPxCH.png" class="image" alt="" />
  665. </div>
  666. <div class="panel right-panel">
  667. <div class="content">
  668. <h3>VOLTE PARA HOME</h3>
  669. <p>
  670. <i class="bi bi-arrow-down-circle-fill"></i>
  671. </p>
  672. <button class="btn transparent bi bi-house" id="sign-in-btn">
  673. </button>
  674. </div>
  675. <img src="https://i.imgur.com/bqqPxCH.png" class="image" alt="" />
  676. </div>
  677. </div>
  678. </div>
  679. <div class="modal fade" id="checkUserModal">
  680. <div class="modal-dialog modal-dialog-centered" role="document">
  681. <div class="modal-content rounded-3 shadow">
  682. <div class="modal-header border-bottom-0 pb-0">
  683. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  684. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  685. aria-label="Close"></button>
  686. </div>
  687. <div class="modal-body text-center">
  688. <p class="fs-5 mb-0 chk-message text-light"></p>
  689. </div>
  690. </div>
  691. </div>
  692. </div>
  693. <div class="modal fade" id="errorModal">
  694. <div class="modal-dialog modal-dialog-centered" role="document">
  695. <div class="modal-content rounded-3 shadow">
  696. <div class="modal-header border-bottom-0 pb-0">
  697. <h1 class="modal-title fs-5 err-title text-light"></h1>
  698. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  699. aria-label="Close"></button>
  700. </div>
  701. <div class="modal-body text-center">
  702. <p class="fs-5 mb-0 err-message text-light"></p>
  703. </div>
  704. </div>
  705. </div>
  706. </div>
  707. <div class="modal fade" id="loggerModal">
  708. <div class="modal-dialog modal-dialog-centered" role="document">
  709. <div class="modal-content rounded-3 shadow">
  710. <div class="modal-body p-1 text-center">
  711. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  712. </ul>
  713. </div>
  714. <div class="modal-footer flex-nowrap p-0">
  715. <button type="button" class="bt btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
  716. <button type="button" class="bt btn-lg btn-dark text-light w-100"
  717. data-bs-dismiss="modal">FECHAR</button>
  718. </div>
  719. </div>
  720. </div>
  721. </div>
  722. <div class="modal fade" id="configModal">
  723. <div class="modal-dialog modal-dialog-centered" role="document">
  724. <div class="modal-content rounded-3 shadow">
  725. <div class="modal-header border-bottom-0 pb-0">
  726. <h1 class="modal-title fs-5 text-white">CONFIGURA脟脮ES</h1>
  727. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  728. aria-label="Close"></button>
  729. </div>
  730. <div class="modal-body p-1 text-center">
  731. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
  732. <li class="list-group-item bg-transparent text-white border-0">
  733. <p>CATEGORIA</p>
  734. <ul class="list-group bg-transparent overflow-y-auto text-start">
  735. <li
  736. class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
  737. <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
  738. height="40">
  739. <div class="d-flex flex-column ms-2 w-100">
  740. <span>CONFIG 01</span>
  741. <span>DESC 01</span>
  742. </div>
  743. <div class="d-flex flex-column ms-2 w-100">
  744. <span class="text-end">CONFIG_MODE</span>
  745. </div>
  746. </li>
  747. </ul>
  748. </li>
  749. </ul>
  750. </div>
  751. </div>
  752. </div>
  753. </div>
  754. <div class="modal fade" id="speedTestModal">
  755. <div class="modal-dialog modal-dialog-centered" role="document">
  756. <div class="modal-content rounded-3 shadow">
  757. <div class="modal-header border-bottom-0 py-3">
  758. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  759. aria-label="Close"></button>
  760. </div>
  761. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  762. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  763. <div class="spinner-border text-light p-5" role="status">
  764. <span class="visually-hidden">Loading...</span>
  765. </div>
  766. </div>
  767. <iframe class="rounded-bottom-3" id="speedFrame"></iframe>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772. <script>
  773. const sign_in_btn = document.querySelector("#sign-in-btn");
  774. const sign_up_btn = document.querySelector("#sign-up-btn");
  775. const container = document.querySelector(".container");
  777. sign_up_btn.addEventListener("click", () => {
  778. container.classList.add("sign-up-mode");
  779. });
  781. sign_in_btn.addEventListener("click", () => {
  782. container.classList.remove("sign-up-mode");
  783. });
  784. </script>
  785. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  786. <script>
  787. const configArea = document.querySelector('#config-area')
  788. const config = document.querySelector('#config')
  789. const username = document.querySelector('#username')
  790. const password = document.querySelector('#password')
  791. const uuid = document.querySelector('#uuid')
  792. const logger = document.querySelector('#logger')
  794. const startStopVpn = document.querySelector('#start-stop')
  795. const stateStatus = document.querySelector('#state')
  797. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  798. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  799. const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
  800. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  802. const clearLogger = document.querySelector('.clear-logger')
  804. const speedTestModal = new bootstrap.Modal(document.querySelector('#speedTestModal'))
  806. const toggleHotSpot = () => {
  807. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  808. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  809. }
  810. const startHotSpot = () => DtStartHotSpotService.execute();
  811. const stopHotSpot = () => DtStopHotSpotService.execute();
  813. configArea.addEventListener('click', e => showConfigsModal())
  814. username.addEventListener('input', e => DtUsername.set(e.target.value))
  815. password.addEventListener('input', e => DtPassword.set(e.target.value))
  816. uuid.addEventListener('input', e => DtUuid.set(e.target.value))
  818. logger.addEventListener('click', e => loggerModal.show())
  820. startStopVpn.addEventListener('click', (e) => {
  821. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  822. DtExecuteVpnStop.execute()
  823. } else {
  824. DtExecuteVpnStart.execute()
  825. }
  826. })
  827. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  829. speedTestModal._element.addEventListener('shown.bs.modal', () => {
  830. const iframe = document.querySelector('#speedFrame');
  831. if (!iframe.src) {
  832. iframe.src = 'https://fast.com'
  833. iframe.addEventListener('load', () => {
  834. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  835. })
  836. }
  837. })
  838. speedTestModal._element.addEventListener('hide.bs.modal', () => {
  839. const iframe = document.querySelector('#speedFrame');
  840. iframe.src = '';
  841. })
  843. Object.defineProperty(String.prototype, 't', {
  844. value: function t() {
  845. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  846. },
  847. writable: true,
  848. configurable: true,
  849. })
  851. const dtConfigClickListener = () => {
  852. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {"username": ""} }`)
  853. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  855. config.placeholder = data.name ?? 'Escolha um servidor';
  856. username.parentElement.style.setProperty('display', !data?.auth?.username && !isV2ray ? 'flex' : 'none', 'important')
  857. password.parentElement.style.setProperty('display', !data?.auth?.password && !isV2ray ? 'flex' : 'none', 'important')
  858. uuid.parentElement.style.setProperty('display', !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none', 'important')
  859. }
  861. const dtVpnStateListener = state => {
  862. const isRunning = state != 'DISCONNECTED';
  864. stateStatus.innerHTML = ('LBL_STATE_' + state).t()
  865. startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()
  867. if (isRunning) {
  868. username.setAttribute('readonly', 'true')
  869. password.setAttribute('readonly', 'true')
  870. } else {
  871. username.removeAttribute('readonly')
  872. password.removeAttribute('readonly')
  873. }
  875. if (state == 'CONNECTING') dtShowSuccessToastListener('Conectado...')
  877. }
  879. const dtCheckUserStartedListener = () => {
  880. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  881. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  882. if (isV2ray) return;
  884. const html = `
  885. <div class="d-flex justify-content-center">
  886. <div class="spinner-border p-4" role="status">
  887. <span class="visually-hidden">Loading...</span>
  888. </div>
  889. </div>
  890. `
  892. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  893. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  894. checkUserModal.show()
  895. }
  897. const dtCheckUserModelListener = model => {
  898. const data = JSON.parse(model ?? `{"username": "test"}`)
  899. const html = `
  900. <div class="d-flex flex-column text-white">
  901. <span>USU脕RIO:<br><font color="#00BFFFF"><u>${data.username}</u></font></span>
  902. <span>VALIDADE:<br><font color="#00BFFFF">${data.expiration_date}</font></span>
  903. <span>DIAS RESTANTES:<br><font color="#00BFFFF">${data.expiration_days}</font></span>
  904. <span>CONEX脮ES:<br><font color="#00BFFFF"> ${data.count_connections}</font></span><br>
  905. </div>
  906. `
  908. checkUserModal._element.querySelector('.chk-title').textContent = ''
  909. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  910. checkUserModal.show()
  911. }
  913. const dtMessageErrorListener = message => {
  914. const data = JSON.parse(message)
  915. errorModal._element.querySelector('.err-title').textContent = data.title;
  916. errorModal._element.querySelector('.err-message').innerHTML = data.content;
  917. errorModal.show()
  918. }
  920. const dtOnNewLogListener = () => {
  921. const mock = [];
  922. for (let i = 0; i < 30; i++) {
  923. mock.push({ 'TIME': 'MESSAGE ' + i })
  924. }
  926. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  927. const data = JSON.parse(log)
  929. let content = '';
  930. data.forEach(item => {
  931. content += '<li class="list-group-item bg-transparent p-0 border-0 text-start ms-2 text-wrap" style="font-size: 12px; color: var(--text-color);">';
  932. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  933. content += '</li>';
  934. })
  936. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  937. const listGroup = loggerModal._element.querySelector('.list-group')
  938. listGroup.scrollTo(0, listGroup.scrollHeight)
  939. }
  941. const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')
  943. const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')
  945. const dtShowSuccessToastListener = text => {
  946. Toastify({
  947. text: text,
  948. close: true,
  949. style: {
  950. background: 'linear-gradient(to right, #00b09b, #96c93d)',
  951. marginTop: '35px',
  952. textAlign: 'center',
  953. alignItems: 'center',
  954. justifyContent: 'center',
  955. }
  956. }).showToast()
  957. }
  959. const dtShowErrorToastListener = text => {
  960. Toastify({
  961. text: text,
  962. close: true,
  963. style: {
  964. background: 'linear-gradient(to right, #ff5c33, #e69900)',
  965. marginTop: '35px',
  967. }
  968. }).showToast()
  969. }
  971. const showConfigsModal = () => {
  972. 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"}]}]'
  973. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  975. data.sort((a, b) => a.sorter - b.sorter)
  976. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  978. const body = configModal._element.querySelector('.config-body')
  979. body.innerHTML = ''
  981. data.forEach(category => {
  982. const categoryElement = document.createElement('li')
  983. categoryElement.className = 'list-group-item bg-transparent border-0 mb-1 rounded-1 px-1'
  984. categoryElement.style.color = 'var(--text-color)'
  985. categoryElement.innerHTML = `<span class="fw-bold w-100 d-block p-1 rounded-1 mb-1 bg-category">${category.name}</span>`
  987. const configUlElement = document.createElement('ul')
  988. configUlElement.className = 'list-group overflow-y-auto'
  990. category.items.forEach(item => {
  991. const configElement = document.createElement('li')
  992. configElement.className = 'list-group-item d-flex border-0 bg-config rounded-2 px-1 py-2 mb-1'
  993. configElement.style.color = 'var(--text-color)'
  994. configElement.innerHTML = `
  995. <img src="${item.icon}" width="40" height="40">
  996. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  997. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  998. <span class="fst-italic fw-bold text-uppercase" style="font-size: 0.7rem;">${item.description || ''}</span>
  999. </div>
  1000. <div class="d-flex flex-column ms-2">
  1002. </div>
  1003. </li>
  1004. `
  1005. configElement.addEventListener('click', e => {
  1006. window?.DtSetConfig?.execute(item.id)
  1007. configModal.hide()
  1008. })
  1009. configUlElement.appendChild(configElement)
  1010. })
  1012. categoryElement.appendChild(configUlElement)
  1013. body.appendChild(categoryElement)
  1014. })
  1016. configModal.show()
  1017. }
  1019. username.value = window?.DtUsername?.get() ?? ''
  1020. password.value = window?.DtPassword?.get() ?? ''
  1021. uuid.value = window?.DtUuid?.get() ?? ''
  1023. username.placeholder = 'LBL_USERNAME'.t()
  1024. password.placeholder = 'LBL_PASSWORD'.t()
  1025. uuid.placeholder = 'LBL_UUID'.t()
  1027. dtOnNewLogListener()
  1028. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  1029. dtConfigClickListener()
  1031. console.log('DTunnel layout ready!馃殌')
  1032. </script>
  1033. <script>
  1034. class AndroidMock {
  1035. static getLocalIP() {
  1036. return '192.168.0.1';
  1037. }
  1039. static getConfig() {
  1040. return JSON.stringify({
  1041. urlCheckUser: 'URLAQUI'
  1042. });
  1043. }
  1045. static getNetworkName() {
  1046. return 'REDE';
  1047. }
  1049. static openRadioInfo() {
  1050. console.log('openRadioInfo');
  1051. }
  1052. }
  1053. </script>
  1054. <script>
  1055. function showLocalIP(android) {
  1056. console.log(android.getNetworkName());
  1057. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  1058. document.getElementById('ip').innerHTML = android.getLocalIP();
  1060. setInterval(() => {
  1061. document.getElementById('name').innerHTML =
  1062. ' ' + android.getNetworkName() + ':';
  1063. document.getElementById('ip').innerHTML = android.getLocalIP();
  1064. }, 2000)
  1065. }
  1067. function showCheckUser(android) {
  1068. const config = JSON.parse(window?.DtGetDefaultConfig?.execute() ?? android.getConfig());
  1070. const urlCheckUser = new URL(config.urlCheckUser);
  1071. urlCheckUser.protocol = 'ws:';
  1072. const socket = new WebSocket(urlCheckUser);
  1073. socket.onopen = function (e) {
  1074. socket.send(JSON.stringify({
  1075. action: 'all',
  1076. data: {}
  1077. }));
  1078. };
  1080. socket.onmessage = function (event) {
  1081. const data = JSON.parse(event.data);
  1082. if (data.total === undefined)
  1083. return;
  1085. const total = data.total;
  1086. document.getElementById('total').innerHTML = ' ' + String(total).padStart(2, '0');
  1087. socket.close();
  1088. };
  1089. }
  1091. window.onload = function () {
  1092. const android = window.Android || AndroidMock;
  1093. showLocalIP(android);
  1094. showCheckUser(android);
  1095. }
  1096. </script>
  1097. </body>
  1099. </html>
comments powered by Disqus