1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>Router Upgrade</title>
8 <link rel="stylesheet" href="./index.css" />
9 <script src="./jquery.min.js"></script>
10 <style>
11
12.insider{
13 width: 100%;
14 margin-top: 50px;
15 height: max-content;
16 text-align: center;
17}
18.load{
19 display: inline-block;
20 margin: 0 auto;
21 padding: 3px;
22}
23 .LoaderBalls {
24 width: 90px;
25 display: flex;
26 justify-content: space-between;
27 align-items: center;
28 }
29 .LoaderBalls__item {
30 width: 20px;
31 height: 20px;
32 border-radius: 50%;
33 background: #59abe3;
34 }
35 .LoaderBalls__item:nth-child(1) {
36 animation: bouncing 0.4s alternate infinite
37 cubic-bezier(0.6, 0.05, 0.15, 0.95);
38 }
39 .LoaderBalls__item:nth-child(2) {
40 animation: bouncing 0.4s 0.1s alternate infinite
41 cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
42 }
43 .LoaderBalls__item:nth-child(3) {
44 animation: bouncing 0.4s 0.2s alternate infinite
45 cubic-bezier(0.6, 0.05, 0.15, 0.95) backwards;
46 }
47
48 @keyframes bouncing {
49 0% {
50 transform: translate3d(0, 10px, 0) scale(1.2, 0.85);
51 }
52 100% {
53 transform: translate3d(0, -20px, 0) scale(0.9, 1.1);
54 }
55 }
56 .loader-text{
57 margin-left: 20px;
58 }
59 .hid{
60 display: none;
61 visibility: hidden;
62 }
63
64 .fin{
65 margin: 0;
66 }
67 </style>
68 </head>
69 <body>
70 <style>
71 body {
72 background: #59abe3;
73 margin: 0;
74 }
75
76 .form {
77 width: 540px;
78 height: 700px;
79 background: #e6e6e6;
80 border-radius: 8px;
81 box-shadow: 0 0 40px -10px #000;
82 margin: calc(30vh - 220px) auto;
83 padding: 20px 30px;
84 max-width: calc(100vw - 40px);
85 box-sizing: border-box;
86 font-family: "Montserrat", sans-serif;
87 position: relative;
88 /* overflow: scroll; */
89 }
90
91
92 .final {
93 width: 500px;
94 height: 300px;
95 background: #e6e6e6;
96 border-radius: 8px;
97 box-shadow: 0 0 40px -10px #000;
98 margin: calc(40vh - 220px) auto;
99 padding: 20px 30px;
100 max-width: calc(100vw - 40px);
101 box-sizing: border-box;
102 font-family: "Montserrat", sans-serif;
103 position: relative;
104 }
105
106 h2 {
107 margin: 0px;
108 padding-bottom: 10px;
109 width: 350px;
110 color: #78788c;
111 border-bottom: 3px solid #78788c;
112 }
113
114 .passwd {
115 width: 100%;
116 padding: 10px;
117 box-sizing: border-box;
118 background: none;
119 outline: none;
120 resize: none;
121 border: 0;
122 font-family: "Montserrat", sans-serif;
123 transition: all 0.3s;
124 border-bottom: 2px solid #bebed2;
125 }
126
127 .passwd:focus {
128 border-bottom: 2px solid #78788c;
129 }
130
131 p:before {
132 content: attr(type);
133 display: block;
134 margin: 28px 0 0;
135 font-size: 14px;
136 color: #5a5a5a;
137 }
138
139 button {
140 float: right;
141 padding: 8px 12px;
142 margin: 8px 0 0;
143 font-family: "Montserrat", sans-serif;
144 border: 2px solid #78788c;
145 background: 0;
146 color: #5a5a6e;
147 cursor: pointer;
148 transition: all 0.3s;
149 }
150
151 button:hover {
152 background: #78788c;
153 color: #fff;
154 }
155
156 .main {
157 overflow-y: scroll;
158 }
159
160 span {
161 margin: 0 5px 0 15px;
162 }
163
164 .termsHead {
165 content: attr(type);
166 display: block;
167 margin-bottom: 10px;
168 font-size: 14px;
169 color: #5a5a5a;
170 font-weight: bold;
171 }
172
173 textarea {
174 resize: none;
175 width: max-content;
176 min-width: 450px;
177 min-height: 250px;
178 }
179
180 .form-check-label {
181 width: auto;
182 font-size: 14px;
183
184 }
185
186
187 article,
188 aside,
189 details,
190 figcaption,
191 figure,
192 footer,
193 header,
194 hgroup,
195 main,
196 menu,
197 nav,
198 section,
199 summary {
200 display: block
201 }
202
203 audio,
204 canvas,
205 progress,
206 video {
207 display: inline-block;
208 vertical-align: baseline
209 }
210
211 audio:not([controls]) {
212 display: none;
213 height: 0
214 }
215
216 [hidden],
217 template {
218 display: none
219 }
220
221 a {
222 background-color: transparent
223 }
224
225 a:active,
226 a:hover {
227 outline: 0
228 }
229
230 abbr[title] {
231 border-bottom: none;
232 text-decoration: underline;
233 text-decoration: underline dotted
234 }
235
236 b,
237 strong {
238 font-weight: bold
239 }
240
241 dfn {
242 font-style: italic
243 }
244
245 h1 {
246 font-size: 2em;
247 margin: 0.67em 0
248 }
249
250 mark {
251 background: #ff0;
252 color: #000
253 }
254
255 small {
256 font-size: 80%
257 }
258
259 sub,
260 sup {
261 font-size: 75%;
262 line-height: 0;
263 position: relative;
264 vertical-align: baseline
265 }
266
267 sup {
268 top: -0.5em
269 }
270
271 sub {
272 bottom: -0.25em
273 }
274
275 img {
276 border: 0
277 }
278
279 svg:not(:root) {
280 overflow: hidden
281 }
282
283 figure {
284 margin: 1em 40px
285 }
286
287 hr {
288 -webkit-box-sizing: content-box;
289 -moz-box-sizing: content-box;
290 box-sizing: content-box;
291 height: 0
292 }
293
294 pre {
295 overflow: auto
296 }
297
298 code,
299 kbd,
300 pre,
301 samp {
302 font-family: monospace, monospace;
303 font-size: 1em
304 }
305
306 button,
307 input,
308 optgroup,
309 select,
310 textarea {
311 color: inherit;
312 font: inherit;
313 margin: 0
314 }
315
316 button {
317 overflow: visible
318 }
319
320 button,
321 select {
322 text-transform: none
323 }
324
325 button,
326 html input[type="button"],
327 input[type="reset"],
328 input[type="submit"] {
329 cursor: pointer
330 }
331
332 button[disabled],
333 html input[disabled] {
334 cursor: default
335 }
336
337 button::-moz-focus-inner,
338 input::-moz-focus-inner {
339 border: 0;
340 padding: 0
341 }
342
343 input {
344 line-height: normal
345 }
346
347 input[type="checkbox"],
348 input[type="radio"] {
349 -webkit-box-sizing: border-box;
350 -moz-box-sizing: border-box;
351 box-sizing: border-box;
352 padding: 0
353 }
354
355 input[type="number"]::-webkit-inner-spin-button,
356 input[type="number"]::-webkit-outer-spin-button {
357 height: auto
358 }
359
360 input[type="search"] {
361 -webkit-box-sizing: content-box;
362 -moz-box-sizing: content-box;
363 box-sizing: content-box
364 }
365
366 input[type="search"]::-webkit-search-cancel-button,
367 input[type="search"]::-webkit-search-decoration {
368 -webkit-appearance: none
369 }
370
371 fieldset {
372 border: 1px solid #c0c0c0;
373 margin: 0 2px;
374 padding: 0.35em 0.625em 0.75em
375 }
376
377 legend {
378 border: 0;
379 padding: 0
380 }
381
382 textarea {
383 overflow: auto
384 }
385
386 optgroup {
387 font-weight: bold
388 }
389
390 table {
391 border-collapse: collapse;
392 border-spacing: 0
393 }
394
395 td,
396 th {
397 padding: 0
398 }
399
400 * {
401 -webkit-box-sizing: border-box;
402 -moz-box-sizing: border-box;
403 box-sizing: border-box
404 }
405
406 *:before,
407 *:after {
408 -webkit-box-sizing: border-box;
409 -moz-box-sizing: border-box;
410 box-sizing: border-box
411 }
412
413 html {
414 font-size: 10px;
415 -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
416 }
417
418 body {
419 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
420 font-size: 14px;
421 line-height: 1.42857143;
422 color: #333;
423 background-color: #59abe3
424 }
425
426 input,
427 button,
428 select,
429 textarea {
430 font-family: inherit;
431 font-size: inherit;
432 line-height: inherit
433 }
434
435 a {
436 color: #337ab7;
437 text-decoration: none
438 }
439
440 a:hover,
441 a:focus {
442 color: #23527c;
443 text-decoration: underline
444 }
445
446 a:focus {
447 outline: 5px auto -webkit-focus-ring-color;
448 outline-offset: -2px
449 }
450
451 figure {
452 margin: 0
453 }
454
455 img {
456 vertical-align: middle
457 }
458
459 .img-responsive {
460 display: block;
461 max-width: 100%;
462 height: auto
463 }
464
465 .img-rounded {
466 border-radius: 6px
467 }
468
469 .img-thumbnail {
470 padding: 4px;
471 line-height: 1.42857143;
472 background-color: #fff;
473 border: 1px solid #ddd;
474 border-radius: 4px;
475 -webkit-transition: all .2s ease-in-out;
476 -o-transition: all .2s ease-in-out;
477 transition: all .2s ease-in-out;
478 display: inline-block;
479 max-width: 100%;
480 height: auto
481 }
482
483 .img-circle {
484 border-radius: 50%
485 }
486
487 hr {
488 margin-top: 20px;
489 margin-bottom: 20px;
490 border: 0;
491 border-top: 1px solid #eee
492 }
493
494 .sr-only {
495 position: absolute;
496 width: 1px;
497 height: 1px;
498 padding: 0;
499 margin: -1px;
500 overflow: hidden;
501 clip: rect(0, 0, 0, 0);
502 border: 0
503 }
504
505 .sr-only-focusable:active,
506 .sr-only-focusable:focus {
507 position: static;
508 width: auto;
509 height: auto;
510 margin: 0;
511 overflow: visible;
512 clip: auto
513 }
514
515 [role="button"] {
516 cursor: pointer
517 }
518
519 .modal-open {
520 overflow: hidden
521 }
522
523 .modal {
524 position: fixed;
525 top: 0;
526 right: 0;
527 bottom: 0;
528 left: 0;
529 z-index: 1050;
530 display: none;
531 overflow: hidden;
532 -webkit-overflow-scrolling: touch;
533 outline: 0
534 }
535
536 .modal.fade .modal-dialog {
537 -webkit-transform: translate(0, -25%);
538 -ms-transform: translate(0, -25%);
539 -o-transform: translate(0, -25%);
540 transform: translate(0, -25%);
541 -webkit-transition: -webkit-transform 0.3s ease-out;
542 -o-transition: -o-transform 0.3s ease-out;
543 transition: transform 0.3s ease-out
544 }
545
546 .modal.in .modal-dialog {
547 -webkit-transform: translate(0, 0);
548 -ms-transform: translate(0, 0);
549 -o-transform: translate(0, 0);
550 transform: translate(0, 0)
551 }
552
553 .modal-open .modal {
554 overflow-x: hidden;
555 overflow-y: auto
556 }
557
558 .modal-dialog {
559 position: relative;
560 width: auto;
561 margin: 10px
562 }
563
564 .modal-content {
565 position: relative;
566 background-color: #fff;
567 -webkit-background-clip: padding-box;
568 background-clip: padding-box;
569 border: 1px solid #999;
570 border: 1px solid rgba(0, 0, 0, 0.2);
571 border-radius: 6px;
572 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
573 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
574 outline: 0
575 }
576
577 .modal-backdrop {
578 position: fixed;
579 top: 0;
580 right: 0;
581 bottom: 0;
582 left: 0;
583 z-index: 1040;
584 background-color: #000
585 }
586
587 .modal-backdrop.fade {
588 filter: alpha(opacity=0);
589 opacity: 0
590 }
591
592 .modal-backdrop.in {
593 filter: alpha(opacity=50);
594 opacity: .5
595 }
596
597 .modal-header {
598 padding: 15px;
599 border-bottom: 1px solid #e5e5e5
600 }
601
602 .modal-header .close {
603 margin-top: -2px
604 }
605
606 .modal-title {
607 margin: 0;
608 line-height: 1.42857143
609 }
610
611 .modal-body {
612 position: relative;
613 padding: 15px
614 }
615
616 .modal-footer {
617 padding: 15px;
618 text-align: right;
619 border-top: 1px solid #e5e5e5
620 }
621
622 .modal-footer .btn+.btn {
623 margin-bottom: 0;
624 margin-left: 5px
625 }
626
627 .modal-footer .btn-group .btn+.btn {
628 margin-left: -1px
629 }
630
631 .modal-footer .btn-block+.btn-block {
632 margin-left: 0
633 }
634
635 .modal-scrollbar-measure {
636 position: absolute;
637 top: -9999px;
638 width: 50px;
639 height: 50px;
640 overflow: scroll
641 }
642
643 @media (min-width:768px) {
644 .modal-dialog {
645 width: 600px;
646 margin: 30px auto
647 }
648
649 .modal-content {
650 -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
651 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5)
652 }
653
654 .modal-sm {
655 width: 300px
656 }
657 }
658
659 @media (min-width:992px) {
660 .modal-lg {
661 width: 900px
662 }
663 }
664
665 .clearfix:before,
666 .clearfix:after,
667 .modal-header:before,
668 .modal-header:after,
669 .modal-footer:before,
670 .modal-footer:after {
671 display: table;
672 content: " "
673 }
674
675 .clearfix:after,
676 .modal-header:after,
677 .modal-footer:after {
678 clear: both
679 }
680
681 .center-block {
682 display: block;
683 margin-right: auto;
684 margin-left: auto
685 }
686
687 .pull-right {
688 float: right !important
689 }
690
691 .pull-left {
692 float: left !important
693 }
694
695 .hide {
696 display: none !important
697 }
698
699 .show {
700 display: block !important
701 }
702
703 .invisible {
704 visibility: hidden
705 }
706
707 .text-hide {
708 font: 0/0 a;
709 color: transparent;
710 text-shadow: none;
711 background-color: transparent;
712 border: 0
713 }
714
715 .hidden {
716 display: none !important
717 }
718
719 .affix {
720 position: fixed
721 }
722
723
724 @media only screen and (max-width: 600px) {
725 textarea {
726 min-width: 275px;
727 margin-left: -10px;
728 /* margi: 10px; */
729 }
730
731 .form {
732 /* height: 650px; */
733 margin: calc(40vh - 220px) auto;
734 overflow: hidden;
735 padding: 10px 30px;
736
737 }
738
739 h2 {
740 margin-left: -20px;
741 }
742
743 .final {
744 margin: calc(40vh - 220px) auto;
745 overflow: hidden;
746 padding: 10px 30px;
747 }
748
749 .final h2 {
750 margin-left: 0px;
751 width: 200px;
752
753 }
754 }
755 </style>
756 <div class="final">
757 <h2>Upgrading...</h2>
758 <div class="insider">
759 <div class="load">
760 <div class="LoaderBalls">
761 <div class="LoaderBalls__item"></div>
762 <div class="LoaderBalls__item"></div>
763 <div class="LoaderBalls__item"></div>
764 </div>
765 <h1 class="loader-text" id="loadtxt">0%</h1>
766 </div>
767 <h1 class="fin hid">
768 ✅ UPGRADED
769 </h1>
770 </div>
771 <p style="text-align: center;">
772 Once the process is complete, reboot your router.
773 </p>
774
775
776 </div>
777
778 <script>
779 var num = 1;
780 var s = setInterval(()=>{
781 var element = $("#loadtxt");
782 element[0].innerHTML = num.toString()+"%";
783 num +=1;
784 if(num===101){
785 clearInterval(s);
786 setTimeout(()=>{
787 var cl = $(".load");
788 var upg = $(".fin");
789 cl.addClass("hid");
790 upg.removeClass("hid");
791 },1000)
792 }
793 },1000);
794 </script>
795 </body>
796</html>