API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 30th, 2020
309
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.38 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <!-- Required meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!-- Bootstrap CSS -->
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  10. <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
  11. <title>Hello, world!</title>
  12. </head>
  13. <body>
  14.  
  15. <style type="text/css">
  16.  
  17. body {
  18. background: #17191f;
  19. color: white;
  20. font-family: 'Quicksand', sans-serif;
  21. }
  22.  
  23. .form-steps {
  24. width: 100%;
  25. clear: both;
  26. }
  27. .form-steps:before, .form-steps:after {
  28. display: table;
  29. content: "";
  30. }
  31. .form-steps:after {
  32. clear: both;
  33. }
  34.  
  35. .form-steps__step {
  36. width: 33.33333%;
  37. float: left;
  38. padding: 1em;
  39. text-align: center;
  40. position: relative;
  41. }
  42. .form-steps__step:after {
  43. content: "";
  44. background: #b4b4b4;
  45. height: .4em;
  46. top: 2.4em;
  47. left: 50%;
  48. width: 100%;
  49. display: block;
  50. position: absolute;
  51. z-index: 1;
  52. }
  53. .form-steps__step:before {
  54. content: "";
  55. background: transparent;
  56. height: .4em;
  57. top: 2.4em;
  58. left: 50%;
  59. margin-left: -2em;
  60. width: 4em;
  61. display: block;
  62. position: absolute;
  63. z-index: 2;
  64. }
  65. .form-steps__step--last:after {
  66. display: none;
  67. }
  68. .form-steps__step--active .form-steps__step-circle {
  69. background: #7CB342;
  70. border: 1px solid #33691E;
  71. color: #fff;
  72. }
  73. .form-steps__step--completed:after {
  74. background: #7CB342;
  75. }
  76. .form-steps__step--completed .form-steps__step-circle {
  77. background: #7CB342;
  78. border: 1px solid #33691E;
  79. color: #fff;
  80. }
  81. .form-steps__step--completed .form-steps__step-circle .form-steps__step-number {
  82. display: none;
  83. }
  84. .form-steps__step--completed .form-steps__step-circle .form-steps__step-check {
  85. display: inline-block;
  86. }
  87.  
  88. .form-steps__step-circle {
  89. background: #b4b4b4;
  90. border: 1px solid #bdbdbd;
  91. line-height: 3.2em;
  92. border-radius: 50%;
  93. height: 3em;
  94. width: 3em;
  95. text-align: center;
  96. color: #bdbdbd;
  97. margin: 0 auto;
  98. position: relative;
  99. z-index: 3;
  100. }
  101.  
  102. .form-steps__step-check {
  103. display: none;
  104. }
  105.  
  106. .form-step__step-name {
  107. margin-top: .8em;
  108. display: inline-block;
  109. font-size: 1em;
  110. line-height: 1.4em;
  111. }
  112.  
  113. .circle_label_content {
  114. text-align: center;
  115. align-content: center;
  116. align-items: center;
  117. }
  118.  
  119.  
  120. .circle_label {
  121. height: 45px;
  122. width: 45px;
  123. border-radius: 100%;
  124. background-color: #29BBFF;
  125. color:white;
  126. display: flex;
  127. text-align: center;
  128. flex-direction: column;
  129. align-content: center;
  130. align-items: center;
  131. align-content: center;
  132. z-index: 1000 !important;
  133. position: relative;
  134.  
  135. }
  136. .circle_end:after {
  137. display: none !important;
  138. }
  139. .active:after {
  140. content: "";
  141. background: #29BBFF;
  142. height: 8px;
  143. top: 20px;
  144. margin-left: 110px;
  145. /* left: 0; */
  146. width: inherit;
  147. display: block;
  148. position: absolute;
  149. /* z-index: 1; */
  150. }
  151. .active:before {
  152. content: "";
  153. background: red;
  154. height: 8px;
  155. top: 20px;
  156. margin-left: 110px;
  157. /* left: 0; */
  158. width: inherit;
  159. display: block;
  160. position: absolute;
  161. /* z-index: 1; */
  162. }
  163. .disabled:after {
  164. content: "";
  165. background: #b4b4b4;
  166. height: 8px;
  167. top: 20px;
  168. margin-left: 110px;
  169. /* left: 0; */
  170. width: inherit;
  171. display: block;
  172. position: absolute;
  173. /* z-index: 1; */
  174. }
  175. .active .circle_label_title {
  176. color: #29BBFF !important;
  177. font-weight: 600 !important
  178. }
  179.  
  180. .circle_label_title {
  181. text-align: center;
  182. padding-top: 10px
  183. }
  184.  
  185.  
  186. .content-step {
  187. border-radius: 10px;
  188. padding: 30px;
  189. background: #1d1f25;
  190. margin-top:30px;
  191. margin-bottom: 30px;
  192. }
  193. .in-content {
  194. background-color: rgb(0,0,0,0.1);
  195. padding: 20px;
  196. border-radius: 10px;
  197. text-align: center;
  198. font-size: 13px
  199.  
  200. }
  201. .in-content h2 {
  202. font-size: 25px;
  203. font-weight: 900;
  204. color:#00A8FF;
  205. margin-bottom: 20px;
  206. }
  207.  
  208. .caract {
  209. list-style: none;
  210. text-decoration: none;
  211. }
  212. .caract li {
  213. padding-bottom: 12px;
  214. color:white;
  215. font-size: 13px;
  216. text-align: left;
  217. font-weight: 600;
  218. }
  219. hr {
  220. background-color: rgb(255,255,255,0.1)
  221. }
  222.  
  223. .select {
  224. width: 100%;
  225. padding-top: 15px;
  226. padding-bottom: 15px;
  227. background-color: #131313;
  228. border-radius: 30px;
  229. color:white;
  230. text-align: center;
  231. font-size: 14px;
  232. font-weight: 600;
  233. border:none;
  234. margin-top: 20px;
  235. margin-bottom: 20px;
  236.  
  237. }
  238. /*
  239. .hidden {
  240. display: none !important;
  241. }
  242.  
  243. .visible {
  244. display: inherit !important
  245. }*/
  246. .sd {
  247. transition: all linear 200ms;
  248. }
  249. .sd:hover {
  250. box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .1);
  251. transform: scale(1.04);
  252. transition-timing-function: ease-out;
  253. transition: all linear 200ms;
  254. cursor: pointer;
  255.  
  256. }
  257. .sd:hover .clicker {
  258. opacity: 1 !important
  259. }
  260. .clicker {
  261. transition: all linear 200ms;
  262. opacity: 0 !important
  263. }
  264. .clicker img {
  265. height: 50px;
  266. width: 50px;
  267. filter: invert();
  268. }
  269. .clicker a {
  270. display: block;
  271. text-align: center;
  272. font-size: white;
  273. font-weight: 600;
  274. text-decoration: none;
  275. font-size: 20px;
  276. color: white;
  277. margin-top: 20px;
  278. }
  279. label {
  280. font-size: 11px;
  281. text-transform: uppercase;
  282. font-weight: 600;
  283. }
  284. .form-control {
  285. background: #16191e;
  286. color:white;
  287. height: 35px;
  288. font-size: 11px;
  289. border:1px solid rgb(255,255,255,0.1);
  290. margin-bottom: 15px;
  291. }
  292.  
  293. .item_servidor_disabled {
  294. opacity: 0.3 !important
  295. }
  296. </style>
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319. <div class="container" style="padding-top:150px;padding-bottom: 150px">
  320. <div class="row justify-content-md-center" " style="padding: 5rem;">
  321. <div class="col-md-3 circle_label_content active circle_action" data-step="1" id="step_1">
  322. <center>
  323. <div class="circle_label">1</div>
  324. </center>
  325. <div class="circle_label_title">Seleccioná tu beneficio</div>
  326. </div>
  327. <div class="col-md-3 circle_label_content disabled circle_action" data-step="2" id="step_2">
  328. <center>
  329. <div class="circle_label">1</div>
  330. </center>
  331. <div class="circle_label_title">Ingresá los datos</div>
  332. </div>
  333. <div class="col-md-3 circle_label_content disabled circle_action" data-step="3" id="step_3">
  334. <center>
  335. <div class="circle_label">1</div>
  336. </center>
  337. <div class="circle_label_title">Añadí los detalles</div>
  338. </div>
  339. <div class="col-md-3 circle_label_content circle_action circle_end" data-step="4" id="step_4">
  340. <center>
  341. <div class="circle_label">1</div>
  342. </center>
  343. <div class="circle_label_title">Confirmar</div>
  344. </div>
  345.  
  346.  
  347.  
  348. <div class="col-md-12 content-step " id="step_content_1">
  349. <div class="loading" id="loading">
  350. <center>
  351. <span class="spinner">
  352. </span>
  353. </center>
  354. </div>
  355. <div class="row">
  356. <div class="col-md-4">
  357. <div class="col-md-12 in-content">
  358. <h2>PREMIUM</h2>
  359. <p>¡Rango especial para nuestros jugadores, los cuáles obtienen beneficios especiales dentro de todos nuestros servidores y foro!</p>
  360. <hr>
  361. <ul class="caract">
  362. <li>SLOT RESERVADO para entrar a jugar cuando quieras</li>
  363. <li>RESERVA DE TAG, para que sólo vos puedas usar tu nombre</li>
  364. <li>MÁS GANANCIAS (x2 y x3) en servidores con niveles</li>
  365. <li>ANTI-RETRY y EXPULSIÓN POR PING ALTO deshabilitado</li>
  366. <li>ÍTEMS ESPECIALES en servidores específicos</li>
  367. </ul>
  368. <hr>
  369. <button class="select item_articulo" data-item="2">Seleccionar</button>
  370. </div>
  371. </div>
  372. <div class="col-md-4">
  373. <div class="col-md-12 in-content item_articulo">
  374. <h2>PREMIUM</h2>
  375. <p>¡Rango especial para nuestros jugadores, los cuáles obtienen beneficios especiales dentro de todos nuestros servidores y foro!</p>
  376. <hr>
  377. <ul class="caract">
  378. <li>SLOT RESERVADO para entrar a jugar cuando quieras</li>
  379. <li>RESERVA DE TAG, para que sólo vos puedas usar tu nombre</li>
  380. <li>MÁS GANANCIAS (x2 y x3) en servidores con niveles</li>
  381. <li>ANTI-RETRY y EXPULSIÓN POR PING ALTO deshabilitado</li>
  382. <li>ÍTEMS ESPECIALES en servidores específicos</li>
  383. </ul>
  384. <hr>
  385. <button class="select item_articulo" data-item="2">Seleccionar</button>
  386. </div>
  387. </div>
  388. <div class="col-md-4">
  389. <div class="col-md-12 in-content">
  390. <h2>PREMIUM</h2>
  391. <p>¡Rango especial para nuestros jugadores, los cuáles obtienen beneficios especiales dentro de todos nuestros servidores y foro!</p>
  392. <hr>
  393. <ul class="caract">
  394. <li>SLOT RESERVADO para entrar a jugar cuando quieras</li>
  395. <li>RESERVA DE TAG, para que sólo vos puedas usar tu nombre</li>
  396. <li>MÁS GANANCIAS (x2 y x3) en servidores con niveles</li>
  397. <li>ANTI-RETRY y EXPULSIÓN POR PING ALTO deshabilitado</li>
  398. <li>ÍTEMS ESPECIALES en servidores específicos</li>
  399. </ul>
  400. <hr>
  401. <button class="select item_articulo" data-item="2">Seleccionar</button>
  402. </div>
  403. </div>
  404. <div class="col-md-6"></div>
  405. <div class="col-md-6" style="text-align: right;">
  406. <button class="btn btn-dark next_step" data-step="2">Siguiente</button>
  407. </div>
  408.  
  409. </div>
  410. </div>
  411.  
  412.  
  413.  
  414.  
  415.  
  416.  
  417.  
  418.  
  419.  
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431.  
  432.  
  433.  
  434.  
  435.  
  436. <div class="col-md-12 content-step" id="step_content_2">
  437. <div class="loading" id="loading">
  438. <center>
  439. <span class="spinner">
  440. </span>
  441. </center>
  442. </div>
  443. <div class="row">
  444. <div class="col-md-12" style="padding-top: 20px;padding-bottom:30px;text-align: center;">
  445. <h3 style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
  446. </div>
  447. <div class="col-md-6">
  448. <div class="col-md-12">
  449. <label>nombre de usuario</label>
  450. <input type="text" class="form-control user_name" />
  451. </div>
  452. <div class="col-md-12">
  453. <label>E-Mail</label>
  454. <input type="text" class="form-control user_email" />
  455. </div>
  456. <div class="col-md-12">
  457. <label>Nombre de tu admin</label>
  458. <input type="text" class="form-control user_tag_admin" />
  459. </div>
  460. <div class="col-md-12">
  461. <label>Contraseña de tu admin</label>
  462. <input type="text" class="form-control user_setinfo" />
  463. </div>
  464. </div>
  465. <div class="col-md-6" style="padding-top: 30px;">
  466. <div class="col-md-12" style="color: #CBCBCB;font-size: 13.5px;padding-bottom: 15px;">
  467. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  468. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  469. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  470. consequat.
  471. </div>
  472. <div class="col-md-12" style="color: #CBCBCB;font-size: 13.5px;padding-bottom: 15px;">
  473. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  474. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  475. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  476. consequat.
  477. </div>
  478. <div class="col-md-12" style="color: #CBCBCB;font-size: 13.5px;padding-bottom: 15px;">
  479. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  480. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  481. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  482. consequat.
  483. </div>
  484. <div class="col-md-12" style="color: #CBCBCB;font-size: 13.5px;padding-bottom: 15px;">
  485. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  486. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  487. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  488. consequat.
  489. </div>
  490. </div>
  491. <div class="col-md-6" style="text-align: left;">
  492. <button class="btn btn-dark before_step" data-step="1">Anterior</button>
  493. </div>
  494. <div class="col-md-6" style="text-align: right;">
  495. <button class="btn btn-dark next_step" data-step="3">Siguiente</button>
  496. </div>
  497. </div>
  498. </div>
  499.  
  500.  
  501. <style type="text/css">
  502. .btn-secondary {
  503. background: #313131;
  504. border-color:transparent;
  505. }
  506. .btn-sv {
  507. font-size: 13.5px;
  508. color:white;
  509. width: 100%;
  510. border-radius: 30px;
  511. background: #272727 !important;
  512. border-color:transparent;
  513. padding-top: 10px;
  514. padding-bottom: 10px;
  515. }
  516. .btn-sv-all {
  517. font-size: 12px;
  518. color:white;
  519. width: 200px;
  520. border-radius: 30px;
  521. background: #009CFF;
  522. border-color:transparent;
  523. }
  524.  
  525.  
  526. .loading{
  527. overflow: hidden !important;
  528. /* background-color: rgb(130, 49, 185); */
  529. background-color: rgb(24,24,24,0.5);
  530.  
  531. width: 100%;
  532. display: flex;
  533. flex-direction: column;
  534. align-content: center;
  535. justify-content: center;
  536. height: 100%;
  537. z-index: 799 !important;
  538. position: absolute;
  539. top: 0;
  540. left: 0;
  541. text-align: -webkit-center;
  542. }
  543.  
  544.  
  545.  
  546.  
  547. .spinner,
  548. .spinner:after {
  549. position: relative;
  550. box-sizing: border-box;
  551. }
  552.  
  553. .spinner {
  554. width: 40px;
  555. height: 40px;
  556. display: block;
  557. color: white;
  558. }
  559. .spinner:after {
  560. content: "";
  561. width: 100%;
  562. height: 100%;
  563. display: inline-block;
  564. border: 3px solid currentColor;
  565. border-bottom-color: transparent;
  566. border-radius: 100%;
  567. background: transparent;
  568. animation: ball-clip-rotate .75s linear infinite;
  569. }
  570.  
  571. @keyframes ball-clip-rotate {
  572. 0% {
  573. transform: rotate(0deg);
  574. }
  575. 100% {
  576. transform: rotate(360deg);
  577. }
  578.  
  579.  
  580. a {
  581. color: #cc6b73 !important;
  582. }
  583.  
  584. }
  585.  
  586.  
  587. .next_step {
  588. font-size: 12px;
  589. border-radius: 30px;
  590. }
  591. .before_step {
  592. font-size: 12px;
  593. border-radius: 30px;
  594. }
  595. </style>
  596.  
  597.  
  598. <div class="col-md-12 content-step " id="step_content_3" style="padding: 100px;padding-top: 20px;padding-bottom: 20px;">
  599. <div class="loading" id="loading">
  600. <center>
  601. <span class="spinner">
  602. </span>
  603. </center>
  604. </div>
  605. <div class="row">
  606. <div class="col-md-12" style="padding-top: 20px;padding-bottom:30px;text-align: center;">
  607. <h3 style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
  608. </div>
  609. <div class="col-md-12" style="padding: 55px;background: rgb(0,0,0,0.1);border-radius: 8px">
  610. <div class="row">
  611. <?php $e = 0;while ($e <= 20) {?>
  612. <div class="col-md-4" style="padding-bottom: 10px;">
  613. <button class="btn btn-secondary btn-sv item_servidor" data-sv="publico">Servidor tag</button>
  614. </div>
  615. <?php $e++;}?>
  616. </div>
  617. </div>
  618. <div class="col-md-12" style="padding-bottom: 10px;padding-top:10px;text-align: center">
  619. <p style="text-align: center;">O</p>
  620. <button class="btn btn-secondary btn-sv-all" style="font-size: 13.5px;
  621. padding-top: 10px;
  622. padding-bottom: 10px;">Servidor tag</button>
  623. </div>
  624. <div class="col-md-12" style="text-align: center;font-weight: 600;padding-bottom: 20px;">
  625. Elegi la duracion de tu admin
  626. </div>
  627. <div class="col-md-12">
  628. <center>
  629. <div class="btn-group btn-group-toggle" data-toggle="buttons">
  630. <label class="btn btn-secondary active" style="font-size: 8px;line-height: 0px;padding: 20px">
  631. <p style="line-height:5px;font-weight: 800;font-size: 17px">1 MES</p>
  632. <input type="radio" name="options" class="option_duracion" data-duracion="30"> 30 dias
  633. </label>
  634. <label class="btn btn-secondary " style="font-size: 8px;line-height: 0px;padding: 20px">
  635. <p style="line-height:5px;font-weight: 800;font-size: 17px">2 MES</p>
  636. <input type="radio" name="options" class="option_duracion" data-duracion="30"> 30 dias
  637. </label>
  638. <label class="btn btn-secondary" style="font-size: 8px;line-height: 0px;padding: 20px">
  639. <p style="line-height:5px;font-weight: 800;font-size: 17px">3 MES</p>
  640. <input type="radio" name="options" class="option_duracion" data-duracion="30"> 30 dias
  641. </label>
  642. </div>
  643. </center>
  644. </div>
  645. <div class="col-md-12" style="margin-top:40px;border-top:1px solid rgb(255,255,255,0.1);text-align: center;font-size: 12px;padding-bottom: 15px;padding-top: 25px;">
  646. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  647. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  648. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  649. consequat.
  650. </div>
  651. <div class="col-md-6" style="text-align: left;">
  652. <button class="btn btn-dark before_step" data-step="2">Anterior</button>
  653. </div>
  654. <div class="col-md-6" style="text-align: right;">
  655. <button class="btn btn-dark next_step" data-step="4">Siguiente</button>
  656. </div>
  657. </div>
  658. </div>
  659.  
  660.  
  661.  
  662.  
  663.  
  664. <div class="col-md-12 content-step " id="step_content_4" style="padding: 5rem;padding-top: 20px;padding-bottom: 20px;">
  665. <div class="row justify-content-md-center" style="padding: 5rem;">
  666. <div class="col-md-12" style="padding-top: 10px;padding-bottom:10px;text-align: center;">
  667. <h3 style="font-size: 16px;font-weight: 800;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h3>
  668. </div>
  669. <div class="col-md-12" style="font-size: 14px;text-align: center;">
  670. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  671. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  672. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  673. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  674. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  675. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  676. </div>
  677. </div>
  678. </div>
  679.  
  680.  
  681.  
  682.  
  683.  
  684.  
  685.  
  686.  
  687.  
  688.  
  689.  
  690.  
  691.  
  692.  
  693.  
  694.  
  695. </div>
  696. </div>
  697.  
  698.  
  699.  
  700.  
  701.  
  702.  
  703.  
  704.  
  705.  
  706.  
  707.  
  708.  
  709.  
  710.  
  711.  
  712.  
  713.  
  714.  
  715.  
  716. <!-- Optional JavaScript -->
  717. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  718. <script
  719. src="https://code.jquery.com/jquery-3.4.1.min.js"
  720. integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  721. crossorigin="anonymous"></script>
  722. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  723. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  724.  
  725.  
  726. <script type="text/javascript">
  727. var data_client = {
  728. item: {},
  729. info: {},
  730. servidores: {}
  731. };
  732.  
  733. $('.content-step').hide();
  734. $('#step_content_1').fadeIn('200');
  735. setTimeout(function() {
  736. $('.loading').fadeOut('200');
  737. }, 1000)
  738. var display_circle = function(sd) {
  739. $('.content-step').hide();
  740. if (sd == 1) {
  741. $('#step_1').removeClass('active')
  742. $('#step_2').removeClass('active')
  743. $('#step_3').removeClass('active')
  744. $('#step_4').removeClass('active')
  745. $('#step_1').removeClass('disabled')
  746. $('#step_2').removeClass('disabled')
  747. $('#step_3').removeClass('disabled')
  748. $('#step_4').removeClass('disabled')
  749. $('#step_1').addClass('active')
  750. $('#step_2').addClass('disabled')
  751. $('#step_3').addClass('disabled')
  752. $('#step_4').addClass('disabled')
  753.  
  754. }
  755. if (sd == 2) {
  756. $('#step_1').removeClass('active')
  757. $('#step_2').removeClass('active')
  758. $('#step_3').removeClass('active')
  759. $('#step_4').removeClass('active')
  760. $('#step_1').removeClass('disabled')
  761. $('#step_2').removeClass('disabled')
  762. $('#step_3').removeClass('disabled')
  763. $('#step_4').removeClass('disabled')
  764. $('#step_1').addClass('active')
  765. $('#step_2').addClass('disabled')
  766. $('#step_3').addClass('disabled')
  767. $('#step_4').addClass('disabled')
  768. }
  769. if (sd == 3) {
  770. $('#step_1').removeClass('active')
  771. $('#step_2').removeClass('active')
  772. $('#step_3').removeClass('active')
  773. $('#step_4').removeClass('active')
  774. $('#step_1').removeClass('disabled')
  775. $('#step_2').removeClass('disabled')
  776. $('#step_3').removeClass('disabled')
  777. $('#step_4').removeClass('disabled')
  778. $('#step_1').addClass('active')
  779. $('#step_2').addClass('active')
  780. $('#step_3').addClass('disabled')
  781. $('#step_4').addClass('disabled')
  782. }
  783. if (sd == 4) {
  784. $('#step_1').removeClass('disabled')
  785. $('#step_2').removeClass('disabled')
  786. $('#step_3').removeClass('disabled')
  787. $('#step_4').removeClass('disabled')
  788. $('#step_1').addClass('active')
  789. $('#step_2').addClass('active')
  790. $('#step_3').addClass('active')
  791. $('#step_4').addClass('disabled')
  792. }
  793. console.log('#step_' + sd)
  794. $('#step_content_' + sd).fadeIn('200')
  795. $('.loading').fadeIn('200');
  796. setTimeout(function() {
  797. $('.loading').fadeOut('200');
  798. }, 1000)
  799. }
  800.  
  801. // var step_actual;
  802. // $('.circle_action').on('click', function() {
  803. // step_target = $(this).data('step');
  804. // step = step_target;
  805. // display_circle(step);
  806.  
  807. // })
  808.  
  809.  
  810.  
  811.  
  812. $('.before_step').on('click', function() {
  813. let step = $(this).data('step');
  814. if (step == 2) {
  815. display_circle(2);
  816. }
  817. if (step == 3) {
  818. display_circle(3);
  819. }
  820. if (step == 4) {
  821. display_circle(4);
  822. }
  823. if (step == 5) {
  824. display_circle(5);
  825. }
  826. console.log(data_client);
  827. })
  828.  
  829.  
  830. $('.next_step').on('click', function() {
  831. let step = $(this).data('step');
  832. if (step == 2) {
  833. display_circle(2);
  834. }
  835. if (step == 3) {
  836. data_client.info.name = $('.user_name').val();
  837. data_client.info.email = $('.user_email').val();
  838. data_client.info.tag = $('.user_tag_admin').val();
  839. data_client.info.setinfo = $('.user_setinfo').val();
  840. display_circle(3);
  841. }
  842. if (step == 4) {
  843. display_circle(4);
  844. }
  845. if (step == 4) {
  846.  
  847. }
  848. console.log(data_client);
  849. })
  850.  
  851. $('.item_servidor').on('click', function() {
  852. $('.item_servidor').addClass('item_servidor_disabled');
  853. $(this).removeClass('item_servidor_disabled');
  854. data_client.servidores.sv = $(this).data('sv');
  855. })
  856. $('.option_duracion').on('click', function() {
  857. data_client.servidores.duracion = $(this).data('duracion');
  858. })
  859.  
  860. $('.item_articulo').on('click', function() {
  861. data_client.item.name = $(this).data('item');
  862. })
  863. </script>
  864. </body>
  865. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!