diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6e25fa8 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +cache/ \ No newline at end of file diff --git a/README.md b/README.md index 3f903f3..374bfbe 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,7 @@ You can add Telegram channels to the panel in the `config.php` file. - Vless -## Crawat Web Panel v2.0 Preview : -![image](https://github.com/sepsoh/crawat/assets/87861266/d268e163-c030-4267-b749-796885fb4d8d) -![image](https://github.com/sepsoh/crawat/assets/87861266/28d99139-ebe8-461d-bb74-78df579f0a00) - +## Crawat Web Panel v3.0 Preview : +![preview-light](https://github.com/hctilg/crawat/assets/98208009/789c349c-ae29-4b3b-8dad-dc983a867824) +![preview-dark](https://github.com/hctilg/crawat/assets/98208009/36bc9ea1-720a-43b3-b697-7805e986080c) diff --git a/assets/css/mui.min.css b/assets/css/mui.min.css new file mode 100644 index 0000000..a2f0fd7 --- /dev/null +++ b/assets/css/mui.min.css @@ -0,0 +1 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{-webkit-tap-highlight-color:transparent}body{font-family:Arial,Verdana,Tahoma;font-size:14px;font-weight:400;line-height:1.429;color:rgba(0,0,0,.87);background-color:#FFF}a{color:#2196F3;text-decoration:none}a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}p{margin:0 0 10px}ol,ul{margin-top:0;margin-bottom:10px}hr{margin-top:20px;margin-bottom:20px;border:0;height:1px;background-color:rgba(0,0,0,.12)}strong{font-weight:700}abbr[title]{cursor:help;-webkit-text-decoration-color:#2196F3;text-decoration-color:#2196F3}h1,h2,h3{margin-top:20px;margin-bottom:10px}h4,h5,h6{margin-top:10px;margin-bottom:10px}.mui--appbar-height{height:56px}.mui--appbar-min-height,.mui-appbar{min-height:56px}.mui--appbar-line-height{line-height:56px}.mui--appbar-top{top:56px}@media (orientation:landscape) and (max-height:480px){.mui--appbar-height{height:48px}.mui--appbar-min-height,.mui-appbar{min-height:48px}.mui--appbar-line-height{line-height:48px}.mui--appbar-top{top:48px}}@media (min-width:480px){.mui--appbar-height{height:64px}.mui--appbar-min-height,.mui-appbar{min-height:64px}.mui--appbar-line-height{line-height:64px}.mui--appbar-top{top:64px}}.mui-appbar{background-color:#2196F3;color:#FFF}.mui-btn{font-weight:500;font-size:14px;line-height:18px;text-transform:uppercase;color:rgba(0,0,0,.87);background-color:#FFF;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;height:36px;padding:0 26px;margin:6px 0;border:none;border-radius:2px;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;background-image:none;text-align:center;line-height:36px;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;font-family:inherit;letter-spacing:.03em;position:relative;overflow:hidden}.mui-btn:active,.mui-btn:focus,.mui-btn:hover{color:rgba(0,0,0,.87);background-color:#fff}.mui-btn[disabled]:active,.mui-btn[disabled]:focus,.mui-btn[disabled]:hover{color:rgba(0,0,0,.87);background-color:#FFF}.mui-btn.mui-btn--flat{color:rgba(0,0,0,.87);background-color:transparent}.mui-btn.mui-btn--flat:active,.mui-btn.mui-btn--flat:focus,.mui-btn.mui-btn--flat:hover{color:rgba(0,0,0,.87);background-color:#f2f2f2}.mui-btn.mui-btn--flat[disabled]:active,.mui-btn.mui-btn--flat[disabled]:focus,.mui-btn.mui-btn--flat[disabled]:hover{color:rgba(0,0,0,.87);background-color:transparent}.mui-btn:active,.mui-btn:focus,.mui-btn:hover{outline:0;text-decoration:none;color:rgba(0,0,0,.87)}.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}.mui-btn:active:hover{-webkit-box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn:active:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn:active:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}.mui-btn.mui--is-disabled,.mui-btn:disabled{cursor:not-allowed;pointer-events:none;opacity:.6;-webkit-box-shadow:none;box-shadow:none}.mui-btn+.mui-btn{margin-left:8px}.mui-btn--flat{background-color:transparent}.mui-btn--flat:active,.mui-btn--flat:active:hover,.mui-btn--flat:focus,.mui-btn--flat:hover{-webkit-box-shadow:none;box-shadow:none;background-color:#f2f2f2}.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}.mui-btn--fab{position:relative;padding:0;width:55px;height:55px;line-height:55px;border-radius:50%;z-index:1}.mui-btn--primary{color:#FFF;background-color:#2196F3}.mui-btn--primary:active,.mui-btn--primary:focus,.mui-btn--primary:hover{color:#FFF;background-color:#39a1f4}.mui-btn--primary[disabled]:active,.mui-btn--primary[disabled]:focus,.mui-btn--primary[disabled]:hover{color:#FFF;background-color:#2196F3}.mui-btn--primary.mui-btn--flat{color:#2196F3;background-color:transparent}.mui-btn--primary.mui-btn--flat:active,.mui-btn--primary.mui-btn--flat:focus,.mui-btn--primary.mui-btn--flat:hover{color:#2196F3;background-color:#f2f2f2}.mui-btn--primary.mui-btn--flat[disabled]:active,.mui-btn--primary.mui-btn--flat[disabled]:focus,.mui-btn--primary.mui-btn--flat[disabled]:hover{color:#2196F3;background-color:transparent}.mui-btn--dark{color:#FFF;background-color:#424242}.mui-btn--dark:active,.mui-btn--dark:focus,.mui-btn--dark:hover{color:#FFF;background-color:#4f4f4f}.mui-btn--dark[disabled]:active,.mui-btn--dark[disabled]:focus,.mui-btn--dark[disabled]:hover{color:#FFF;background-color:#424242}.mui-btn--dark.mui-btn--flat{color:#424242;background-color:transparent}.mui-btn--dark.mui-btn--flat:active,.mui-btn--dark.mui-btn--flat:focus,.mui-btn--dark.mui-btn--flat:hover{color:#424242;background-color:#f2f2f2}.mui-btn--dark.mui-btn--flat[disabled]:active,.mui-btn--dark.mui-btn--flat[disabled]:focus,.mui-btn--dark.mui-btn--flat[disabled]:hover{color:#424242;background-color:transparent}.mui-btn--danger{color:#FFF;background-color:#F44336}.mui-btn--danger:active,.mui-btn--danger:focus,.mui-btn--danger:hover{color:#FFF;background-color:#f55a4e}.mui-btn--danger[disabled]:active,.mui-btn--danger[disabled]:focus,.mui-btn--danger[disabled]:hover{color:#FFF;background-color:#F44336}.mui-btn--danger.mui-btn--flat{color:#F44336;background-color:transparent}.mui-btn--danger.mui-btn--flat:active,.mui-btn--danger.mui-btn--flat:focus,.mui-btn--danger.mui-btn--flat:hover{color:#F44336;background-color:#f2f2f2}.mui-btn--danger.mui-btn--flat[disabled]:active,.mui-btn--danger.mui-btn--flat[disabled]:focus,.mui-btn--danger.mui-btn--flat[disabled]:hover{color:#F44336;background-color:transparent}.mui-btn--accent{color:#FFF;background-color:#FF4081}.mui-btn--accent:active,.mui-btn--accent:focus,.mui-btn--accent:hover{color:#FFF;background-color:#ff5a92}.mui-btn--accent[disabled]:active,.mui-btn--accent[disabled]:focus,.mui-btn--accent[disabled]:hover{color:#FFF;background-color:#FF4081}.mui-btn--accent.mui-btn--flat{color:#FF4081;background-color:transparent}.mui-btn--accent.mui-btn--flat:active,.mui-btn--accent.mui-btn--flat:focus,.mui-btn--accent.mui-btn--flat:hover{color:#FF4081;background-color:#f2f2f2}.mui-btn--accent.mui-btn--flat[disabled]:active,.mui-btn--accent.mui-btn--flat[disabled]:focus,.mui-btn--accent.mui-btn--flat[disabled]:hover{color:#FF4081;background-color:transparent}.mui-btn--small{height:30.6px;line-height:30.6px;padding:0 16px;font-size:13px}.mui-btn--large{height:54px;line-height:54px;padding:0 26px;font-size:14px}.mui-btn--fab.mui-btn--small{width:44px;height:44px;line-height:44px}.mui-btn--fab.mui-btn--large{width:75px;height:75px;line-height:75px}.mui-checkbox,.mui-radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.mui-checkbox>label,.mui-radio>label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.mui-checkbox input:disabled,.mui-radio input:disabled{cursor:not-allowed}.mui-checkbox input:focus,.mui-radio input:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.mui-checkbox--inline>label>input[type=checkbox],.mui-checkbox>label>input[type=checkbox],.mui-radio--inline>label>input[type=radio],.mui-radio>label>input[type=radio]{position:absolute;margin-left:-20px;margin-top:4px}.mui-checkbox+.mui-checkbox,.mui-radio+.mui-radio{margin-top:-5px}.mui-checkbox--inline,.mui-radio--inline{display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:400;cursor:pointer}.mui-checkbox--inline>input[type=checkbox],.mui-checkbox--inline>input[type=radio],.mui-checkbox--inline>label>input[type=checkbox],.mui-checkbox--inline>label>input[type=radio],.mui-radio--inline>input[type=checkbox],.mui-radio--inline>input[type=radio],.mui-radio--inline>label>input[type=checkbox],.mui-radio--inline>label>input[type=radio]{margin:4px 0 0;line-height:normal}.mui-checkbox--inline+.mui-checkbox--inline,.mui-radio--inline+.mui-radio--inline{margin-top:0;margin-left:10px}.mui-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.mui-container:after,.mui-container:before{content:" ";display:table}.mui-container:after{clear:both}@media (min-width:544px){.mui-container{max-width:570px}}@media (min-width:768px){.mui-container{max-width:740px}}@media (min-width:992px){.mui-container{max-width:960px}}@media (min-width:1200px){.mui-container{max-width:1170px}}.mui-container-fluid{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.mui-container-fluid:after,.mui-container-fluid:before{content:" ";display:table}.mui-container-fluid:after{clear:both}.mui-divider{display:block;height:1px;background-color:rgba(0,0,0,.12)}.mui--divider-top{border-top:1px solid rgba(0,0,0,.12)}.mui--divider-bottom{border-bottom:1px solid rgba(0,0,0,.12)}.mui--divider-left{border-left:1px solid rgba(0,0,0,.12)}.mui--divider-right{border-right:1px solid rgba(0,0,0,.12)}.mui-dropdown{display:inline-block;position:relative}[data-mui-toggle=dropdown]{outline:0}.mui-dropdown__menu{position:absolute;display:none;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;text-align:left;background-color:#FFF;border-radius:2px;z-index:1;background-clip:padding-box}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-dropdown__menu{border-top:1px solid rgba(0,0,0,.12);border-left:1px solid rgba(0,0,0,.12)}}@supports (-ms-ime-align:auto){.mui-dropdown__menu{border-top:1px solid rgba(0,0,0,.12);border-left:1px solid rgba(0,0,0,.12)}}.mui-dropdown__menu.mui--is-open{display:block}.mui-dropdown__menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.429;color:rgba(0,0,0,.87);text-decoration:none;white-space:nowrap}.mui-dropdown__menu>li>a:focus,.mui-dropdown__menu>li>a:hover{text-decoration:none;color:rgba(0,0,0,.87);background-color:#EEE}.mui-dropdown__menu>.mui--is-disabled>a,.mui-dropdown__menu>.mui--is-disabled>a:focus,.mui-dropdown__menu>.mui--is-disabled>a:hover{color:#EEE}.mui-dropdown__menu>.mui--is-disabled>a:focus,.mui-dropdown__menu>.mui--is-disabled>a:hover{text-decoration:none;background-color:transparent;background-image:none;cursor:not-allowed}.mui-dropdown__menu--right{left:auto;right:0}.mui-dropdown--up>.mui-dropdown__menu{margin:0 0 2px}.mui-dropdown--right>.mui-dropdown__menu{margin:0 0 0 2px}.mui-dropdown--left>.mui-dropdown__menu{margin:0 2px 0 0}.mui-form legend{display:block;width:100%;padding:0;margin-bottom:10px;font-size:21px;color:rgba(0,0,0,.87);line-height:inherit;border:0}.mui-form fieldset{border:0;padding:0;margin:0 0 20px 0}@media (min-width:544px){.mui-form--inline .mui-textfield{display:inline-block;vertical-align:bottom;margin-bottom:0}.mui-form--inline .mui-checkbox,.mui-form--inline .mui-radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.mui-form--inline .mui-checkbox>label,.mui-form--inline .mui-radio>label{padding-left:0}.mui-form--inline .mui-checkbox>label>input[type=checkbox],.mui-form--inline .mui-radio>label>input[type=radio]{position:relative;margin-left:0}.mui-form--inline .mui-select{display:inline-block;vertical-align:bottom;margin-bottom:0}.mui-form--inline .mui-btn{margin-bottom:0;margin-top:0;vertical-align:bottom}}.mui-row{margin-left:-15px;margin-right:-15px}.mui-row:after,.mui-row:before{content:" ";display:table}.mui-row:after{clear:both}.mui-col-lg-1,.mui-col-lg-10,.mui-col-lg-11,.mui-col-lg-12,.mui-col-lg-2,.mui-col-lg-3,.mui-col-lg-4,.mui-col-lg-5,.mui-col-lg-6,.mui-col-lg-7,.mui-col-lg-8,.mui-col-lg-9,.mui-col-md-1,.mui-col-md-10,.mui-col-md-11,.mui-col-md-12,.mui-col-md-2,.mui-col-md-3,.mui-col-md-4,.mui-col-md-5,.mui-col-md-6,.mui-col-md-7,.mui-col-md-8,.mui-col-md-9,.mui-col-sm-1,.mui-col-sm-10,.mui-col-sm-11,.mui-col-sm-12,.mui-col-sm-2,.mui-col-sm-3,.mui-col-sm-4,.mui-col-sm-5,.mui-col-sm-6,.mui-col-sm-7,.mui-col-sm-8,.mui-col-sm-9,.mui-col-xs-1,.mui-col-xs-10,.mui-col-xs-11,.mui-col-xs-12,.mui-col-xs-2,.mui-col-xs-3,.mui-col-xs-4,.mui-col-xs-5,.mui-col-xs-6,.mui-col-xs-7,.mui-col-xs-8,.mui-col-xs-9{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:1px;padding-left:15px;padding-right:15px}.mui-col-xs-1,.mui-col-xs-10,.mui-col-xs-11,.mui-col-xs-12,.mui-col-xs-2,.mui-col-xs-3,.mui-col-xs-4,.mui-col-xs-5,.mui-col-xs-6,.mui-col-xs-7,.mui-col-xs-8,.mui-col-xs-9{float:left}.mui-col-xs-1{width:8.3333333333%}.mui-col-xs-2{width:16.6666666667%}.mui-col-xs-3{width:25%}.mui-col-xs-4{width:33.3333333333%}.mui-col-xs-5{width:41.6666666667%}.mui-col-xs-6{width:50%}.mui-col-xs-7{width:58.3333333333%}.mui-col-xs-8{width:66.6666666667%}.mui-col-xs-9{width:75%}.mui-col-xs-10{width:83.3333333333%}.mui-col-xs-11{width:91.6666666667%}.mui-col-xs-12{width:100%}.mui-col-xs-offset-0{margin-left:0}.mui-col-xs-offset-1{margin-left:8.3333333333%}.mui-col-xs-offset-2{margin-left:16.6666666667%}.mui-col-xs-offset-3{margin-left:25%}.mui-col-xs-offset-4{margin-left:33.3333333333%}.mui-col-xs-offset-5{margin-left:41.6666666667%}.mui-col-xs-offset-6{margin-left:50%}.mui-col-xs-offset-7{margin-left:58.3333333333%}.mui-col-xs-offset-8{margin-left:66.6666666667%}.mui-col-xs-offset-9{margin-left:75%}.mui-col-xs-offset-10{margin-left:83.3333333333%}.mui-col-xs-offset-11{margin-left:91.6666666667%}.mui-col-xs-offset-12{margin-left:100%}@media (min-width:544px){.mui-col-sm-1,.mui-col-sm-10,.mui-col-sm-11,.mui-col-sm-12,.mui-col-sm-2,.mui-col-sm-3,.mui-col-sm-4,.mui-col-sm-5,.mui-col-sm-6,.mui-col-sm-7,.mui-col-sm-8,.mui-col-sm-9{float:left}.mui-col-sm-1{width:8.3333333333%}.mui-col-sm-2{width:16.6666666667%}.mui-col-sm-3{width:25%}.mui-col-sm-4{width:33.3333333333%}.mui-col-sm-5{width:41.6666666667%}.mui-col-sm-6{width:50%}.mui-col-sm-7{width:58.3333333333%}.mui-col-sm-8{width:66.6666666667%}.mui-col-sm-9{width:75%}.mui-col-sm-10{width:83.3333333333%}.mui-col-sm-11{width:91.6666666667%}.mui-col-sm-12{width:100%}.mui-col-sm-offset-0{margin-left:0}.mui-col-sm-offset-1{margin-left:8.3333333333%}.mui-col-sm-offset-2{margin-left:16.6666666667%}.mui-col-sm-offset-3{margin-left:25%}.mui-col-sm-offset-4{margin-left:33.3333333333%}.mui-col-sm-offset-5{margin-left:41.6666666667%}.mui-col-sm-offset-6{margin-left:50%}.mui-col-sm-offset-7{margin-left:58.3333333333%}.mui-col-sm-offset-8{margin-left:66.6666666667%}.mui-col-sm-offset-9{margin-left:75%}.mui-col-sm-offset-10{margin-left:83.3333333333%}.mui-col-sm-offset-11{margin-left:91.6666666667%}.mui-col-sm-offset-12{margin-left:100%}}@media (min-width:768px){.mui-col-md-1,.mui-col-md-10,.mui-col-md-11,.mui-col-md-12,.mui-col-md-2,.mui-col-md-3,.mui-col-md-4,.mui-col-md-5,.mui-col-md-6,.mui-col-md-7,.mui-col-md-8,.mui-col-md-9{float:left}.mui-col-md-1{width:8.3333333333%}.mui-col-md-2{width:16.6666666667%}.mui-col-md-3{width:25%}.mui-col-md-4{width:33.3333333333%}.mui-col-md-5{width:41.6666666667%}.mui-col-md-6{width:50%}.mui-col-md-7{width:58.3333333333%}.mui-col-md-8{width:66.6666666667%}.mui-col-md-9{width:75%}.mui-col-md-10{width:83.3333333333%}.mui-col-md-11{width:91.6666666667%}.mui-col-md-12{width:100%}.mui-col-md-offset-0{margin-left:0}.mui-col-md-offset-1{margin-left:8.3333333333%}.mui-col-md-offset-2{margin-left:16.6666666667%}.mui-col-md-offset-3{margin-left:25%}.mui-col-md-offset-4{margin-left:33.3333333333%}.mui-col-md-offset-5{margin-left:41.6666666667%}.mui-col-md-offset-6{margin-left:50%}.mui-col-md-offset-7{margin-left:58.3333333333%}.mui-col-md-offset-8{margin-left:66.6666666667%}.mui-col-md-offset-9{margin-left:75%}.mui-col-md-offset-10{margin-left:83.3333333333%}.mui-col-md-offset-11{margin-left:91.6666666667%}.mui-col-md-offset-12{margin-left:100%}}@media (min-width:992px){.mui-col-lg-1,.mui-col-lg-10,.mui-col-lg-11,.mui-col-lg-12,.mui-col-lg-2,.mui-col-lg-3,.mui-col-lg-4,.mui-col-lg-5,.mui-col-lg-6,.mui-col-lg-7,.mui-col-lg-8,.mui-col-lg-9{float:left}.mui-col-lg-1{width:8.3333333333%}.mui-col-lg-2{width:16.6666666667%}.mui-col-lg-3{width:25%}.mui-col-lg-4{width:33.3333333333%}.mui-col-lg-5{width:41.6666666667%}.mui-col-lg-6{width:50%}.mui-col-lg-7{width:58.3333333333%}.mui-col-lg-8{width:66.6666666667%}.mui-col-lg-9{width:75%}.mui-col-lg-10{width:83.3333333333%}.mui-col-lg-11{width:91.6666666667%}.mui-col-lg-12{width:100%}.mui-col-lg-offset-0{margin-left:0}.mui-col-lg-offset-1{margin-left:8.3333333333%}.mui-col-lg-offset-2{margin-left:16.6666666667%}.mui-col-lg-offset-3{margin-left:25%}.mui-col-lg-offset-4{margin-left:33.3333333333%}.mui-col-lg-offset-5{margin-left:41.6666666667%}.mui-col-lg-offset-6{margin-left:50%}.mui-col-lg-offset-7{margin-left:58.3333333333%}.mui-col-lg-offset-8{margin-left:66.6666666667%}.mui-col-lg-offset-9{margin-left:75%}.mui-col-lg-offset-10{margin-left:83.3333333333%}.mui-col-lg-offset-11{margin-left:91.6666666667%}.mui-col-lg-offset-12{margin-left:100%}}@media (min-width:1200px){.mui-col-xl-1,.mui-col-xl-10,.mui-col-xl-11,.mui-col-xl-12,.mui-col-xl-2,.mui-col-xl-3,.mui-col-xl-4,.mui-col-xl-5,.mui-col-xl-6,.mui-col-xl-7,.mui-col-xl-8,.mui-col-xl-9{float:left}.mui-col-xl-1{width:8.3333333333%}.mui-col-xl-2{width:16.6666666667%}.mui-col-xl-3{width:25%}.mui-col-xl-4{width:33.3333333333%}.mui-col-xl-5{width:41.6666666667%}.mui-col-xl-6{width:50%}.mui-col-xl-7{width:58.3333333333%}.mui-col-xl-8{width:66.6666666667%}.mui-col-xl-9{width:75%}.mui-col-xl-10{width:83.3333333333%}.mui-col-xl-11{width:91.6666666667%}.mui-col-xl-12{width:100%}.mui-col-xl-offset-0{margin-left:0}.mui-col-xl-offset-1{margin-left:8.3333333333%}.mui-col-xl-offset-2{margin-left:16.6666666667%}.mui-col-xl-offset-3{margin-left:25%}.mui-col-xl-offset-4{margin-left:33.3333333333%}.mui-col-xl-offset-5{margin-left:41.6666666667%}.mui-col-xl-offset-6{margin-left:50%}.mui-col-xl-offset-7{margin-left:58.3333333333%}.mui-col-xl-offset-8{margin-left:66.6666666667%}.mui-col-xl-offset-9{margin-left:75%}.mui-col-xl-offset-10{margin-left:83.3333333333%}.mui-col-xl-offset-11{margin-left:91.6666666667%}.mui-col-xl-offset-12{margin-left:100%}}.mui-panel{padding:15px;margin-bottom:20px;border-radius:0;background-color:#FFF;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.mui-panel:after,.mui-panel:before{content:" ";display:table}.mui-panel:after{clear:both}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-panel{-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}}@supports (-ms-ime-align:auto){.mui-panel{-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}}.mui-select{display:block;padding-top:15px;margin-bottom:20px;position:relative}.mui-select:focus{outline:0}.mui-select:focus>select{height:calc(32px + 1px);margin-bottom:-1px;border-color:#2196F3;border-width:2px}.mui-select>select{display:block;height:32px;width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:0;border:none;border-bottom:1px solid rgba(0,0,0,.26);border-radius:0;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:right center;cursor:pointer;color:rgba(0,0,0,.87);font-size:16px;font-family:inherit;line-height:inherit;padding:0 25px 0 0}.mui-select>select::-ms-expand{display:none}.mui-select>select:focus{outline:0;height:calc(32px + 1px);margin-bottom:-1px;border-color:#2196F3;border-width:2px}.mui-select>select:disabled{color:rgba(0,0,0,.38);cursor:not-allowed;background-color:transparent;opacity:1}.mui-select>select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.mui-select>select:focus::-ms-value{background:0 0;color:rgba(0,0,0,.87)}.mui-select>select.mui--text-placeholder{color:rgba(0,0,0,.26)}.mui-select>label{position:absolute;top:0;display:block;width:100%;color:rgba(0,0,0,.54);font-size:12px;font-weight:400;line-height:15px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-select:focus>label,.mui-select>select:focus~label{color:#2196F3}.mui-select__menu{position:absolute;z-index:2;min-width:100%;overflow-y:auto;padding:8px 0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#FFF;font-size:16px}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-select__menu{border-left:1px solid rgba(0,0,0,.12);border-top:1px solid rgba(0,0,0,.12)}}@supports (-ms-ime-align:auto){.mui-select__menu{border-left:1px solid rgba(0,0,0,.12);border-top:1px solid rgba(0,0,0,.12)}}.mui-select__menu>div{padding:0 22px;height:42px;line-height:42px;cursor:pointer;white-space:nowrap}.mui-select__menu>div.mui--is-selected{background-color:#EEE}.mui-select__menu>div.mui--is-disabled{color:rgba(0,0,0,.38);cursor:not-allowed}.mui-select__menu>div:not(.mui-optgroup__label):not(.mui--is-disabled):hover{background-color:#E0E0E0}.mui-optgroup__option{text-indent:1em}.mui-optgroup__label{color:rgba(0,0,0,.54);font-size:.9em}.mui-table{width:100%;max-width:100%;margin-bottom:20px}.mui-table>tbody>tr>th,.mui-table>tfoot>tr>th,.mui-table>thead>tr>th{text-align:left}.mui-table>tbody>tr>td,.mui-table>tbody>tr>th,.mui-table>tfoot>tr>td,.mui-table>tfoot>tr>th,.mui-table>thead>tr>td,.mui-table>thead>tr>th{padding:10px;line-height:1.429}.mui-table>thead>tr>th{border-bottom:2px solid rgba(0,0,0,.12);font-weight:700}.mui-table>tbody+tbody{border-top:2px solid rgba(0,0,0,.12)}.mui-table.mui-table--bordered>tbody>tr>td{border-bottom:1px solid rgba(0,0,0,.12)}.mui-tabs__bar{list-style:none;padding-left:0;margin-bottom:0;background-color:transparent;white-space:nowrap;overflow-x:auto}.mui-tabs__bar>li{display:inline-block}.mui-tabs__bar>li>a{display:block;white-space:nowrap;text-transform:uppercase;font-weight:500;font-size:14px;color:rgba(0,0,0,.87);cursor:default;height:48px;line-height:48px;padding-left:24px;padding-right:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mui-tabs__bar>li>a:hover{text-decoration:none}.mui-tabs__bar>li.mui--is-active{border-bottom:2px solid #2196F3}.mui-tabs__bar>li.mui--is-active>a{color:#2196F3}.mui-tabs__bar.mui-tabs__bar--justified{display:table;width:100%;table-layout:fixed}.mui-tabs__bar.mui-tabs__bar--justified>li{display:table-cell}.mui-tabs__bar.mui-tabs__bar--justified>li>a{text-align:center;padding-left:0;padding-right:0}.mui-tabs__pane{display:none}.mui-tabs__pane.mui--is-active{display:block}.mui-textfield{display:block;padding-top:15px;margin-bottom:20px;position:relative}.mui-textfield>label{position:absolute;top:0;display:block;width:100%;color:rgba(0,0,0,.54);font-size:12px;font-weight:400;line-height:15px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-textfield>textarea{padding-top:5px}.mui-textfield>input:focus~label,.mui-textfield>textarea:focus~label{color:#2196F3}.mui-textfield--float-label>label{position:absolute;-webkit-transform:translate(0,15px);transform:translate(0,15px);font-size:16px;line-height:32px;color:rgba(0,0,0,.26);text-overflow:clip;cursor:text;pointer-events:none}.mui-textfield--float-label>input:-webkit-autofill~label,.mui-textfield--float-label>textarea:-webkit-autofill~label{-webkit-transform:translate(0,0);transform:translate(0,0);font-size:12px;line-height:15px;text-overflow:ellipsis}.mui-textfield--float-label>input:focus~label,.mui-textfield--float-label>textarea:focus~label{-webkit-transform:translate(0,0);transform:translate(0,0);font-size:12px;line-height:15px;text-overflow:ellipsis}.mui-textfield--float-label>input:not(:focus).mui--is-not-empty~label,.mui-textfield--float-label>input:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>input:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>textarea:not(:focus).mui--is-not-empty~label,.mui-textfield--float-label>textarea:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>textarea:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label{color:rgba(0,0,0,.54);font-size:12px;line-height:15px;-webkit-transform:translate(0,0);transform:translate(0,0);text-overflow:ellipsis}.mui-textfield--wrap-label{display:table;width:100%;padding-top:0}.mui-textfield--wrap-label:not(.mui-textfield--float-label)>label{display:table-header-group;position:static;white-space:normal;overflow-x:visible}.mui-textfield>input,.mui-textfield>textarea{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:transparent;color:rgba(0,0,0,.87);border:none;border-bottom:1px solid rgba(0,0,0,.26);outline:0;width:100%;padding:0;-webkit-box-shadow:none;box-shadow:none;border-radius:0;font-size:16px;font-family:inherit;line-height:inherit;background-image:none}.mui-textfield>input:focus,.mui-textfield>textarea:focus{border-color:#2196F3;border-width:2px}.mui-textfield>input:-moz-read-only,.mui-textfield>textarea:-moz-read-only{cursor:not-allowed;background-color:transparent;opacity:1}.mui-textfield>input:disabled,.mui-textfield>input:read-only,.mui-textfield>textarea:disabled,.mui-textfield>textarea:read-only{cursor:not-allowed;background-color:transparent;opacity:1}.mui-textfield>input::-webkit-input-placeholder,.mui-textfield>textarea::-webkit-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input::-moz-placeholder,.mui-textfield>textarea::-moz-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input:-ms-input-placeholder,.mui-textfield>textarea:-ms-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input::-ms-input-placeholder,.mui-textfield>textarea::-ms-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input::placeholder,.mui-textfield>textarea::placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input{height:32px}.mui-textfield>input:focus{height:calc(32px + 1px);margin-bottom:-1px}.mui-textfield>textarea{min-height:64px}.mui-textfield>textarea[rows]:not([rows="2"]):focus{margin-bottom:-1px}.mui-textfield>input:focus{height:calc(32px + 1px);margin-bottom:-1px}.mui-textfield>input:invalid:not(:focus):not(:required),.mui-textfield>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>input:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:not(:required),.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:invalid:not(:focus):not(:required),.mui-textfield>textarea:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>textarea:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:not(:focus).mui--is-invalid:not(:required),.mui-textfield>textarea:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>textarea:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>textarea:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty){border-color:#F44336;border-width:2px}.mui-textfield>input:invalid:not(:focus):not(:required),.mui-textfield>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>input:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:not(:required),.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty){height:calc(32px + 1px);margin-bottom:-1px}.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):not(:required)~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):not(:required)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label{color:#F44336}.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):not(:required)~label,.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched~label,.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):not(:required)~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):required.mui--is-empty.mui--is-touched~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):required.mui--is-not-empty~label{color:#F44336}.mui-textfield.mui-textfield--float-label>.mui--is-invalid.mui--is-not-empty:not(:focus)~label{color:#F44336}.mui-textfield:not(.mui-textfield--float-label)>.mui--is-invalid:not(:focus)~label{color:#F44336}.mui--no-transition{-webkit-transition:none!important;transition:none!important}.mui--no-user-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mui-caret{display:inline-block;width:0;height:0;margin:0 0 0 2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.mui-caret.mui-caret--up{-webkit-transform:rotate(180deg);transform:rotate(180deg);margin:0 0 2px 2px}.mui-caret.mui-caret--right{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);margin:0 0 2px 2px}.mui-caret.mui-caret--left{-webkit-transform:rotate(90deg);transform:rotate(90deg);margin:0 2px 2px 0}.mui--text-left{text-align:left!important}.mui--text-right{text-align:right!important}.mui--text-center{text-align:center!important}.mui--text-justify{text-align:justify!important}.mui--text-nowrap{white-space:nowrap!important}.mui--align-baseline{vertical-align:baseline!important}.mui--align-top{vertical-align:top!important}.mui--align-middle{vertical-align:middle!important}.mui--align-bottom{vertical-align:bottom!important}.mui--text-dark{color:rgba(0,0,0,.87)}.mui--text-dark-secondary{color:rgba(0,0,0,.54)}.mui--text-dark-hint{color:rgba(0,0,0,.38)}.mui--text-light{color:#FFF}.mui--text-light-secondary{color:rgba(255,255,255,.7)}.mui--text-light-hint{color:rgba(255,255,255,.3)}.mui--text-accent{color:rgba(255,64,129,.87)}.mui--text-accent-secondary{color:rgba(255,64,129,.54)}.mui--text-accent-hint{color:rgba(255,64,129,.38)}.mui--text-black{color:#000}.mui--text-white{color:#FFF}.mui--text-danger{color:#F44336}.mui--text-placeholder{color:rgba(0,0,0,.26)}.mui--bg-primary{background-color:#2196F3}.mui--bg-primary-dark{background-color:#1976D2}.mui--bg-primary-light{background-color:#BBDEFB}.mui--bg-accent{background-color:#FF4081}.mui--bg-accent-dark{background-color:#F50057}.mui--bg-accent-light{background-color:#FF80AB}.mui--bg-danger{background-color:#F44336}.mui-list--unstyled{padding-left:0;list-style:none}.mui-list--inline{padding-left:0;list-style:none;margin-left:-5px}.mui-list--inline>li{display:inline-block;padding-left:5px;padding-right:5px}.mui--z1,.mui-dropdown__menu,.mui-select__menu{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.mui--z2{-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.mui--z3{-webkit-box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.mui--z4{-webkit-box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.mui--z5{-webkit-box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22);box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}.mui--clearfix:after,.mui--clearfix:before{content:" ";display:table}.mui--clearfix:after{clear:both}.mui--pull-right{float:right!important}.mui--pull-left{float:left!important}.mui--hide{display:none!important}.mui--show{display:block!important}.mui--invisible{visibility:hidden}.mui--overflow-hidden{overflow:hidden!important}.mui--overflow-hidden-x{overflow-x:hidden!important}.mui--overflow-hidden-y{overflow-y:hidden!important}.mui--visible-lg-block,.mui--visible-lg-inline,.mui--visible-lg-inline-block,.mui--visible-md-block,.mui--visible-md-inline,.mui--visible-md-inline-block,.mui--visible-sm-block,.mui--visible-sm-inline,.mui--visible-sm-inline-block,.mui--visible-xl-block,.mui--visible-xl-inline,.mui--visible-xl-inline-block,.mui--visible-xs-block,.mui--visible-xs-inline,.mui--visible-xs-inline-block{display:none!important}@media (max-width:543px){.mui-visible-xs{display:block!important}table.mui-visible-xs{display:table}tr.mui-visible-xs{display:table-row!important}td.mui-visible-xs,th.mui-visible-xs{display:table-cell!important}.mui--visible-xs-block{display:block!important}.mui--visible-xs-inline{display:inline!important}.mui--visible-xs-inline-block{display:inline-block!important}}@media (min-width:544px) and (max-width:767px){.mui-visible-sm{display:block!important}table.mui-visible-sm{display:table}tr.mui-visible-sm{display:table-row!important}td.mui-visible-sm,th.mui-visible-sm{display:table-cell!important}.mui--visible-sm-block{display:block!important}.mui--visible-sm-inline{display:inline!important}.mui--visible-sm-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.mui-visible-md{display:block!important}table.mui-visible-md{display:table}tr.mui-visible-md{display:table-row!important}td.mui-visible-md,th.mui-visible-md{display:table-cell!important}.mui--visible-md-block{display:block!important}.mui--visible-md-inline{display:inline!important}.mui--visible-md-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.mui-visible-lg{display:block!important}table.mui-visible-lg{display:table}tr.mui-visible-lg{display:table-row!important}td.mui-visible-lg,th.mui-visible-lg{display:table-cell!important}.mui--visible-lg-block{display:block!important}.mui--visible-lg-inline{display:inline!important}.mui--visible-lg-inline-block{display:inline-block!important}}@media (min-width:1200px){.mui-visible-xl{display:block!important}table.mui-visible-xl{display:table}tr.mui-visible-xl{display:table-row!important}td.mui-visible-xl,th.mui-visible-xl{display:table-cell!important}.mui--visible-xl-block{display:block!important}.mui--visible-xl-inline{display:inline!important}.mui--visible-xl-inline-block{display:inline-block!important}}@media (max-width:543px){.mui--hidden-xs{display:none!important}}@media (min-width:544px) and (max-width:767px){.mui--hidden-sm{display:none!important}}@media (min-width:768px) and (max-width:991px){.mui--hidden-md{display:none!important}}@media (min-width:992px) and (max-width:1199px){.mui--hidden-lg{display:none!important}}@media (min-width:1200px){.mui--hidden-xl{display:none!important}}.mui-scrlock--showbar-y{overflow-y:scroll!important}.mui-scrlock--showbar-x{overflow-x:scroll!important}#mui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999999;background-color:rgba(0,0,0,.2);overflow:auto}.mui-btn__ripple-container{position:absolute;top:0;left:0;display:block;height:100%;width:100%;overflow:hidden;z-index:0;pointer-events:none}.mui-ripple{position:absolute;top:0;left:0;border-radius:50%;opacity:0;pointer-events:none;-webkit-transform:scale(.0001,.0001);transform:scale(.0001,.0001)}.mui-ripple.mui--is-animating{-webkit-transform:none;transform:none;-webkit-transition:width .3s cubic-bezier(0,0,.2,1),height .3s cubic-bezier(0,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:width .3s cubic-bezier(0,0,.2,1),height .3s cubic-bezier(0,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1);transition:transform .3s cubic-bezier(0,0,.2,1),width .3s cubic-bezier(0,0,.2,1),height .3s cubic-bezier(0,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1);transition:transform .3s cubic-bezier(0,0,.2,1),width .3s cubic-bezier(0,0,.2,1),height .3s cubic-bezier(0,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1),-webkit-transform .3s cubic-bezier(0,0,.2,1)}.mui-ripple.mui--is-visible{opacity:.3}.mui-btn .mui-ripple{background-color:#a6a6a6}.mui-btn--primary .mui-ripple{background-color:#FFF}.mui-btn--dark .mui-ripple{background-color:#FFF}.mui-btn--danger .mui-ripple{background-color:#FFF}.mui-btn--accent .mui-ripple{background-color:#FFF}.mui-btn--flat .mui-ripple{background-color:#a6a6a6}.mui--text-display4{font-weight:300;font-size:112px;line-height:112px}.mui--text-display3{font-weight:400;font-size:56px;line-height:56px}.mui--text-display2{font-weight:400;font-size:45px;line-height:48px}.mui--text-display1,h1{font-weight:400;font-size:34px;line-height:40px}.mui--text-headline,h2{font-weight:400;font-size:24px;line-height:32px}.mui--text-title,h3{font-weight:400;font-size:20px;line-height:28px}.mui--text-subhead,h4{font-weight:400;font-size:16px;line-height:24px}.mui--text-body2,h5{font-weight:500;font-size:14px;line-height:24px}.mui--text-body1{font-weight:400;font-size:14px;line-height:20px}.mui--text-caption{font-weight:400;font-size:12px;line-height:16px}.mui--text-menu{font-weight:500;font-size:13px;line-height:17px}.mui--text-button{font-weight:500;font-size:14px;line-height:18px;text-transform:uppercase} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 31a0bb3..f80c467 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,138 +1,285 @@ +@charset "utf-8"; +@import url('./mui.min.css'); + +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: url('../font/poppins.ttf') format('ttf'); +} + * { - padding: 0; - margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-family: "Poppins", sans-serif; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + margin: 0; + border: 0px; + outline: 0px; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; + text-decoration: none !important; + font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; } -body { - background-color: #eff3ff; + +:root { + --background-color: #eff3ff; + --bg-container-color: #fff; + --text-color: #212529; + --color-scheme: light; + --card-shadow: 0 20px 30px rgba(0, 0, 0, 0.15), -1px -1px 1px 2px rgba(0, 0, 0, 0.02); } -.wrapper { - position: absolute; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - top: 20px; - left: 50%; + +[theme="dark"] { + --background-color: #212529; + --bg-container-color: #2b2b2e; + --text-color: #d0e7ff; + --color-scheme: dark; + --card-shadow: 0 20px 30px rgba(45, 45, 45, 0.15), -1px -1px 1px 2px rgba(62, 62, 62, 0.02); } -.text-center { - text-align: center; - font-weight: 600; + +html:not([theme="dark"]) .icon.light_mode, +[theme="dark"] .icon.dark_mode { + display: none; } -.container { - width: 330px; - position: relative; + +html, body { + width: 100vw; + min-height: 100vh; + overflow: hidden auto; + background: var(--background-color); +} + +html { + color-scheme: var(--color-scheme); +} + +.wrapper { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: center; + color: var(--text-color); + font-size: 1rem; } -.row-container { - display: flex; + +.container { + position: relative; + background: transparent; + width: 100%; + max-width: 350px; + min-height: 470px; + padding: 20px; + margin-bottom: 1em; + overflow: hidden; } -#card { - width: 100%; - padding: 20px; + +@media screen and (min-width: 350px) { + .container { + width: calc(100% - 32px); + margin: 2em 0 1em; + background: var(--bg-container-color); border-radius: 10px; - -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); - box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); - position: relative; -} -#card img { - display: block; - width: 250px; - max-height: 250px; - position: relative; - margin: 20px auto 10px auto; - font-size: 18px; - aspect-ratio: 150/180; -} -.hp { - width: 80px; - text-align: center; - margin-left: auto; - padding: 5px 0; - border-radius: 40px; - background-color: #ffffff; - font-weight: 400; -} -.types { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: distribute; - justify-content: space-around; - margin: 15px 0 25px 0; -} -.hp span, -.types span { - font-size: 10px; - letter-spacing: 0.4px; - font-weight: 600; -} -.types span { - padding: 5px 20px; - border-radius: 20px; - color: #ffffff; -} -span:hover { - opacity: 0.4; + -webkit-box-shadow: var(--card-shadow); + box-shadow: var(--card-shadow); + } + + #cbtn { + width: calc(100% - 36px); + } +} + +@media screen and (min-width: 450px) { + .container { + margin: 4em 0 1em; + } +} + +@media screen and (min-width: 500px) { + .container { + margin: 5em 0 1em; + } +} + +@media screen and (min-width: 600px) { + .container { + margin: 7em 0 1em; + } } + +@media screen and (min-width: 710px) { + .wrapper { + justify-content: center; + } + + .container { + margin: 0 0 1em; + } +} + +.container header { + position: relative; + width: 100%; + height: 32px; + margin-bottom: 280px; + background: transparent; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + --background-gur: rgb(173, 203, 224); +} + +.container * { + z-index: 1; +} + +.container header::before { + content: ''; + position: absolute; + z-index: 0; + top: -195px; + left: 50%; + transform: translateX(-50%); + background: var(--background-gur); + border-radius: 50%; + width: 370px; + height: 370px; +} + +[theme="dark"] .container header::before { + opacity: 0.92; +} + +#toggle-theme:active { + transform: scale(1.1); + opacity: 0.97; +} + +#info { + width: 80px; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + text-align: center; + padding: 5px 0; + border-radius: 40px; + background: #fff; + cursor: pointer; + color: #171A1D; + font-weight: 600; + font-size: 10px; +} + +#image { + display: block; + position: absolute; + top: 75px; + left: 50%; + transform: translateX(-50%); + width: 252px; + height: 252px; + aspect-ratio: 150/180; + font-size: 18px; +} + +.text-center { + text-align: center; + font-weight: 600; +} + +#provider-name-sub { + color: #b0b0b0; +} + .stats { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - text-align: center; - font-size: 15px; -} -.stats p { - color: #404060; -} -.btn { - display: block; - padding: 12px 40px; - font-size: 16px; - position: relative; - margin: 30px auto; - background-color: #06253b; - color: white; - border: none; - border-radius: 5px; -} -.btn:hover { - background-color: #726f6f; -} - -a { - position: relative; - display: block; - background-color: #0190ff; - text-align: center; - text-decoration: none; - padding: 15px 0; - border-radius: 5px; - color: #ffffff; -} -a:hover { - background-color: #0059b3; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + text-align: center; + font-size: 15px; +} + +#update { + color: var(--text-color); + opacity: 0.8; } select { - padding: 8px; - border-radius: 7px; - border: none; - outline: none; - font-size: 13px; - font-weight: bold; - margin-top: 5px; - background-color: rgba(236, 233, 233, 0.86); - color: #333; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} -#provider-name-sub{ - color: #b0b0b0; + box-sizing: content-box; + background-color: rgba(236, 233, 233, 0.92); + color: #333; + padding: 8px; + border-radius: 7px; + border: none; + outline: none; + font-size: 13px; + font-weight: bold; + margin-top: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.fab-btn { + background: transparent; + width: 30px; + height: 30px; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; +} + +.fab-btn .light_mode { + fill: rgb(255, 255, 25); +} + +.fab-btn .dark_mode { + fill: rgb(250, 255, 255); +} + +.mui-btn { + border-radius: 5px; + font-size: 16px; +} + +.mui-btn--fab svg { + cursor: pointer !important; + min-width: 24px; + min-height: 24px; +} + +#cbtn { + min-width: 212px; + width: calc(100% - 32px); + max-width: 345px; + height: 48px; +} + +#connect { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: inline-flex; + justify-content: center; + align-items: center; + background-color: transparent; + color: currentColor; +} +#next { + width: 112px; + height: 42px; } \ No newline at end of file diff --git a/assets/font/poppins.ttf b/assets/font/poppins.ttf new file mode 100644 index 0000000..d8a201f Binary files /dev/null and b/assets/font/poppins.ttf differ diff --git a/assets/js/mui.min.js b/assets/js/mui.min.js new file mode 100644 index 0000000..330c5f8 --- /dev/null +++ b/assets/js/mui.min.js @@ -0,0 +1 @@ +!function r(s,a,l){function u(e,t){if(!a[e]){if(!s[e]){var i="function"==typeof require&&require;if(!t&&i)return i(e,!0);if(c)return c(e,!0);var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}var o=a[e]={exports:{}};s[e][0].call(o.exports,function(t){return u(s[e][1][t]||t)},o,o.exports,r,s,a,l)}return a[e].exports}for(var c="function"==typeof require&&require,t=0;t input","mui-textfield-inserted"],[".mui-textfield > textarea","mui-textfield-inserted"],[".mui-select > select","mui-select-inserted"],[".mui-select > select ~ .mui-event-trigger","mui-node-inserted"],[".mui-select > select:disabled ~ .mui-event-trigger","mui-node-disabled"]],i="",n=0,o=e.length;nr.clientHeight&&(i=parseInt(m.css(s,"padding-right"))+a,t.push("padding-right:"+i+"px")),r.scrollWidth>r.clientWidth&&(i=parseInt(m.css(s,"padding-bottom"))+a,t.push("padding-bottom:"+i+"px"))),e="."+p+"{",e+=t.join(" !important;")+" !important;}",u=h(e),m.on(o,"scroll",c,!0),l={left:m.scrollLeft(o),top:m.scrollTop(o)},m.addClass(s,p)}},log:function(){var e=window;if(o.debug&&void 0!==e.console)try{e.console.log.apply(e.console,arguments)}catch(t){var i=Array.prototype.slice.call(arguments);e.console.log(i.join("\n"))}},loadStyle:h,raiseError:function(t,e){if(!e)throw new Error("MUI: "+t);"undefined"!=typeof console&&console.warn("MUI Warning: "+t)},requestAnimationFrame:function(t){var e=window.requestAnimationFrame;e?e(t):setTimeout(t,0)},supportsPointerEvents:function(){if(void 0!==n)return n;var t=document.createElement("x");return t.style.cssText="pointer-events:auto",n="auto"===t.style.pointerEvents}}},{"../config":2,"./jqLite":6}],8:[function(t,e,i){"use strict";var s,a=t("./lib/util"),l=t("./lib/jqLite"),u="mui-overlay",c=/(iPad|iPhone|iPod)/g;function d(){var t,e=document.getElementById(u);if(e){for(;e.firstChild;)e.removeChild(e.firstChild);e.parentNode.removeChild(e),t=e.muiOptions.onclose,p(e)}return a.disableScrollLock(),m(),s&&s.focus(),t&&t(),e}function m(){l.off(document,"keyup",f)}function f(t){27===t.keyCode&&d()}function p(t){l.off(t,"click",h)}function h(t){t.target.id===u&&d()}e.exports=function(t){var e;if("on"===t){for(var i,n,o,r=arguments.length-1;0',e.appendChild(n),i=e._rippleEl=n.children[0],l.on(e,c,d)}var o,r,s=l.offset(e),a="touchstart"===t.type?t.touches[0]:t;r=2*(o=Math.sqrt(s.height*s.height+s.width*s.width))+"px",l.css(i,{width:r,height:r,top:Math.round(a.pageY-s.top-o)+"px",left:Math.round(a.pageX-s.left-o)+"px"}),l.removeClass(i,"mui--is-animating"),l.addClass(i,"mui--is-visible"),u.requestAnimationFrame(function(){l.addClass(i,"mui--is-animating")})}}}function d(t){var e=this._rippleEl;u.requestAnimationFrame(function(){l.removeClass(e,"mui--is-visible")})}e.exports={initListeners:function(){for(var t=document.getElementsByClassName("mui-btn"),e=t.length;e--;)s(t[e]);n.onAnimationStart("mui-btn-inserted",function(t){s(t.target)})}}},{"./lib/animationHelpers":4,"./lib/jqLite":6,"./lib/util":7}],10:[function(t,e,i){"use strict";var y=t("./lib/jqLite"),l=t("./lib/util"),n=t("./lib/animationHelpers"),u=t("./lib/forms"),C="mui--is-selected",E=document,c=window;function o(t){if(!0!==t._muiSelect&&(t._muiSelect=!0,!("ontouchstart"in E.documentElement))){var e=t.parentNode;if(!y.hasClass(e,"mui-select--use-default")){e._selectEl=t,e._menu=null,e._q="",e._qTimeout=null,t.disabled||(e.tabIndex=0),t.tabIndex=-1,y.on(t,"mousedown",r),y.on(e,"click",m),y.on(e,"blur focus",s),y.on(e,"keydown",a),y.on(e,"keypress",d);var i=document.createElement("div");i.className="mui-event-trigger",e.appendChild(i),y.on(i,n.animationEvents,function(t){var e=t.target.parentNode;t.stopPropagation(),"mui-node-disabled"===t.animationName?e.removeAttribute("tabIndex"):e.tabIndex=0})}}}function r(t){0===t.button&&t.preventDefault()}function s(t){l.dispatchEvent(this._selectEl,t.type,!1,!1)}function a(t){if(!t.defaultPrevented){var e=t.keyCode,i=this._menu;if(i){if(9===e)return i.destroy();27!==e&&40!==e&&38!==e&&13!==e||t.preventDefault(),27===e?i.destroy():40===e?i.increment():38===e?i.decrement():13===e&&(i.selectCurrent(),i.destroy())}else 32!==e&&38!==e&&40!==e||(t.preventDefault(),f(this))}}function d(t){var e=this._menu;if(!t.defaultPrevented&&e){var i=this;clearTimeout(this._qTimeout),this._q+=t.key,this._qTimeout=setTimeout(function(){i._q=""},300);var n,o=new RegExp("^"+this._q,"i"),r=e.itemArray;for(n in r)if(o.test(r[n].innerText)){e.selectPos(n);break}}}function m(t){0!==t.button||this._selectEl.disabled||(this.focus(),f(this))}function f(t){t._menu||(t._menu=new p(t,t._selectEl,function(){t._menu=null,t.focus()}))}function p(t,e,i){l.enableScrollLock(),this.itemArray=[],this.origPos=null,this.currentPos=null,this.selectEl=e,this.wrapperEl=t;var n=this._createMenuEl(t,e),o=this.menuEl=n[0],r=l.callback;this.onClickCB=r(this,"onClick"),this.destroyCB=r(this,"destroy"),this.wrapperCallbackFn=i,t.appendChild(this.menuEl);var s=u.getMenuPositionalCSS(t,o,n[1]);y.css(o,s),y.scrollTop(o,s.scrollTop);var a=this.destroyCB;y.on(o,"click",this.onClickCB),y.on(c,"resize",a),setTimeout(function(){y.on(E,"click",a)},0)}p.prototype._createMenuEl=function(t,e){var i,n,o,r,s,a,l,u,c=E.createElement("div"),d=e.children,m=this.itemArray,f=0,p=-1,h=0,v=0,g=0,b=document.createDocumentFragment();for(c.className="mui-select__menu",s=0,a=d.length;swindow.innerHeight&&(i.scrollTop=i.scrollTop+(n.top+n.height-window.innerHeight)+5)},p.prototype.destroy=function(){l.disableScrollLock(!0),y.off(this.menuEl,"click",this.clickCallbackFn),y.off(E,"click",this.destroyCB),y.off(c,"resize",this.destroyCB);var t=this.menuEl.parentNode;t&&(t.removeChild(this.menuEl),this.wrapperCallbackFn())},e.exports={initListeners:function(){for(var t=E.querySelectorAll(".mui-select > select"),e=t.length;e--;)o(t[e]);n.onAnimationStart("mui-select-inserted",function(t){o(t.target)})}}},{"./lib/animationHelpers":4,"./lib/forms":5,"./lib/jqLite":6,"./lib/util":7}],11:[function(t,e,i){"use strict";var f=t("./lib/jqLite"),p=t("./lib/util"),n=t("./lib/animationHelpers"),h="data-mui-controls",v="mui--is-active",g="mui.tabs.showstart",b="mui.tabs.showend",y="mui.tabs.hidestart",C="mui.tabs.hideend";function o(t){!0!==t._muiTabs&&(t._muiTabs=!0,f.on(t,"click",r))}function r(t){if(0===t.button){null===this.getAttribute("disabled")&&s(this)}}function s(t){var e,i,n,o,r,s,a,l,u,c=t.parentNode,d=t.getAttribute(h),m=document.getElementById(d);f.hasClass(c,v)||(m||p.raiseError('Tab pane "'+d+'" not found'),(i=function(t){var e,i=t.parentNode.children,n=i.length,o=null;for(;n--&&!o;)(e=i[n])!==t&&f.hasClass(e,v)&&(o=e);return o}(m))&&(n=i.id,u="["+h+'="'+n+'"]',o=document.querySelectorAll(u)[0],e=o.parentNode),r={paneId:d,relatedPaneId:n},s={paneId:n,relatedPaneId:d},a=p.dispatchEvent(o,y,!0,!0,s),l=p.dispatchEvent(t,g,!0,!0,r),setTimeout(function(){a.defaultPrevented||l.defaultPrevented||(e&&f.removeClass(e,v),i&&f.removeClass(i,v),f.addClass(c,v),f.addClass(m,v),p.dispatchEvent(o,C,!0,!1,s),p.dispatchEvent(t,b,!0,!1,r))},0))}e.exports={initListeners:function(){for(var t=document.querySelectorAll('[data-mui-toggle="tab"]'),e=t.length;e--;)o(t[e]);n.onAnimationStart("mui-tab-inserted",function(t){o(t.target)})},api:{activate:function(t){var e="["+h+"="+t+"]",i=document.querySelectorAll(e);i.length||p.raiseError('Tab control for pane "'+t+'" not found'),s(i[0])}}}},{"./lib/animationHelpers":4,"./lib/jqLite":6,"./lib/util":7}],12:[function(t,e,i){"use strict";var n=t("./lib/jqLite"),o=t("./lib/util"),r=t("./lib/animationHelpers"),s="mui--is-untouched",a="mui--is-pristine",l="mui--is-empty",u="mui--is-not-empty";function c(e){!0!==e._muiTextfield&&(e._muiTextfield=!0,e.value.length?n.addClass(e,u):n.addClass(e,l),n.addClass(e,s+" "+a),n.on(e,"blur",function t(){document.activeElement!==e&&(n.removeClass(e,s),n.addClass(e,"mui--is-touched"),n.off(e,"blur",t))}),n.one(e,"input change",function(){n.removeClass(e,a),n.addClass(e,"mui--is-dirty")}),n.on(e,"input change",d))}function d(){var t=this;t.value.length?(n.removeClass(t,l),n.addClass(t,u)):(n.removeClass(t,u),n.addClass(t,l))}e.exports={initialize:c,initListeners:function(){for(var t=document,e=t.querySelectorAll(".mui-textfield > input, .mui-textfield > textarea"),i=e.length;i--;)c(e[i]);r.onAnimationStart("mui-textfield-inserted",function(t){c(t.target)}),setTimeout(function(){var t=".mui-textfield.mui-textfield--float-label > label {"+["-webkit-transition","-moz-transition","-o-transition","transition",""].join(":all .15s ease-out;")+"}";o.loadStyle(t)},150),!1===o.supportsPointerEvents()&&n.on(t,"click",function(t){var e=t.target;if("LABEL"===e.tagName&&n.hasClass(e.parentNode,"mui-textfield--float-label")){var i=e.previousElementSibling;i&&i.focus()}})}}},{"./lib/animationHelpers":4,"./lib/jqLite":6,"./lib/util":7}]},{},[1]); \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index c809519..543e06c 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,4 +1,17 @@ -const card = document.getElementById("card"); +// taking care of forEach object problem in FireFox, Internet Explorer, WaterFox +if (typeof NodeList.prototype.forEach !== 'function') NodeList.prototype.forEach = Array.prototype.forEach; + +const theme = (window.localStorage.getItem('theme') ?? 'light') == 'light' ? 'light' : 'dark'; +const toggle_theme = document.querySelector('#toggle-theme'); +document.querySelector('html').setAttribute('theme', theme); +toggle_theme.onclick = ev => { + const theme = (window.localStorage.getItem('theme') ?? 'light') == 'dark' ? 'light' : 'dark'; + document.querySelector('html').setAttribute('theme', theme); + window.localStorage.setItem('theme', theme); +}; + +const container = document.getElementById("container"); +const header = document.getElementById("header"); const types = document.getElementById("types"); const providerName = document.getElementById("provider-name"); const providerNameSub = document.getElementById("provider-name-sub"); @@ -17,232 +30,183 @@ let ss_data = []; let vmess_data = []; let vless_data = []; +const styleGur = color => header.style.setProperty('--background-gur', color); - - - - -let styleCard = (color) => { - card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, white 36%)`; - card.querySelectorAll(".types span").forEach((item) => { - item.style.backgroundColor = color; - }); -}; - - - -function mtproto(){ - providerName.innerHTML = "Connecting ..."; - image.src = "assets/img/mtproto.png"; - if(mtproto_data.length === 0) { - fetch('feed.php?type=mtproto') - .then(response => response.json()) - .then(data => { - mtproto_data = data - mtproto_flush(mtproto_data.result[mtproto_pointer]); - - next.addEventListener("click", () => { - if (types.value === "mtproto") { - mtproto_pointer++; - if (mtproto_pointer === mtproto_data.result.length) - mtproto_pointer = 0; - mtproto_flush(mtproto_data.result[mtproto_pointer]); - } else if (types.value === "ss") { - ss_pointer++; - if (ss_pointer === ss_data.result.length) - ss_pointer = 0; - ss_flush(ss_data.result[ss_pointer]); - }else if (types.value === "vmess") { - vmess_pointer++; - if (vmess_pointer === vmess_data.result.length) - vmess_pointer = 0; - vmess_flush(vmess_data.result[vmess_pointer]); - }else if (types.value === "vless") { - vless_pointer++; - if (vless_pointer === vless_data.result.length) - vless_pointer = 0; - vless_flush(vless_data.result[vless_pointer]); - } - }); - - - }); - }else{ +function mtproto() { + providerName.innerHTML = "Connecting ..."; + image.src = "assets/img/mtproto.png"; + if(mtproto_data.length === 0) { + fetch('feed.php?type=mtproto') + .then(response => response.json()) + .then(data => { + mtproto_data = data mtproto_flush(mtproto_data.result[mtproto_pointer]); - } - - - - - - styleCard("#adcbe0"); + next.addEventListener("click", () => { + if (types.value === "mtproto") { + mtproto_pointer++; + if (mtproto_pointer === mtproto_data.result.length) mtproto_pointer = 0; + mtproto_flush(mtproto_data.result[mtproto_pointer]); + } else if (types.value === "ss") { + ss_pointer++; + if (ss_pointer === ss_data.result.length) ss_pointer = 0; + ss_flush(ss_data.result[ss_pointer]); + } else if (types.value === "vmess") { + vmess_pointer++; + if (vmess_pointer === vmess_data.result.length) vmess_pointer = 0; + vmess_flush(vmess_data.result[vmess_pointer]); + } else if (types.value === "vless") { + vless_pointer++; + if (vless_pointer === vless_data.result.length) vless_pointer = 0; + vless_flush(vless_data.result[vless_pointer]); + } + }); + }); + } else mtproto_flush(mtproto_data.result[mtproto_pointer]); + styleGur("rgb(173, 203, 224)"); } -function mtproto_flush(item){ - providerName.innerHTML = item.provider + " #"+item.priority; - providerNameSub.innerHTML = ''; - update.innerHTML = Math.ceil((mtproto_data.response_time - item.time)/60) + " minutes ago"; +function mtproto_flush(item) { + providerName.innerHTML = item.provider + " #"+item.priority; + providerNameSub.innerHTML = ''; + update.innerHTML = Math.ceil((mtproto_data.response_time - item.time)/60) + " minutes ago"; - // remove all connect event listener - const new_connect = connect.cloneNode(true); - connect.parentNode.replaceChild(new_connect, connect); - connect = new_connect; + // remove all connect event listener + const new_connect = connect.cloneNode(true); + connect.parentNode.replaceChild(new_connect, connect); + connect = new_connect; - connect.innerHTML = "Connect"; - connect.addEventListener("click",()=>{ - window.open(item.data); - }); + connect.innerHTML = "Connect"; + connect.onclick = ev => window.open(item.data); } +function ss() { + providerName.innerHTML = "Connecting ..."; + image.src = "assets/img/ss.png"; + styleGur("rgba(103,177,104,0.37)"); -function ss(){ - providerName.innerHTML = "Connecting ..."; - image.src = "assets/img/ss.png"; - styleCard("rgba(103,177,104,0.37)"); - - if(ss_data.length === 0) { - fetch('feed.php?type=ss') - .then(response => response.json()) - .then(data => { - ss_data = data - ss_flush(ss_data.result[ss_pointer]); - }); - }else{ + if (ss_data.length === 0) { + fetch('feed.php?type=ss') + .then(response => response.json()) + .then(data => { + ss_data = data ss_flush(ss_data.result[ss_pointer]); - } - + }); + } else ss_flush(ss_data.result[ss_pointer]); } -function ss_flush(item){ - providerName.innerHTML = item.provider + " #"+item.priority; - providerNameSub.innerHTML = item.tag; - update.innerHTML = Math.ceil((ss_data.response_time - item.time)/60) + " minutes ago"; - - // remove all connect event listener - const new_connect = connect.cloneNode(true); - connect.parentNode.replaceChild(new_connect, connect); - connect = new_connect; - - connect.innerHTML = "Copy"; - connect.addEventListener("click",()=>{ - navigator.clipboard.writeText(item.data); - connect.innerHTML = "Copied"; - setTimeout(()=>{ - connect.innerHTML = "Copy"; - },2000); - - }); +function ss_flush(item) { + providerName.innerHTML = item.provider + " #"+item.priority; + providerNameSub.innerHTML = item.tag; + update.innerHTML = Math.ceil((ss_data.response_time - item.time)/60) + " minutes ago"; + + // remove all connect event listener + const new_connect = connect.cloneNode(true); + connect.parentNode.replaceChild(new_connect, connect); + connect = new_connect; + + connect.innerHTML = "Copy"; + connect.onclick = ev => { + navigator.clipboard.writeText(item.data); + connect.innerHTML = "Copied"; + setTimeout(() => { + connect.innerHTML = "Copy"; + }, 2000); + }; } -function vmess(){ - providerName.innerHTML = "Connecting ..."; - image.src = "assets/img/vmess.png"; - styleCard("rgba(84,100,136,0.37)"); - - if(vmess_data.length === 0) { - fetch('feed.php?type=vmess') - .then(response => response.json()) - .then(data => { - vmess_data = data - vmess_flush(vmess_data.result[vmess_pointer]); - }); - }else{ - vmess_flush(vmess_data.result[vmess_pointer]); - } +function vmess() { + providerName.innerHTML = "Connecting ..."; + image.src = "assets/img/vmess.png"; + styleGur("rgba(84,100,136,0.37)"); + if (vmess_data.length === 0) { + fetch('feed.php?type=vmess') + .then(response => response.json()) + .then(data => { + vmess_data = data + vmess_flush(vmess_data.result[vmess_pointer]); + }); + } else vmess_flush(vmess_data.result[vmess_pointer]); } -function vmess_flush(item){ - providerName.innerHTML = item.provider + " #"+item.priority; - providerNameSub.innerHTML = item.tag; - update.innerHTML = Math.ceil((vmess_data.response_time - item.time)/60) + " minutes ago"; - - // remove all connect event listener - const new_connect = connect.cloneNode(true); - connect.parentNode.replaceChild(new_connect, connect); - connect = new_connect; - - connect.innerHTML = "Copy"; - connect.addEventListener("click",()=>{ - navigator.clipboard.writeText(item.data); - connect.innerHTML = "Copied"; - setTimeout(()=>{ - connect.innerHTML = "Copy"; - },2000); - }); +function vmess_flush(item) { + providerName.innerHTML = item.provider + " #"+item.priority; + providerNameSub.innerHTML = item.tag; + update.innerHTML = Math.ceil((vmess_data.response_time - item.time)/60) + " minutes ago"; + + // remove all connect event listener + const new_connect = connect.cloneNode(true); + connect.parentNode.replaceChild(new_connect, connect); + connect = new_connect; + + connect.innerHTML = "Copy"; + connect.onclick = ev => { + navigator.clipboard.writeText(item.data); + connect.innerHTML = "Copied"; + setTimeout(() => { + connect.innerHTML = "Copy"; + }, 2000); + }; } -function vless(){ - providerName.innerHTML = "Connecting ..."; - image.src = "assets/img/vless.png"; - styleCard("rgba(136,84,121,0.37)"); - - if(vless_data.length === 0) { - fetch('feed.php?type=vless') - .then(response => response.json()) - .then(data => { - vless_data = data - vless_flush(vless_data.result[vless_pointer]); - }); - }else{ - vless_flush(vless_data.result[vless_pointer]); - } +function vless() { + providerName.innerHTML = "Connecting ..."; + image.src = "assets/img/vless.png"; + styleGur("rgba(136,84,121,0.37)"); + if (vless_data.length === 0) { + fetch('feed.php?type=vless') + .then(response => response.json()) + .then(data => { + vless_data = data + vless_flush(vless_data.result[vless_pointer]); + }); + } else vless_flush(vless_data.result[vless_pointer]); } -function vless_flush(item){ - providerName.innerHTML = item.provider + " #"+item.priority; - providerNameSub.innerHTML = item.tag; - update.innerHTML = Math.ceil((vless_data.response_time - item.time)/60) + " minutes ago"; - - // remove all connect event listener - const new_connect = connect.cloneNode(true); - connect.parentNode.replaceChild(new_connect, connect); - connect = new_connect; - - connect.innerHTML = "Copy"; - connect.addEventListener("click",()=>{ - navigator.clipboard.writeText(item.data); - connect.innerHTML = "Copied"; - setTimeout(()=>{ - connect.innerHTML = "Copy"; - },2000); - - }); +function vless_flush(item) { + providerName.innerHTML = item.provider + " #"+item.priority; + providerNameSub.innerHTML = item.tag; + update.innerHTML = Math.ceil((vless_data.response_time - item.time)/60) + " minutes ago"; + + // remove all connect event listener + const new_connect = connect.cloneNode(true); + connect.parentNode.replaceChild(new_connect, connect); + connect = new_connect; + + connect.innerHTML = "Copy"; + connect.onclick = ev => { + navigator.clipboard.writeText(item.data); + connect.innerHTML = "Copied"; + setTimeout(() => { + connect.innerHTML = "Copy"; + }, 2000); + }; } - fetch('feed.php?list') - .then(response => response.json()) - .then(data => { - const typeList = { - "mtproto": "MTProto", - "ss": "Shadowsocks", - "vmess" : "Vmess", - "vless" : "Vless" - } - data.result.forEach(type => { - const opt = document.createElement('option'); - opt.value = type; - opt.text = typeList[type]; - types.add(opt); - }); - //first call - mtproto(); - - types.addEventListener("change", () => { - if(types.value === "mtproto") - mtproto(); - else if(types.value === "ss") - ss(); - else if (types.value === "vmess") - vmess(); - else if (types.value === "vless") - vless(); - - - }); + .then(response => response.json()) + .then(data => { + const type_list = { + "mtproto": "MTProto", + "ss" : "Shadowsocks", + "vmess" : "Vmess", + "vless" : "Vless" + }; + + data.result.forEach(type => { + const opt = document.createElement('option'); + opt.value = type; + opt.text = type_list[type]; + types.add(opt); }); + // first call + mtproto(); - - + types.addEventListener("change", () => { + if(types.value === "mtproto") mtproto(); + else if (types.value === "vmess") vmess(); + else if (types.value === "vless") vless(); + else if(types.value === "ss") ss(); + }); + }); \ No newline at end of file diff --git a/index.html b/index.html index 4e6dac8..6d17aca 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,40 @@ - + Crawat - - -
-
-
-

- Crawat v2.0 -

- none -

- Connecting ... -

-

-

-
-
-
-

Update

-

...

-
-
-

Type

- -
-
- -
-
-
- ... -
- + +
+ + None +

Connecting ...

+

+
+
+
+

Update

+

. . .

+
+

Type

+
+
+
+ + + +