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: 51.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/jbCDXXC/coollogo-com-27815824.png);
  34. --logotamanho: 50%;
  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.ibb.co/SxGh3Cd/243481-adapted-1080x2340.jpg);
  53. /* Defina o texto desejado */
  54. --textonovo: ANO NOVO;
  55. --tamanhotexto: 30px;
  56. --cortexto: #ffffff;
  59. /* Contagem Ano Novo */
  61. --color-white: #ffffff;
  62. --color-black: #202020;
  63. --color-glass: rgba(255, 255, 255, 0.05);
  64. --color-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  67. /* Valor padrão para o desfoque do vidro */
  68. --blur-amount2: 5px;
  69. --vidro-color: rgba(0, 0, 0, 0.158);
  71. /* Cria uma sombra no Vidro */
  73. /*
  74. --shadow-offset-x: -5px;
  75. --shadow-offset-y: 8px;
  76. --shadow-blur: 3px;
  77. --shadow-color: black;
  78. */
  80. /*------------------------------------------------------------------------*/
  83. /*Cores Dos Botao de iniciar*/
  84. --cor-gradiente-nav-inicial: #f1292912;
  85. --cor-gradiente-nav-final: #ff7f0017;
  86. --cor-icon-config: #ffffff;
  88. /*------------------------------------------------------------------------*/
  89. /*Cores Dos Botao de conectar*/
  90. --cor-gradiente-btstart-incial: #f1292912;
  91. --cor-gradiente-btstart-final: #ff7f0017;
  93. /*------------------------------------------------------------------------*/
  94. /*Cores Dos icones e TexTo*/
  95. --text-color: #ffffff;
  96. --icon-color: #FFFFFF;
  97. /*------------------------------------------------------------------------*/
  98. /*Cores Dos config*/
  99. --cor-text-config: #e70000;
  100. --cor-gradiente-config-incial: #f1292912;
  101. --cor-gradiente-config-final: #ff7f0017;
  103. /*------------------------------------------------------------------------EDITE SOMENTE AQUI FINALLLL-----------------------------------------------------------------------------*/
  106. --input-border-radius: 5px;
  107. --input-background-color: #0a091a55;
  109. --card-border-radius: 5px;
  110. --card-background-color: #0b092868;
  112. --btn-background-color: #0a091a55;
  113. --btn-border-radius: 15px;
  115. --modal-background-color: #0b092868;
  118. }
  120. * {
  121. margin: 0;
  122. padding: 0;
  123. box-sizing: border-box;
  124. font-family: 'Roboto', sans-serif;
  125. }
  127. body {
  128. height: 100vh;
  129. display: flex;
  130. flex-direction: column;
  131. align-items: center;
  132. justify-content: center;
  133. background-repeat: no-repeat;
  134. background-size: cover;
  135. background-color: var(--cor-background);
  137. color: #fff;
  138. font-family: 'Lato', sans-serif;
  139. }
  141. /*Contagem Regressiva*/
  143. .wrapper {
  144. position: absolute;
  145. transform: translate(0%, 0%);
  146. margin: 10px;
  147. top: 1%;
  148. left: 0%;
  149. font-size: 4px;
  150. }
  151. .heading {
  152. text-align: center;
  153. padding: 0px;
  154. margin: 0px;
  155. }
  156. .heading h1 {
  157. text-shadow: var(--color-shadow);
  158. font-size: 15.2em;
  159. font-weight: 800;
  160. letter-spacing: 0.15em;
  161. }
  162. .heading h3 {
  163. font-size: 7.6em;
  164. letter-spacing: 0.05em;
  165. text-transform: uppercase;
  166. font-weight: 600;
  167. background-color: var(--color-glass);
  168. backdrop-filter: blur(12px);
  169. box-shadow: var(--color-shadow);
  170. margin-top: 10px;
  171. padding: 8px 30px;
  172. display: inline-block;
  173. }
  174. .countdown {
  175. width: 95vw;
  176. margin-top: 133vw;
  177. display: flex;
  178. justify-content: space-around;
  179. gap: 10px;
  180. }
  181. .box {
  182. width: 28vmin;
  183. height: 29vmin;
  184. display: flex;
  185. flex-direction: column;
  186. align-items: center;
  187. justify-content: space-evenly;
  188. position: relative;
  189. }
  190. span.num {
  191. background-color: var(--color-glass);
  192. backdrop-filter: blur(12px);
  193. height: 100%;
  194. width: 100%;
  195. display: grid;
  196. place-items: center;
  197. font-size: 10em;
  198. box-shadow: var(--color-shadow);
  199. border-radius: 0.1em;
  200. }
  201. span.num:after {
  202. content: "";
  203. position: absolute;
  204. background-color: var(--color-glass);
  205. height: 100%;
  206. width: 50%;
  207. left: 0;
  208. }
  209. span.text {
  210. font-size: 3em;
  211. background-color: var(--color-white);
  212. color: var(--color-black);
  213. display: block;
  214. width: 90%;
  215. position: relative;
  216. text-align: center;
  217. bottom: 22px;
  218. padding: 0em 0em;
  219. font-weight: 600;
  220. border-radius: 0.3em;
  221. box-shadow: var(--color-shadow);
  222. }
  223. /*LOADING SPACE*/
  227. .contain {
  228. animation-delay: 4s;
  229. z-index: 1000;
  230. position: fixed;
  231. top: 0;
  232. left: 0;
  233. bottom: 0;
  234. right: 0;
  235. display: -webkit-box;
  236. display: -ms-flexbox;
  237. display: flex;
  238. -ms-flex-flow: row nowrap;
  239. flex-flow: row nowrap;
  240. -webkit-box-pack: center;
  241. -ms-flex-pack: center;
  242. justify-content: center;
  243. -webkit-box-align: center;
  244. -ms-flex-align: center;
  245. align-items: center;
  247. background: #25a7d7;
  248. background: -webkit-linear-gradient(#25a7d7, #2962FF);
  249. background: linear-gradient(#25a7d7, #25a7d7);
  250. }
  252. .icon {
  253. width: 100px;
  254. height: 100px;
  255. margin: 0 5px;
  256. }
  258. /*Animation*/
  259. .icon:nth-child(2) img {
  260. -webkit-animation-delay: 0.2s;
  261. animation-delay: 0.2s
  262. }
  264. .icon:nth-child(3) img {
  265. -webkit-animation-delay: 0.3s;
  266. animation-delay: 0.3s
  267. }
  269. .icon:nth-child(4) img {
  270. -webkit-animation-delay: 0.4s;
  271. animation-delay: 0.4s
  272. }
  274. .icon img {
  275. -webkit-animation: anim 2s ease infinite;
  276. animation: anim 2s ease infinite;
  277. -webkit-transform: scale(0, 0) rotateZ(180deg);
  278. transform: scale(0, 0) rotateZ(180deg);
  279. }
  281. @-webkit-keyframes anim {
  282. 0% {
  283. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  284. transform: scale(0, 0) rotateZ(-90deg);
  285. opacity: 0
  286. }
  288. 30% {
  289. -webkit-transform: scale(1, 1) rotateZ(0deg);
  290. transform: scale(1, 1) rotateZ(0deg);
  291. opacity: 1
  292. }
  294. 50% {
  295. -webkit-transform: scale(1, 1) rotateZ(0deg);
  296. transform: scale(1, 1) rotateZ(0deg);
  297. opacity: 1
  298. }
  300. 80% {
  301. -webkit-transform: scale(0, 0) rotateZ(90deg);
  302. transform: scale(0, 0) rotateZ(90deg);
  303. opacity: 0
  304. }
  305. }
  307. @keyframes anim {
  308. 0% {
  309. -webkit-transform: scale(0, 0) rotateZ(-90deg);
  310. transform: scale(0, 0) rotateZ(-90deg);
  311. opacity: 0
  312. }
  314. 30% {
  315. -webkit-transform: scale(1, 1) rotateZ(0deg);
  316. transform: scale(1, 1) rotateZ(0deg);
  317. opacity: 1
  318. }
  320. 50% {
  321. -webkit-transform: scale(1, 1) rotateZ(0deg);
  322. transform: scale(1, 1) rotateZ(0deg);
  323. opacity: 1
  324. }
  326. 80% {
  327. -webkit-transform: scale(0, 0) rotateZ(90deg);
  328. transform: scale(0, 0) rotateZ(90deg);
  329. opacity: 0
  330. }
  331. }
  333. .container {
  334. height: 100%;
  335. display: flex;
  336. flex-direction: column;
  337. justify-content: center;
  338. align-items: center;
  339. max-width: 465px;
  340. background: var(--background-img);
  341. background-position: center;
  342. background-repeat: no-repeat;
  343. background-size: cover;
  344. }
  346. .text_config {
  347. color: var(--cor-text-config) !important;
  348. }
  350. .logo {
  351. width: var(--logotamanho);
  352. display: block;
  353. margin-top: 0px;
  354. margin-bottom: 15px;
  355. margin-left: auto;
  356. margin-right: auto;
  357. content: var(--logo-img-url);
  358. filter: drop-shadow(var(--shadow1-offset-x) var(--shadow1-offset-y) var(--shadow1-blur) var(--shadow1-color));
  359. }
  362. .card {
  363. backdrop-filter: blur(var(--blur-amount2));
  364. background: var(--vidro-color);
  365. border-radius: 20px;
  366. border: 1px solid #1e1e1e !important;
  367. box-shadow: -8px 12px 20px 0 rgb(13 15 18 / 63%) !important;
  368. padding: 15px !important;
  369. max-width: 450px;
  370. height: auto;
  371. position: relative;
  372. filter: drop-shadow(var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color));
  373. }
  375. .btn-dark {
  376. border: none;
  377. background: linear-gradient(var(--cor-gradiente-btstart-incial), var(--cor-gradiente-btstart-final));
  378. border-radius: 15px;
  379. --bs-btn-hover-bg: #4b8d4b18 !important;
  380. --bs-btn-hover-border-color: #47593f2f !important;
  381. }
  383. .modal-content {
  384. background-color: transparent;
  385. backdrop-filter: blur(25px);
  386. }
  388. .tool {
  389. align-items: center;
  390. justify-content: center;
  391. text-align: center;
  392. }
  394. .tool-bt {
  395. background: linear-gradient(var(--cor-gradiente-config-incial), var(--cor-gradiente-config-final));
  396. border-radius: 20px;
  397. color: var(--cor-text-config) !important;
  398. height: 35px;
  399. width: 100%;
  400. border: var(--btn-border);
  401. }
  403. .input-group,
  404. .form-control,
  405. .input-group-text {
  406. background: #0808083f;
  407. color: var(--icon-color);
  408. border: none;
  409. border-radius: 15px;
  410. outline: none;
  411. }
  413. .form-control::placeholder {
  414. color: var(--text-color);
  415. }
  417. .form-control:focus {
  418. color: var(--text-color);
  419. outline: none;
  420. box-shadow: none;
  421. }
  423. .input-group-text {
  424. padding-right: 0;
  425. }
  428. .fs-5 {
  429. font-size: 1rem !important;
  430. }
  432. nav {
  434. background: linear-gradient(var(--cor-gradiente-nav-inicial), var(--cor-gradiente-nav-final));
  435. border-radius: 20px;
  436. font-size: 0;
  437. width: 100%;
  438. max-width: 450px;
  439. height: auto;
  440. position: sticky;
  441. margin-top: 20px;
  442. margin-bottom: 10px;
  443. display: flex;
  444. justify-content: space-around;
  445. align-items: center;
  446. }
  448. nav span {
  449. line-height: 45px;
  450. height: 100%;
  451. position: relative;
  452. z-index: 1;
  453. text-decoration: none;
  454. text-align: center;
  455. color: white !important;
  456. cursor: alias;
  457. }
  459. nav span svg {
  460. fill: var(--cor-icon-config);
  462. }
  464. nav .animation {
  465. position: absolute;
  466. height: 100%;
  467. top: 0;
  468. z-index: 0;
  469. transition: all .5s ease 0s;
  470. border-radius: 8px;
  471. }
  473. a:nth-child(1) {
  474. width: 30%;
  475. }
  477. a:nth-child(2) {
  478. width: 30%;
  479. }
  481. a:nth-child(3) {
  482. width: 40%;
  483. }
  485. nav .start-home,
  486. a:nth-child(1):hover~.animation {
  487. width: 30%;
  488. left: 0;
  489. background-color: #1212123f;
  490. border-radius: 20px;
  491. }
  493. nav .start-about,
  494. a:nth-child(2):hover~.animation {
  495. width: 30%;
  496. ;
  497. left: 30%;
  498. background-color: #1212123f;
  499. border-radius: 20px;
  500. }
  502. nav .start-blog,
  503. a:nth-child(3):hover~.animation {
  504. width: 40%;
  505. left: 60%;
  506. background-color: #1212123f;
  507. border-radius: 20px;
  508. }
  510. body {
  511. font-size: 12px;
  512. font-family: sans-serif;
  513. background: color #1212123f;
  514. }
  516. @media (min-width: 768px) {
  518. .container,
  519. .container-md,
  520. .container-sm {
  521. max-width: 100%;
  522. }
  523. }
  525. .rede {
  526. color: #ff0000;
  527. }
  529. .iplocal {
  530. color: #ffffff;
  531. }
  533. .containerlocal {
  534. background: #0808083f;
  535. border-radius: 20px;
  536. border: 1px solid #1e1e1e !important;
  537. padding: 15px !important;
  538. width: 95%;
  539. max-width: 450px;
  540. height: initial;
  541. position: absolute;
  542. margin-top: 700px;
  543. margin-bottom: -66px;
  544. }
  547. .hidden {
  548. display: none;
  549. }
  550. </style>
  551. </head>
  553. <body>
  556. <div class="containerlocal">
  557. <span class="font-semibold text-xs mr-2"
  558. style="color: #ffffff;"">📢 IP Local da sua operadora:</span><span class=" rede font-semibold text-xs mr-2"
  559. id="name">REDE</span> <span class="iplocal font-semibold text-xs" id="ip">127.0.0.1</span>
  560. </div>
  562. <div class="container">
  565. <div class="wrapper">
  566. <div class="heading">
  567. <h3>ANO NOVO</h3>
  568. <h1>2024</h1>
  569. </div>
  570. <div class="countdown">
  571. <div class="box">
  572. <span class="num" id="day-box">00</span>
  573. <span class="text">Dias</span>
  574. </div>
  575. <div class="box">
  576. <span class="num" id="hr-box">00</span>
  577. <span class="text">Horas</span>
  578. </div>
  579. <div class="box">
  580. <span class="num" id="min-box">00</span>
  581. <span class="text">Minutos</span>
  582. </div>
  583. <div class="box">
  584. <span class="num" id="sec-box">00</span>
  585. <span class="text">Segundos</span>
  586. </div>
  587. </div>
  588. </div>
  589. <!-- Script -->
  590. <script>
  591. let dayBox = document.getElementById("day-box");
  592. let hrBox = document.getElementById("hr-box");
  593. let minBox = document.getElementById("min-box");
  594. let secBox = document.getElementById("sec-box");
  595. let endDate = new Date(2024, 0, 1, 00, 00);
  596. let endTime = endDate.getTime();
  598. function countdown() {
  599. let todayDate = new Date();
  600. let todayTime = todayDate.getTime();
  601. let remainingTime = endTime - todayTime;
  602. let oneMin = 60 * 1000;
  603. let oneHr = 60 * oneMin;
  604. let oneDay = 24 * oneHr;
  606. let addZeroes = (num) => (num < 10 ? `0${num}` : num);
  608. if (endTime < todayTime) {
  609. clearInterval(i);
  610. document.querySelector(
  611. ".countdown"
  612. ).innerHTML = `<h1>Countdown Has Expired</h1>`;
  613. } else {
  614. let daysLeft = Math.floor(remainingTime / oneDay);
  615. let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
  616. let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
  617. let secsLeft = Math.floor((remainingTime % oneMin) / 1000);
  619. dayBox.textContent = addZeroes(daysLeft);
  620. hrBox.textContent = addZeroes(hrsLeft);
  621. minBox.textContent = addZeroes(minsLeft);
  622. secBox.textContent = addZeroes(secsLeft);
  623. }
  624. }
  626. let i = setInterval(countdown, 1000);
  627. countdown();
  629. </script>
  631. <div class="card border-0 p-2 shadow mb-3 w-100">
  633. <img class="logo">
  634. <script>
  635. document.documentElement.style.setProperty('--logo-img-url',);
  636. </script>
  639. <div class="input-group mb-2 shadow" id="config-area">
  640. <input class="form-control" type="text" placeholder="CONFIGURAÇÃO" readonly title="configurações"
  641. id="config" style="background-color: #0808083f;" />
  642. <span class="input-group-text me-2">
  643. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  644. class="bi bi:bar-chart" viewBox="0 0 16 16">
  645. <path
  646. 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" />
  647. </svg>
  648. </span>
  649. </div>
  650. <div class="input-group input mb-2 shadow">
  651. <span class="input-group-text">
  652. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  653. class="bi bi:file-person" viewBox="0 0 16 16">
  654. <path
  655. 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" />
  656. <path d="M8 10a3 3 0 1 0 0-6a3 3 0 0 0 0 6z" />
  657. </g>
  658. </svg>
  659. </span>
  660. <input class="form-control" type="text" placeholder="usuario" id="username"
  661. style="background-color: #0808083f;" />
  662. </div>
  663. <div class="input-group input mb-2 shadow">
  664. <span class="input-group-text">
  665. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
  666. class="bi bi:file-earmark-lock" viewBox="0 0 16 16">
  667. <path
  668. 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" />
  669. <path
  670. 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" />
  671. </g>
  672. </svg>
  673. </span>
  674. <input class="form-control" type="password" placeholder="senha" id="password"
  675. style="background-color: #0808083f;" />
  676. <span class="input-group-text me-2"
  677. onclick="password.type==`text`?password.type = `password`:password.type = `text`">
  678. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  679. viewBox="0 0 16 16">
  680. <path
  681. 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" />
  682. <path
  683. 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" />
  684. </svg>
  685. </span>
  686. </div>
  687. <div class="input-group input mb-2 shadow">
  688. <span class="input-group-text">
  689. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-key"
  690. viewBox="0 0 16 16">
  691. <path
  692. 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" />
  693. <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
  694. </svg>
  695. </span>
  696. <input class="form-control" type="text" placeholder="V2ray UUID" id="uuid"
  697. style="background: #0808083f;" />
  698. <span class="input-group-text me-2"
  699. onclick="uuid.type==`text`?uuid.type = `password`:uuid.type = `text`">
  700. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
  701. viewBox="0 0 16 16">
  702. <path
  703. 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" />
  704. <path
  705. 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" />
  706. </svg>
  707. </span>
  708. </div>
  709. <button class="btn btn-dark w-100 shadow" id="start-stop">INICIAR</button>
  710. <nav>
  712. <span id="sync" onclick="DtStartAppUpdate.execute()" class="fi fi-rr-refresh">
  713. <?xml version="1.0" encoding="UTF-8"?>
  714. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  715. <path
  716. 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" />
  717. <path
  718. 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" />
  719. </svg>
  720. </span>
  724. <span id="logger" class="fi fi-rs-clipboard-list">
  725. <?xml version="1.0" encoding="UTF-8"?>
  726. <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="24" height="24">
  728. <path
  729. 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" />
  730. </svg>
  731. </span>
  733. <span aria-hidden="true" onclick="ToolsModal.show()" class="fi fi-rr-settings">
  734. <?xml version="1.0" encoding="UTF-8"?>
  735. <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24"
  736. width="24" height="24">
  737. <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" />
  738. <path
  739. 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" />
  740. </svg>
  741. </span>
  743. </nav>
  744. </div>
  746. <div class="card my-3 w-100 text-center border-0 p-2 shadow text-light fs-5 text-uppercase fw-bold" id="state"
  747. style="padding: 5px !important; font-size: 15px !important;">
  748. </div>
  749. <div class="modal fade" id="checkUserModal">
  750. <div class="modal-dialog modal-dialog-centered" role="document">
  751. <div class="modal-content rounded-3 shadow">
  752. <div class="modal-header border-bottom-0 pb-0">
  753. <h1 class="modal-title fs-5 chk-title text-light"></h1>
  754. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  755. aria-label="Close"></button>
  756. </div>
  757. <div class="modal-body text-center">
  758. <p class="fs-5 mb-0 chk-message text-light"></p>
  759. </div>
  760. </div>
  761. </div>
  762. </div>
  763. <div class="modal fade" id="errorModal">
  764. <div class="modal-dialog modal-dialog-centered" role="document">
  765. <div class="modal-content rounded-3 shadow">
  766. <div class="modal-header border-bottom-0 pb-0">
  767. <h1 class="modal-title fs-5 err-title text-light"></h1>
  768. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  769. aria-label="Close"></button>
  770. </div>
  771. <div class="modal-body text-center">
  772. <p class="fs-5 mb-0 err-message text-light"></p>
  773. </div>
  774. </div>
  775. </div>
  776. </div>
  777. <div class="modal fade" id="loggerModal">
  778. <div class="modal-dialog modal-dialog-centered" role="document">
  779. <div class="modal-content rounded-3 shadow">
  780. <div class="modal-body p-1 text-center">
  781. <ul class="list-group bg-transparent overflow-y-auto logger-content" style="max-height: 600px;">
  782. </ul>
  783. </div>
  784. <div class="modal-footer flex-nowrap p-0">
  785. <button type="button" class="btn btn-lg btn-dark text-light w-100 clear-logger">LIMPAR</button>
  786. <button type="button" class="btn btn-lg btn-dark text-light w-100"
  787. data-bs-dismiss="modal">FECHAR</button>
  788. </div>
  789. </div>
  790. </div>
  791. </div>
  792. <div class="tool webm modal fade" index="-1" id="ToolsModal">
  793. <div class="modal-dialog modal-dialog-centered" role="document">
  794. <div class="modal-content">
  795. <div class="tool modal-header">
  796. <h5 class="modal-title text_config">Configurações do aplicativo</h5>
  797. </div>
  798. <div class="modal-body">
  799. <button class="tool-bt rounded-2xl text-white" onclick="DtStartApnActivity.execute()"><i
  800. class="info2 bi bi-wifi mr-2"></i>Alterar protocolo de APN</button>
  801. </div>
  802. <div class="modal-body">
  803. <button class="tool-bt rounded-2xl text-white"
  804. onclick="DtIgnoreBatteryOptimizations.execute()"><i
  805. class="info2 bi bi-battery-full mr-2"></i>Otimizar Bateria</button>
  806. </div>
  809. <div class="modal-body">
  810. <button class="tool-bt rounded-2xl text-white" id="btnHotSpot"><i
  811. class="info2 bi bi-trash3 mr-2"></i>Compartilhar Internet</button>
  812. </div>
  814. <div class="modal-body">
  815. <button class="tool-bt rounded-2xl text-white" onclick="DtCleanApp.execute()"><i
  816. class="info2 bi bi-trash3 mr-2"></i>Limpar cachê e dados</button>
  817. </div>
  819. <div class="tool modal-footer">
  820. <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
  821. style="background-color: var(--btn-modal);">FECHAR</button>
  823. </div>
  824. </div>
  825. </div>
  826. </div>
  827. <div class="modal fade" id="configModal">
  828. <div class="modal-dialog modal-dialog-centered" role="document">
  829. <div class="modal-content rounded-3 shadow">
  830. <div class="modal-header border-bottom-0 pb-0">
  831. <h1 class="modal-title fs-5 text-white">CONFIGURAÇÕES</h1>
  832. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  833. aria-label="Close"></button>
  834. </div>
  835. <div class="modal-body p-1 text-center">
  836. <ul class="list-group bg-transparent overflow-y-auto config-body" style="max-height: 600px;">
  837. <li class="list-group-item bg-transparent text-white border-0">
  838. <p>CATEGORIA</p>
  839. <ul class="list-group bg-transparent overflow-y-auto text-start">
  840. <li
  841. class="list-group-item d-flex bg-transparent text-white border-0 border-bottom rounded-0">
  842. <img src="https://cdn-icons-png.flaticon.com/512/3686/3686811.png" width="40"
  843. height="40">
  844. <div class="d-flex flex-column ms-2 w-100">
  845. <span>CONFIG 01</span>
  846. <span>DESC 01</span>
  847. </div>
  848. <div class="d-flex flex-column ms-2 w-100">
  849. <span class="text-end">CONFIG_MODE</span>
  850. </div>
  851. </li>
  852. </ul>
  853. </li>
  854. </ul>
  855. </div>
  856. </div>
  857. </div>
  858. </div>
  859. <div class="modal fade" id="RenovarModal">
  860. <div class="modal-dialog modal-dialog-centered" role="document">
  861. <div class="modal-content rounded-3 shadow">
  862. <div class="modal-header border-bottom-0 py-3">
  863. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  864. aria-label="Close"></button>
  865. </div>
  866. <div class="modal-body ratio rounded-bottom-3" style="height: 600px;">
  867. <div class="spinner d-flex w-100 h-100 align-items-center justify-content-center">
  868. <div class="spinner-border text-light p-5" role="status">
  869. <span class="visually-hidden">Loading...</span>
  870. </div>
  871. </div>
  872. <iframe class="rounded-bottom-3" id="RenovarFrame"></iframe>
  873. </div>
  874. </div>
  875. </div>
  876. </div>
  877. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  878. <script>
  879. const startHotSpot = () => {
  880. DtStartHotSpotService.execute();
  881. txtbtn.textContent = 'HOTSPOT';
  882. }
  884. const stopHotSpot = () => {
  885. DtStopHotSpotService.execute();
  886. txtbtn.textContent = 'HOTSPOT';
  887. }
  889. const toggleHotSpot = () => {
  890. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  891. hotSpotStatus == 'RUNNING' ? stopHotSpot() : startHotSpot();
  892. }
  894. const btnHotSpot = document.querySelector("#btnHotSpot");
  895. btnHotSpot.addEventListener('click', toggleHotSpot);
  897. const hotSpotStatus = window?.DtGetStatusHotSpotService?.execute() ?? 'STOPPED';
  898. if (hotSpotStatus == 'RUNNING') {
  899. txtbtn.textContent = 'HOTSPOT';
  900. }
  902. </script>
  904. <script>
  905. class AndroidMock {
  906. static getLocalIP() {
  907. return '192.168.0.1';
  908. }
  910. static getConfig() {
  911. return JSON.stringify({
  912. urlCheckUser: 'URLAQUI'
  913. });
  914. }
  916. static getNetworkName() {
  917. return 'REDE';
  918. }
  920. static openRadioInfo() {
  921. console.log('openRadioInfo');
  922. }
  923. }
  924. </script>
  926. <script>
  927. function showLocalIP(android) {
  928. console.log(android.getNetworkName());
  929. document.getElementById('name').innerHTML = ' ' + android.getNetworkName() + ':';
  930. document.getElementById('ip').innerHTML = android.getLocalIP();
  932. setInterval(() => {
  933. document.getElementById('name').innerHTML =
  934. ' ' + android.getNetworkName() + ':';
  935. document.getElementById('ip').innerHTML = android.getLocalIP();
  936. }, 2000)
  937. }
  939. window.onload = function () {
  940. const android = window.Android || AndroidMock;
  941. showLocalIP(android);
  942. }
  944. function mostrar(id) {
  945. if (document.getElementById(id).style.display !== "none") {
  946. document.getElementById(id).style.display = "none";
  947. return;
  948. }
  949. Array.from(document.getElementsByClassName("hidden")).forEach(
  950. div => (div.style.display = "none")
  951. );
  952. document.getElementById(id).style.display = "block";
  953. }
  955. </script>
  957. <script>
  958. const configArea = document.querySelector('#config-area')
  959. const config = document.querySelector('#config')
  960. const username = document.querySelector('#username')
  961. const password = document.querySelector('#password')
  962. const uuid = document.querySelector('#uuid')
  963. const logger = document.querySelector('#logger')
  965. const networkStatus = document.querySelector('#section.local-ip')
  967. const startStopVpn = document.querySelector('#start-stop')
  968. const stateStatus = document.querySelector('#state')
  970. const loggerModal = new bootstrap.Modal(document.querySelector('#loggerModal'))
  971. const checkUserModal = new bootstrap.Modal(document.querySelector('#checkUserModal'))
  972. const errorModal = new bootstrap.Modal(document.querySelector('#errorModal'))
  973. const configModal = new bootstrap.Modal(document.querySelector('#configModal'))
  975. const ToolsModal = new bootstrap.Modal(document.querySelector('#ToolsModal'))
  977. const clearLogger = document.querySelector('.clear-logger')
  979. const RenovarModal = new bootstrap.Modal(document.querySelector('#RenovarModal'))
  981. configArea.addEventListener('click', e => showConfigsModal())
  982. username.addEventListener('input', e => DtUsername.set(e.target.value))
  983. password.addEventListener('input', e => DtPassword.set(e.target.value))
  984. uuid.addEventListener('input', e => DtUuid.set(e.target.value))
  985. logger.addEventListener('click', e => loggerModal.show())
  987. startStopVpn.addEventListener('click', (e) => {
  988. if (DtGetVpnState.execute() != 'DISCONNECTED') {
  989. DtExecuteVpnStop.execute()
  990. } else {
  991. DtExecuteVpnStart.execute()
  992. }
  993. })
  994. clearLogger.addEventListener('click', () => DtClearLogs.execute())
  996. RenovarModal._element.addEventListener('shown.bs.modal', () => {
  997. const iframe = document.querySelector('#RenovarFrame');
  998. if (!iframe.src) {
  999. iframe.src = 'https://painel.plenonet.com.br/renovar.php'
  1000. iframe.addEventListener('load', () => {
  1001. mp3Modal._element.querySelector('.spinner').classList.add('d-none')
  1002. })
  1003. }
  1004. })
  1005. RenovarModal._element.addEventListener('hide.bs.modal', () => {
  1006. const iframe = document.querySelector('#RenovarFrame');
  1007. iframe.src = '';
  1008. })
  1010. Object.defineProperty(String.prototype, 't', {
  1011. value: function t() {
  1012. return window?.DtTranslateText?.execute('' + this) ?? '' + this
  1013. },
  1014. writable: true,
  1015. configurable: true,
  1016. })
  1018. const dtConfigClickListener = () => {
  1019. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{ "auth": {}, "mode": "v2ray" }`)
  1020. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1021. config.placeholder = data.name ?? 'LBL_CHOOSE_CONFIG'.t()
  1022. username.parentElement.style.display = !data?.auth?.username && !isV2ray ? 'flex' : 'none';
  1023. password.parentElement.style.display = !data?.auth?.password && !isV2ray ? 'flex' : 'none';
  1024. uuid.parentElement.style.display = !data?.auth?.v2ray_uuid && isV2ray ? 'flex' : 'none';
  1025. }
  1027. const dtVpnStateListener = state => {
  1028. const isRunning = state != 'DISCONNECTED';
  1030. stateStatus.innerHTML = ('LBL_STATE_' + state).t()
  1031. startStopVpn.innerHTML = isRunning ? 'LBL_BTN_STOP'.t() : 'LBL_BTN_START'.t()
  1033. if (isRunning) {
  1034. username.setAttribute('readonly', 'true')
  1035. password.setAttribute('readonly', 'true')
  1036. } else {
  1037. username.removeAttribute('readonly')
  1038. password.removeAttribute('readonly')
  1039. }
  1041. if (state == 'CONNECTING') dtShowSuccessToastListener('Conectando...')
  1042. }
  1044. const dtCheckUserStartedListener = () => {
  1045. const data = JSON.parse(window?.DtGetDefaultConfig?.execute() || `{}`)
  1046. const isV2ray = data?.mode?.toLowerCase()?.startsWith('v2ray');
  1047. if (isV2ray) return;
  1048. const html = `
  1049. <div class="d-flex justify-content-center">
  1050. <div class="spinner-border p-5" role="status">
  1051. <span class="visually-hidden">Loading...</span>
  1052. </div>
  1053. </div>
  1054. `
  1056. checkUserModal._element.querySelector('.chk-title').textContent = 'CHECK USER'
  1057. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1058. checkUserModal.show()
  1059. }
  1061. function isBeforeExpiration(expirationDays, daysBefore) {
  1062. return expirationDays <= daysBefore;
  1063. }
  1065. const dtCheckUserModelListener = model => {
  1066. const data = JSON.parse(model ?? `{"username": "test"}`);
  1068. const html = `
  1069. <div class="d-flex flex-column text-white">
  1070. <span>👤Nome de usuario: ${data.username}</span>
  1071. <span>📆Expira em: ${data.expiration_date}</span>
  1072. <span>📆Dias restantes: ${data.expiration_days}</span>
  1073. <span>🚫Conexoes: ${data.count_connections}|${data.limit_connections}</span>
  1074. ${isBeforeExpiration(data.expiration_days, 3) ? '<span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center><span><span><center>⚠️Faltando 3 dias para o expirar o usuário⚠️</center></span>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</span></span>' : ''}
  1075. ${isBeforeExpiration(data.expiration_days, 2) ? '<span><span><span><center>⚠️Faltando 2 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1076. ${isBeforeExpiration(data.expiration_days, 1) ? '<span><span><span><center>⚠️Faltando 1 dias para o expirar o usuário⚠️</center></span><center>🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨</center></span></span>' : ''}
  1077. </div>
  1078. `;
  1080. checkUserModal._element.querySelector('.chk-title').textContent = '📆 Olá, ' + data.username.toUpperCase() + '👤';
  1081. checkUserModal._element.querySelector('.chk-message').innerHTML = html;
  1082. checkUserModal.show();
  1083. }
  1090. const dtMessageErrorListener = message => {
  1091. const data = JSON.parse(message)
  1092. errorModal._element.querySelector('.err-title').textContent = data.title;
  1093. errorModal._element.querySelector('.err-message').innerHTML = data.content;
  1094. errorModal.show()
  1095. }
  1097. const dtOnNewLogListener = () => {
  1098. const mock = [];
  1099. for (let i = 0; i < 30; i++) {
  1100. mock.push({ 'TIME': 'MESSAGE ' + i })
  1101. }
  1103. const log = window?.DtGetLogs?.execute() || JSON.stringify(mock)
  1104. const data = JSON.parse(log)
  1106. let content = '';
  1107. data.forEach(item => {
  1108. content += '<li class="list-group-item fs-6 bg-transparent text-white p-0 border-0 text-start ms-2 text-wrap">';
  1109. content += Object.keys(item)[0] + " " + item[Object.keys(item)]
  1110. content += '</li>';
  1111. })
  1113. loggerModal._element.querySelector('.logger-content').innerHTML = content;
  1114. const listGroup = loggerModal._element.querySelector('.list-group')
  1115. listGroup.scrollTo(0, listGroup.scrollHeight)
  1116. }
  1118. const dtVpnStartedSuccessListener = () => dtShowSuccessToastListener('Conectado com sucesso')
  1120. const dtVpnStoppedSuccessListener = () => dtShowSuccessToastListener('Desconectado com sucesso')
  1122. const dtShowSuccessToastListener = text => {
  1123. Toastify({
  1124. text: text,
  1125. close: true,
  1126. style: {
  1127. background: 'linear-gradient(to right, #00b09b, #96c93d)',
  1128. marginTop: '35px',
  1129. }
  1130. }).showToast()
  1131. }
  1133. const dtShowErrorToastListener = text => {
  1134. Toastify({
  1135. text: text,
  1136. close: true,
  1137. style: {
  1138. background: 'linear-gradient(to right, #ff5c33, #e69900)',
  1139. marginTop: '35px',
  1140. }
  1141. }).showToast()
  1142. }
  1144. const showConfigsModal = () => {
  1145. 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"}]}]'
  1146. const data = JSON.parse(window?.DtGetConfigs?.execute() || mock)
  1148. data.sort((a, b) => a.sorter - b.sorter)
  1149. data.forEach(item => item.items.sort((a, b) => a.sorter - b.sorter))
  1151. const body = configModal._element.querySelector('.config-body')
  1152. body.innerHTML = ''
  1154. data.forEach(category => {
  1155. const categoryElement = document.createElement('li')
  1156. categoryElement.classList.add('list-group-item', 'bg-transparent', 'text-white', 'border-0', 'mb-1', 'rounded-1', 'px-1')
  1157. categoryElement.innerHTML = `<span class="fw-bold btn-dark w-100 d-block p-1 rounded-1 mb-1">${category.name}</span>`
  1159. const configUlElement = document.createElement('ul')
  1160. configUlElement.classList.add('list-group', 'bg-transparent', 'overflow-y-auto')
  1162. category.items.forEach(item => {
  1163. const configElement = document.createElement('li')
  1164. configElement.classList.add('list-group-item', 'd-flex', 'btn-dark', 'text-white', 'border-0', 'rounded-2', 'px-1', 'py-2', 'mb-1')
  1165. configElement.innerHTML = `
  1166. <img src="${item.icon}" width="40" height="40">
  1167. <div class="text-start d-flex flex-column ms-2 w-100 text-truncate">
  1168. <span class="fw-bold text-uppercase" style="font-size: 0.8rem;">${item.name}</span>
  1169. <span class="fst-italic fw-bold" style="font-size: 0.7rem;">${item.description || ''}</span>
  1170. </div>
  1171. <div class="d-flex flex-column ms-2">
  1172. <span class="fst-italic fw-bold text-end text-uppercase text-nowrap" style="font-size: 0.8rem;">${item.mode}</span>
  1173. </div>
  1174. </li>
  1175. `
  1176. configElement.addEventListener('click', e => {
  1177. window?.DtSetConfig?.execute(item.id)
  1178. configModal.hide()
  1179. })
  1180. configUlElement.appendChild(configElement)
  1181. })
  1183. categoryElement.appendChild(configUlElement)
  1184. body.appendChild(categoryElement)
  1185. })
  1187. configModal.show()
  1188. }
  1190. username.value = window?.DtUsername?.get() ?? ''
  1191. password.value = window?.DtPassword?.get() ?? ''
  1192. uuid.value = window?.DtUuid?.get() ?? ''
  1194. username.placeholder = 'LBL_USERNAME'.t()
  1195. password.placeholder = 'LBL_PASSWORD'.t()
  1196. uuid.placeholder = 'LBL_UUID'.t()
  1198. dtOnNewLogListener()
  1199. dtVpnStateListener(window?.DtGetVpnState?.execute() ?? 'DISCONNECTED')
  1200. dtConfigClickListener()
  1202. console.log('ODAIR.Dev!🚀')
  1203. </script>
  1205. </body>
  1207. </html>
comments powered by Disqus