diff --git a/resource/static/theme-daynight/main.css b/resource/static/theme-daynight/css/main.css
similarity index 56%
rename from resource/static/theme-daynight/main.css
rename to resource/static/theme-daynight/css/main.css
index b86fbb1..3abda7f 100644
--- a/resource/static/theme-daynight/main.css
+++ b/resource/static/theme-daynight/css/main.css
@@ -1,6 +1,6 @@
-body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .switcher{background-color:#124b8c}body[data-theme="dark"] .grid-mode-toggle .switcher{background-color:#2f2f2f}body[data-theme="dark"] .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#121212}body[data-theme="dark"] #app{background-color:#121212}body[data-theme="dark"] .toggle-container{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-th.fa-lg{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-list-ul.fa-lg{color:#c8c8c8}body[data-theme="dark"] .state-online{background-color:#4ba242}body[data-theme="dark"] .server-info-container{background-color:#1e1e1e;color:#e1e1e1;border:1px solid rgba(255,255,255,0.1);-webkit-box-shadow:0 2px 10px rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(255,255,255,0.1)}body[data-theme="dark"] .info-body ul li{border-bottom:1px solid rgba(255,255,255,0.2)}body[data-theme="dark"] .info-body ul li p{color:#fff}body[data-theme="dark"] .info-body ul li img{border:1px solid rgba(255,255,255,0.3)}body[data-theme="dark"] .info-body ul li:nth-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-last-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-child(n+4)::before{color:#959595}body[data-theme="dark"] .info-body ul li h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar h4,body[data-theme="dark"] .info-body .ram-bar h4,body[data-theme="dark"] .info-body .disk-bar h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar p,body[data-theme="dark"] .info-body .ram-bar p,body[data-theme="dark"] .info-body .disk-bar p{color:#fff !important}body[data-theme="dark"] .info-body .ui.progress{background-color:#111;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .info-body .ui.progress.fine>.bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.bar{background-color:#975fe4 !important}.dark-mode-toggle,.grid-mode-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dark-mode-toggle .switcher,.grid-mode-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.8em 1.2em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142;-webkit-transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),-webkit-box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),-webkit-box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),box-shadow 100ms linear,-webkit-box-shadow 100ms linear}.dark-mode-toggle .switcher div i+i,.grid-mode-toggle .switcher div i+i{margin-left:1em}.dark-mode-toggle .switcher div .fas.fa-sun,.grid-mode-toggle .switcher div .fas.fa-sun,.dark-mode-toggle .switcher div .fas.fa-moon,.grid-mode-toggle .switcher div .fas.fa-moon,.dark-mode-toggle .switcher div .fas.fa-th,.grid-mode-toggle .switcher div .fas.fa-th,.dark-mode-toggle .switcher div .fas.fas.fa-list-ul,.grid-mode-toggle .switcher div .fas.fas.fa-list-ul{font-size:1.4em}.dark-mode-toggle .switcher input[type="checkbox"],.grid-mode-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.dark-mode-toggle .switcher input[type="checkbox"]+div>i,.grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505);transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505)}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:grey}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:grey}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#f2f2f2;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}footer{background-color:#2f2f2f;color:#f2f2f2;font-size:14px}footer .footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;padding:1rem}footer .footer-container p{width:100%;margin-top:1rem}footer .footer-container a{color:#f2f2f2}footer .footer-container div{width:100%}#back-to-top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#FF9800;width:45px;height:45px;border-radius:50%;position:fixed;bottom:30px;right:30px;-webkit-transition:background-color .3s, 
+body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .switcher{background-color:#124b8c}body[data-theme="dark"] .grid-mode-toggle .switcher{background-color:#2f2f2f}body[data-theme="dark"] .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#121212}body[data-theme="dark"] #app{background-color:#121212}body[data-theme="dark"] .toggle-container{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-th.fa-lg{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-list-ul.fa-lg{color:#c8c8c8}body[data-theme="dark"] .state-online{background-color:#4ba242}body[data-theme="dark"] .server-info-container{background-color:#1e1e1e;color:#e1e1e1;border:1px solid rgba(255,255,255,0.1);-webkit-box-shadow:0 2px 10px rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(255,255,255,0.1)}body[data-theme="dark"] .info-body ul li{border-bottom:1px solid rgba(255,255,255,0.2)}body[data-theme="dark"] .info-body ul li p{color:#fff}body[data-theme="dark"] .info-body ul li img{border:1px solid rgba(255,255,255,0.3)}body[data-theme="dark"] .info-body ul li:nth-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-last-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-child(n+4)::before{color:#959595}body[data-theme="dark"] .info-body ul li h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar h4,body[data-theme="dark"] .info-body .ram-bar h4,body[data-theme="dark"] .info-body .disk-bar h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar p,body[data-theme="dark"] .info-body .ram-bar p,body[data-theme="dark"] .info-body .disk-bar p{color:#fff !important}body[data-theme="dark"] .info-body .ui.progress{background-color:#111;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .info-body .ui.progress.fine>.bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.bar{background-color:#975fe4 !important}footer{background-color:#2f2f2f;color:#f2f2f2;font-size:14px}footer .footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;padding:1rem}footer .footer-container p{width:100%;margin-top:1rem}footer .footer-container a{color:#f2f2f2}footer .footer-container div{width:100%}#back-to-top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#FF9800;width:45px;height:45px;border-radius:50%;position:fixed;bottom:30px;right:30px;-webkit-transition:background-color .3s, 
  opacity .5s, visibility .5s;transition:background-color .3s, 
- opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f106";font-size:2.2em;color:#fff}#back-to-top:hover{cursor:pointer;background-color:#cc7a00}#back-to-top:active{background-color:#cc7a00}#back-to-top.show{opacity:1;visibility:visible}.nav-bar{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;background-color:#2a3950;padding:.8em 8em}@media (max-width: 1250px){.nav-bar{padding:.8em 3em}}@media (max-width: 900px){.nav-bar{padding:.8em 1em}}@media (max-width: 500px){.nav-bar{-ms-grid-columns:auto 3fr;grid-template-columns:auto 3fr}}.nav-bar .logo{color:#f2f2f2;-ms-grid-column-align:start;justify-self:start;font-size:1.2em}.nav-bar a{color:#f2f2f2}.nav-bar li:last-child{background-color:#07090d}.icon-container{-ms-grid-column-align:end;justify-self:end;display:none}.icon-container .col{display:block;float:left;margin:1% 0 1% 1.6%}.icon-container .col:first-of-type{margin-left:0}.icon-container .cf:before,.icon-container .cf:after{content:" ";display:table}.icon-container .cf:after{clear:both}.icon-container .cf{*zoom:1}.icon-container .three{color:#ecf0f1;text-align:center}.icon-container .hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.icon-container .hamburger:hover{cursor:pointer}.icon-container #hamburger-icon.is-active{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-container #hamburger-icon.is-active .line:nth-child(2){width:0px}.icon-container #hamburger-icon.is-active .line:nth-child(1),.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}.icon-container #hamburger-icon.is-active .line:nth-child(1){-webkit-transform:translateY(13px);transform:translateY(13px)}.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg)}.nav-menu{-ms-grid-column-align:end;justify-self:end}.nav-menu li{display:inline-block}.nav-menu li a{display:block;padding:.8em 1.6em}@media screen and (max-width: 900px){.icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8);transform:scale(0.8)}.nav-menu{display:none;width:100%}.nav-menu.active{display:block;grid-column:1 / -1}.nav-menu li{display:block;border-bottom:1px solid rgba(255,255,255,0.3)}.nav-menu li:last-child{border:none}.nav-menu li a{padding:1em;font-weight:bold}}.toggle-grid-mode input[type="checkbox"]{height:0;width:0;visibility:hidden}.toggle-grid-mode label{cursor:pointer;text-indent:-9999px;width:52px;height:27px;background:grey !important;display:block;border-radius:100px;position:relative}.toggle-grid-mode label:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:90px;-webkit-transition:0.3s;transition:0.3s}.toggle-grid-mode input:checked+label{background:#444;border:1px solid rgba(255,255,255,0.1)}.toggle-grid-mode input:checked+label:after{left:calc(100% - 5px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.toggle-grid-mode label:active:after{width:45px}body[data-gridlist="list"] #app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:2em}@media (max-width: 1250px){body[data-gridlist="list"] #app{grid-row-gap:3em}}body[data-gridlist="list"] .server-info-container{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto}body[data-gridlist="list"] .info-body ul{grid-template-areas:"state flag . system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"
+ opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f106";font-size:2.2em;color:#fff}#back-to-top:hover{cursor:pointer;background-color:#cc7a00}#back-to-top:active{background-color:#cc7a00}#back-to-top.show{opacity:1;visibility:visible}.nav-bar{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;background-color:#2a3950;padding:.8em 8em}@media (max-width: 1250px){.nav-bar{padding:.8em 3em}}@media (max-width: 900px){.nav-bar{padding:.8em 1em}}@media (max-width: 500px){.nav-bar{-ms-grid-columns:auto 3fr;grid-template-columns:auto 3fr}}.nav-bar .logo{color:#f2f2f2;-ms-grid-column-align:start;justify-self:start;font-size:1.2em}.nav-bar a{color:#f2f2f2}.nav-bar li:last-child{background-color:#07090d}.icon-container{-ms-grid-column-align:end;justify-self:end;display:none}.icon-container .col{display:block;float:left;margin:1% 0 1% 1.6%}.icon-container .col:first-of-type{margin-left:0}.icon-container .cf:before,.icon-container .cf:after{content:" ";display:table}.icon-container .cf:after{clear:both}.icon-container .cf{*zoom:1}.icon-container .three{color:#ecf0f1;text-align:center}.icon-container .hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.icon-container .hamburger:hover{cursor:pointer}.icon-container #hamburger-icon.is-active{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-container #hamburger-icon.is-active .line:nth-child(2){width:0px}.icon-container #hamburger-icon.is-active .line:nth-child(1),.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}.icon-container #hamburger-icon.is-active .line:nth-child(1){-webkit-transform:translateY(13px);transform:translateY(13px)}.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg)}.nav-menu{-ms-grid-column-align:end;justify-self:end}.nav-menu li{display:inline-block}.nav-menu li a{display:block;padding:.8em 1.6em}@media screen and (max-width: 900px){.icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8);transform:scale(0.8)}.nav-menu{display:none;width:100%}.nav-menu.active{display:block;grid-column:1 / -1}.nav-menu li{display:block;border-bottom:1px solid rgba(255,255,255,0.3)}.nav-menu li:last-child{border:none}.nav-menu li a{padding:1em;font-weight:bold}}body[data-gridlist="list"] #app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:2em}@media (max-width: 1250px){body[data-gridlist="list"] #app{grid-row-gap:3em}}body[data-gridlist="list"] .server-info-container{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto}body[data-gridlist="list"] .info-body ul{grid-template-areas:"state flag . system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"
  "name name name system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul{grid-template-areas:"state state state name name name name name flag flag flag flag flag flag"
  "system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}}@media (max-width: 900px){body[data-gridlist="list"] .info-body ul{grid-template-areas:"state state state state name name name name name name name flag flag flag"
  "system system system system system system system location location location location location location location"
@@ -9,11 +9,11 @@ body.transition-theme,body.transition-theme *,body.transition-theme *:before,bod
  "down down down down down down down up up up up up up up"
  "cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
  "ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
- "disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:horizontal !important;-webkit-box-direction:normal !important;-ms-flex-direction:row !important;flex-direction:row !important}body[data-gridlist="list"] .info-body ul li:nth-child(n+4)::before{padding-bottom:0 !important}body[data-gridlist="list"] .info-body ul li:nth-last-child(-n+3):before{content:"" !important}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:15% auto !important;grid-template-columns:15% auto !important;width:100%}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:block !important}}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):before{padding-bottom:0.5em}body[data-gridlist="list"] .info-body ul li:nth-child(1){-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;-ms-grid-column-align:start;justify-self:start}body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;-ms-grid-column-align:start;justify-self:start}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:2;-ms-grid-column-span:10;grid-column:2 / 12;-ms-grid-column-align:center;justify-self:center}}body[data-gridlist="list"] .info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end;-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(3){grid-column:1 / -1}}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):nth-child(-n+11){border:none}body[data-gridlist="list"] .info-body ul li:nth-child(12){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(12):before{content:"CPU"}body[data-gridlist="list"] .info-body ul li:nth-child(13){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(13):before{content:"RAM"}body[data-gridlist="list"] .info-body ul li:nth-child(14){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(14):before{content:"硬盘"}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:1fr;grid-template-columns:1fr}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:none}.grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#2a3950}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#121212}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#fff;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.toggle-container{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;padding-top:2em}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;text-decoration:none}body{font-family:Microsoft Yahei, Avenir, Segoe UI, Hiragino Sans GB, STHeiti, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;overflow-x:hidden;background-color:#e5e5e5}#app{background-color:#e5e5e5;min-height:100vh;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:3em;width:100%;width:calc(100vw - 6em);max-width:1400px;margin:2em auto 4em;-ms-flex-line-pack:start;align-content:start}@media (max-width: 1250px){#app{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:2.5em;width:calc(100vw - 4em)}}@media (max-width: 900px){#app{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-gap:2em;grid-row-gap:3em;width:calc(100vw - 3em)}}@media (max-width: 500px){#app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:1em;grid-row-gap:3em;width:calc(100vw - 2em)}}.server-info-container{background-color:#f1f1f2;display:-ms-grid;display:grid;font-size:0.9em;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);-webkit-transition:-webkit-transform 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out;transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out}.server-info-container .info-body{display:-ms-grid;display:grid}.server-info-container:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.info-body ul{display:-ms-grid;display:grid;grid-template-areas:"state state name name flag flag"
+ "disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:horizontal !important;-webkit-box-direction:normal !important;-ms-flex-direction:row !important;flex-direction:row !important}body[data-gridlist="list"] .info-body ul li:nth-child(n+4)::before{padding-bottom:0 !important}body[data-gridlist="list"] .info-body ul li:nth-last-child(-n+3):before{content:"" !important}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:15% auto !important;grid-template-columns:15% auto !important;width:100%}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:block !important}}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):before{padding-bottom:0.5em}body[data-gridlist="list"] .info-body ul li:nth-child(1){-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;-ms-grid-column-align:start;justify-self:start}body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;-ms-grid-column-align:start;justify-self:start}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:2;-ms-grid-column-span:10;grid-column:2 / 12;-ms-grid-column-align:center;justify-self:center}}body[data-gridlist="list"] .info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end;-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(3){grid-column:1 / -1}}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):nth-child(-n+11){border:none}body[data-gridlist="list"] .info-body ul li:nth-child(12){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(12):before{content:"CPU"}body[data-gridlist="list"] .info-body ul li:nth-child(13){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(13):before{content:"RAM"}body[data-gridlist="list"] .info-body ul li:nth-child(14){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(14):before{content:"硬盘"}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:1fr;grid-template-columns:1fr}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:none}.toggle-container{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;padding-top:2em}.toggle-container .dark-mode-toggle,.toggle-container .grid-mode-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.toggle-container .dark-mode-toggle .switcher,.toggle-container .grid-mode-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.6em .88em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142}.toggle-container .dark-mode-toggle .switcher div i+i,.toggle-container .grid-mode-toggle .switcher div i+i{margin-left:1em}.toggle-container .dark-mode-toggle .switcher div .fas.fa-sun,.toggle-container .grid-mode-toggle .switcher div .fas.fa-sun,.toggle-container .dark-mode-toggle .switcher div .fas.fa-moon,.toggle-container .grid-mode-toggle .switcher div .fas.fa-moon,.toggle-container .dark-mode-toggle .switcher div .fas.fa-th,.toggle-container .grid-mode-toggle .switcher div .fas.fa-th,.toggle-container .dark-mode-toggle .switcher div .fas.fas.fa-list-ul,.toggle-container .grid-mode-toggle .switcher div .fas.fas.fa-list-ul{font-size:1.4em}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"],.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:grey}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#9e9e9e}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#f2f2f2;-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}.toggle-container .grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#2a3950}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotateY(-360deg);transform:rotateY(-360deg)}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#121212}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#fff;-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;text-decoration:none}body{font-family:Microsoft Yahei, Avenir, Segoe UI, Hiragino Sans GB, STHeiti, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;overflow-x:hidden;background-color:#e5e5e5}#app{background-color:#e5e5e5;min-height:100vh;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:3em;width:100%;width:calc(100vw - 6em);max-width:1400px;margin:2em auto 4em;-ms-flex-line-pack:start;align-content:start}@media (max-width: 1250px){#app{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:2.5em;width:calc(100vw - 4em)}}@media (max-width: 900px){#app{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-gap:2em;grid-row-gap:3em;width:calc(100vw - 3em)}}@media (max-width: 500px){#app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:1em;grid-row-gap:3em;width:calc(100vw - 2em)}}.server-info-container{background-color:#f1f1f2;display:-ms-grid;display:grid;font-size:0.9em;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);-webkit-transition:-webkit-transform 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out;transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out}.server-info-container .info-body{display:-ms-grid;display:grid}.server-info-container:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.info-body ul{display:-ms-grid;display:grid;grid-template-areas:"state state name name flag flag"
  "system system system location location location"
  "memory memory memory boot boot boot"
  "ram ram ram disk disk disk"
  "down down down up up up"
  "cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
  "ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
- "disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}.info-body ul li{list-style:none;padding:.6em;margin:0.3em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;word-break:break-all;border-bottom:1px solid #d9d9d9}.info-body ul li p{padding:0.3em 1em;font-size:0.6em}.info-body ul li h3{font-size:1.05em}.info-body ul li .state-online{background-color:#53b449;border-radius:4px}.info-body ul li .state-offline{background-color:#ef4b4c;border-radius:4px}.info-body ul li img{border:1px solid rgba(0,0,0,0.25);border-radius:6px}.info-body ul li:not(:nth-child(1))::before{font-weight:bold}.info-body ul li:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:state;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none;font-size:1.2em}@media (max-width: 500px){.info-body ul li:nth-child(1){-ms-grid-column-align:start;justify-self:start}}.info-body ul li:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:name;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}.info-body ul li:nth-child(3){-ms-grid-row:1;-ms-grid-column:5;-ms-grid-column-span:2;grid-area:flag;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}@media (max-width: 500px){.info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end}}.info-body ul li:nth-child(4){-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:system;text-transform:capitalize}.info-body ul li:nth-child(4):before{content:"系统"}.info-body ul li:nth-child(5){-ms-grid-row:2;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:location}.info-body ul li:nth-child(5):before{content:"位置"}.info-body ul li:nth-child(6){-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:memory}.info-body ul li:nth-child(6):before{content:"内存"}.info-body ul li:nth-child(7){-ms-grid-row:3;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:boot}.info-body ul li:nth-child(7):before{content:"在线"}.info-body ul li:nth-child(8){-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:ram}.info-body ul li:nth-child(8):before{content:"交换"}.info-body ul li:nth-child(9){-ms-grid-row:4;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:disk}.info-body ul li:nth-child(9):before{content:"硬盘"}.info-body ul li:nth-child(10){-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:down}.info-body ul li:nth-child(10):before{content:"下载 \f884";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(11){-ms-grid-row:5;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:up}.info-body ul li:nth-child(11):before{content:"上传 \f161";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(12){-ms-grid-row:6;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:cpu-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(13){-ms-grid-row:7;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:ram-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(14){-ms-grid-row:8;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:disk-bar;border:none;display:inline-block;padding:.3em .6em .6em}.info-body ul li .cpu-bar,.info-body ul li .ram-bar,.info-body ul li .disk-bar{display:-ms-grid;display:grid;-ms-grid-columns:15% auto;grid-template-columns:15% auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info-body ul li .cpu-bar div:first-child,.info-body ul li .ram-bar div:first-child,.info-body ul li .disk-bar div:first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{word-break:keep-all;font-size:0.8em}@media (max-width: 500px){.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{font-size:1em}}.info-body ul li .cpu-bar h4,.info-body ul li .ram-bar h4,.info-body ul li .disk-bar h4{font-weight:bold}.info-body ul li .ui.progress{margin-bottom:0 !important;background-color:lightgray;border-radius:4px;border:1px solid #bfbfbf}.info-body ul li .ui.progress .bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px}.info-body ul li .td-padding{padding-left:0.5em}
+ "disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}.info-body ul li{list-style:none;padding:.6em;margin:0.3em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;word-break:break-all;border-bottom:1px solid #d9d9d9}.info-body ul li p{padding:0.3em 1em;font-size:0.6em}.info-body ul li h3{font-size:1.05em}.info-body ul li .state-online{background-color:#53b449;border-radius:4px}.info-body ul li .state-offline{background-color:#ef4b4c;border-radius:4px}.info-body ul li img{border:1px solid rgba(0,0,0,0.25);border-radius:6px}.info-body ul li:not(:nth-child(1))::before{font-weight:bold}.info-body ul li:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:state;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none;font-size:1.2em}@media (max-width: 500px){.info-body ul li:nth-child(1){-ms-grid-column-align:start;justify-self:start}}.info-body ul li:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:name;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}.info-body ul li:nth-child(3){-ms-grid-row:1;-ms-grid-column:5;-ms-grid-column-span:2;grid-area:flag;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}@media (max-width: 500px){.info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end}}.info-body ul li:nth-child(4){-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:system;text-transform:capitalize}.info-body ul li:nth-child(4):before{content:"系统"}.info-body ul li:nth-child(5){-ms-grid-row:2;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:location}.info-body ul li:nth-child(5):before{content:"位置"}.info-body ul li:nth-child(6){-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:memory}.info-body ul li:nth-child(6):before{content:"内存"}.info-body ul li:nth-child(7){-ms-grid-row:3;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:boot}.info-body ul li:nth-child(7):before{content:"在线"}.info-body ul li:nth-child(8){-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:ram}.info-body ul li:nth-child(8):before{content:"交换"}.info-body ul li:nth-child(9){-ms-grid-row:4;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:disk}.info-body ul li:nth-child(9):before{content:"硬盘"}.info-body ul li:nth-child(10){-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:down}.info-body ul li:nth-child(10):before{content:"下载 \f884";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(11){-ms-grid-row:5;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:up}.info-body ul li:nth-child(11):before{content:"上传 \f161";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(12){-ms-grid-row:6;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:cpu-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(13){-ms-grid-row:7;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:ram-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(14){-ms-grid-row:8;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:disk-bar;border:none;display:inline-block;padding:.3em .6em .6em}.info-body ul li .cpu-bar,.info-body ul li .ram-bar,.info-body ul li .disk-bar{display:-ms-grid;display:grid;-ms-grid-columns:15% auto;grid-template-columns:15% auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info-body ul li .cpu-bar div:first-child,.info-body ul li .ram-bar div:first-child,.info-body ul li .disk-bar div:first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{word-break:keep-all;font-size:0.8em}@media (max-width: 500px){.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{font-size:1em}}.info-body ul li .cpu-bar h4,.info-body ul li .ram-bar h4,.info-body ul li .disk-bar h4{font-weight:bold}.info-body ul li .ui.progress{margin-bottom:0 !important;background-color:lightgray;border-radius:4px;border:1px solid #bfbfbf}.info-body ul li .ui.progress .bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:3px}.info-body ul li .td-padding{padding-left:0.5em}
diff --git a/resource/static/theme-daynight/css/service.css b/resource/static/theme-daynight/css/service.css
new file mode 100644
index 0000000..b1adfe2
--- /dev/null
+++ b/resource/static/theme-daynight/css/service.css
@@ -0,0 +1 @@
+body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .monitor-header h2{color:#e1e1e1}body[data-theme="dark"] .monitor-header h2 span{color:#a6a6a6}body[data-theme="dark"] .monitor-info-container{background-color:#1e1e1e;color:#e1e1e1;border:1px solid rgba(255,255,255,0.1);-webkit-box-shadow:0 2px 10px rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(255,255,255,0.1)}body[data-theme="dark"] .monitor-info-container .monitor-state-text{color:#959595}body[data-theme="dark"] .corner{background-color:#161616;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .corner.good{background-color:#46973d}body[data-theme="dark"] .corner.warning{background-color:#975fe4}body[data-theme="dark"] .corner.danger{background-color:#940d0e}body[data-theme="dark"] .corner:hover{background-color:#2b2b2b}body[data-theme="dark"] .monitor-state-dot{background:#46973d}body[data-theme="dark"] .monitor-state-dot.warning{color:#faa11a;background:#faa11a}body[data-theme="dark"] .monitor-state-dot:after{background:#46973d}body[data-theme="dark"] .sub-content{color:#f2f2f2;background-color:#092f52;border:1px solid rgba(255,255,255,0.1);position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #092f52;bottom:-.5em}@media (max-width: 900px){body[data-theme="dark"] .sub-content{position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #092f52;bottom:-.5em}}body[data-theme="dark"] .switcher{background-color:#124b8c}body[data-theme="dark"] .grid-mode-toggle .switcher{background-color:#2f2f2f}body[data-theme="dark"] .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#121212}footer{background-color:#2f2f2f;color:#f2f2f2;font-size:14px}footer .footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;padding:1rem}footer .footer-container p{width:100%;margin-top:1rem}footer .footer-container a{color:#f2f2f2}footer .footer-container div{width:100%}#back-to-top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#FF9800;width:45px;height:45px;border-radius:50%;position:fixed;bottom:30px;right:30px;-webkit-transition:background-color .3s, 
 opacity .5s, visibility .5s;transition:background-color .3s, 
 opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f106";font-size:2.2em;color:#fff}#back-to-top:hover{cursor:pointer;background-color:#cc7a00}#back-to-top:active{background-color:#cc7a00}#back-to-top.show{opacity:1;visibility:visible}.nav-bar{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;background-color:#2a3950;padding:.8em 8em}@media (max-width: 1250px){.nav-bar{padding:.8em 3em}}@media (max-width: 900px){.nav-bar{padding:.8em 1em}}@media (max-width: 500px){.nav-bar{-ms-grid-columns:auto 3fr;grid-template-columns:auto 3fr}}.nav-bar .logo{color:#f2f2f2;-ms-grid-column-align:start;justify-self:start;font-size:1.2em}.nav-bar a{color:#f2f2f2}.nav-bar li:last-child{background-color:#07090d}.icon-container{-ms-grid-column-align:end;justify-self:end;display:none}.icon-container .col{display:block;float:left;margin:1% 0 1% 1.6%}.icon-container .col:first-of-type{margin-left:0}.icon-container .cf:before,.icon-container .cf:after{content:" ";display:table}.icon-container .cf:after{clear:both}.icon-container .cf{*zoom:1}.icon-container .three{color:#ecf0f1;text-align:center}.icon-container .hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.icon-container .hamburger:hover{cursor:pointer}.icon-container #hamburger-icon.is-active{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-container #hamburger-icon.is-active .line:nth-child(2){width:0px}.icon-container #hamburger-icon.is-active .line:nth-child(1),.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}.icon-container #hamburger-icon.is-active .line:nth-child(1){-webkit-transform:translateY(13px);transform:translateY(13px)}.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg)}.nav-menu{-ms-grid-column-align:end;justify-self:end}.nav-menu li{display:inline-block}.nav-menu li a{display:block;padding:.8em 1.6em}@media screen and (max-width: 900px){.icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8);transform:scale(0.8)}.nav-menu{display:none;width:100%}.nav-menu.active{display:block;grid-column:1 / -1}.nav-menu li{display:block;border-bottom:1px solid rgba(255,255,255,0.3)}.nav-menu li:last-child{border:none}.nav-menu li a{padding:1em;font-weight:bold}}body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr}@media (max-width: 1250px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr)}}@media (max-width: 900px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-container{grid-gap:1em;grid-row-gap:3em}}body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"status name name uptime"
 "corner corner corner corner";grid-row-gap:0.8em}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"name name name name"
 "status status uptime uptime"
 "corner corner corner corner";-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-row-gap:0.3em}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container .monitor-name{padding:0}}body[data-gridlist="grid"] .corner-container{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6, 1fr);-ms-grid-rows:(1fr)[5];grid-template-rows:repeat(5, 1fr);grid-gap:1em}@media (max-width: 1250px){body[data-gridlist="grid"] .corner-container{grid-gap:0.9em}}@media (max-width: 900px){body[data-gridlist="grid"] .corner-container{grid-gap:1em}}@media (max-width: 500px){body[data-gridlist="grid"] .corner-container{grid-gap:0.6em}}.toggle-container{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;padding-top:2em}.dark-mode-toggle,.grid-mode-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dark-mode-toggle .switcher,.grid-mode-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.6em .88em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142}.dark-mode-toggle .switcher div i+i,.grid-mode-toggle .switcher div i+i{margin-left:1em}.dark-mode-toggle .switcher div .fas.fa-sun,.grid-mode-toggle .switcher div .fas.fa-sun,.dark-mode-toggle .switcher div .fas.fa-moon,.grid-mode-toggle .switcher div .fas.fa-moon,.dark-mode-toggle .switcher div .fas.fa-th,.grid-mode-toggle .switcher div .fas.fa-th,.dark-mode-toggle .switcher div .fas.fas.fa-list-ul,.grid-mode-toggle .switcher div .fas.fas.fa-list-ul{font-size:1.4em}.dark-mode-toggle .switcher input[type="checkbox"],.grid-mode-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:grey}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#9e9e9e}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#f2f2f2;-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}.grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#2a3950}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotateY(-360deg);transform:rotateY(-360deg)}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#121212}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#fff;-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;text-decoration:none}body{font-family:Microsoft Yahei, Avenir, Segoe UI, Hiragino Sans GB, STHeiti, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;overflow-x:hidden;background-color:#e5e5e5}article{display:-ms-grid;display:grid;-ms-grid-rows:auto auto 1fr auto;grid-template-rows:auto auto 1fr auto;min-height:100vh;-ms-grid-columns:100%;grid-template-columns:100%}main{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;width:100%;width:calc(100vw - 6em);max-width:1400px;margin:2em auto 4em;-ms-flex-line-pack:start;align-content:start}@media (max-width: 1250px){main{width:calc(100vw - 4em)}}@media (max-width: 900px){main{width:calc(100vw - 3em)}}@media (max-width: 500px){main{width:calc(100vw - 2em)}}.monitor-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:1.6em;color:#2f2f2f;padding-bottom:1.5em;line-height:1.5em}@media (max-width: 500px){.monitor-header{font-size:1.3em}}.monitor-header h4{font-size:1.1rem;color:#737373}.monitor-container{display:-ms-grid;display:grid;grid-gap:2.5em}@media (max-width: 500px){.monitor-container{grid-gap:3em}}.monitor-info-container{display:-ms-grid;display:grid;grid-template-areas:"status name corner uptime";-ms-grid-columns:auto 1fr 10fr 1fr;grid-template-columns:auto 1fr 10fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.6em 0.5em;background-color:#f1f1f2;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}@media (max-width: 1250px){.monitor-info-container{grid-template-areas:"status name name uptime"
 "corner corner corner corner"}}@media (max-width: 500px){.monitor-info-container{grid-row-gap:0.6em}}.monitor-info-container .monitor-state{-ms-grid-row:1;-ms-grid-column:1;grid-area:status;padding:.5em}.monitor-info-container .monitor-name{-ms-grid-row:1;-ms-grid-column:2;grid-area:name;padding:.5em;-ms-grid-column-align:center;justify-self:center;word-break:keep-all;font-weight:bold}.monitor-info-container .monitor-uptime{-ms-grid-row:1;-ms-grid-column:4;grid-area:uptime;padding:.5em;-ms-grid-column-align:center;justify-self:center}.monitor-info-container .corner-container{-ms-grid-row:1;-ms-grid-column:3;grid-area:corner}.monitor-info-container .monitor-state-text{padding-left:.5em;word-break:keep-all}.monitor-info-container .monitor-state-dot{width:14px;height:14px;display:inline-block;border-radius:50%;color:#53b449;background:#53b449;position:relative;-webkit-transform:none;transform:none}@media (max-width: 500px){.monitor-info-container .monitor-state-dot{width:12px;height:12px}}.monitor-info-container .monitor-state-dot.warning{color:#fbb142;background:#fbb142}.monitor-info-container .monitor-state-dot.danger{color:#ef4b4c;background:#ef4b4c}.monitor-info-container .monitor-state-dot:after{content:"";opacity:1;width:100%;height:100%;position:absolute;top:0;left:0;background:#53b449;border-radius:50%;-webkit-animation:dotwave 1.5s infinite;animation:dotwave 1.5s infinite}.monitor-info-container .monitor-state-dot.warning:after{background:#fbb142}.monitor-info-container .monitor-state-dot.danger:after{background:#ef4b4c}@-webkit-keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}@keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}.corner-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[30];grid-template-columns:repeat(30, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr;grid-gap:0.5em;padding:.5em;-ms-flex-pack:distribute;justify-content:space-around}@media (max-width: 900px){.corner-container{-ms-grid-columns:(1fr)[15];grid-template-columns:repeat(15, 1fr);-ms-grid-rows:1fr 1fr;grid-template-rows:1fr 1fr;grid-gap:0.8em}}@media (max-width: 500px){.corner-container{grid-gap:0.4em;padding:0}}.corner-container .corner{background-color:lightgrey;cursor:pointer;position:relative;border-radius:5px}.corner-container .corner.good{background-color:#53b449}.corner-container .corner.warning{background-color:#fbb142}.corner-container .corner.danger{background-color:#ef4b4c}.corner-container .corner:hover{background-color:grey;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}.corner-container .corner:before{content:"";float:left;padding-top:100%}.corner-container .corner:hover .sub-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed}.sub-content{display:none;color:#f2f2f2;background-color:#2a3950;padding:0.3em 1em;z-index:999;position:relative;z-index:10;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform-origin:bottom right 2cm;transform-origin:bottom right 2cm;-webkit-transition:all ease-in-out 200ms;transition:all ease-in-out 200ms;border-radius:6px;line-height:1.2em}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #2a3950;bottom:-.5em}@media (max-width: 900px){.sub-content{position:relative;z-index:10}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-bottom:.5em solid #2a3950;top:-.5em}}.sub-content li{list-style:none}.sub-content li:first-child{color:#a6a6a6;font-size:0.8em;letter-spacing:1px}.sub-content li:nth-child(2){font-size:1.1em;line-height:1.35em}.sub-content li:last-child{color:#bfbfbf;font-size:0.8em}
diff --git a/resource/static/theme-daynight/js/main.js b/resource/static/theme-daynight/js/main.js
new file mode 100644
index 0000000..14050f3
--- /dev/null
+++ b/resource/static/theme-daynight/js/main.js
@@ -0,0 +1 @@
+function callAllJsFiles(t){var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",t),document.getElementsByTagName("head")[0].appendChild(e)}callAllJsFiles("/static/theme-daynight/js/navtop.js"),callAllJsFiles("/static/theme-daynight/js/mode.js");
\ No newline at end of file
diff --git a/resource/static/theme-daynight/js/mode.js b/resource/static/theme-daynight/js/mode.js
new file mode 100644
index 0000000..4cdb2bb
--- /dev/null
+++ b/resource/static/theme-daynight/js/mode.js
@@ -0,0 +1 @@
+var darkCheckBox=document.querySelector("input[name=theme]"),themeStatus=document.getElementsByTagName("BODY")[0];darkCheckBox.addEventListener("change",(function(){this.checked?(trans(),themeStatus.setAttribute("data-theme","dark")):(trans(),themeStatus.setAttribute("data-theme","light"))}));let trans=()=>{themeStatus.classList.add("transition-theme"),window.setTimeout(()=>{themeStatus.classList.remove("transition-theme")},1e3)};var listCheckBox=document.querySelector("input[name=grid]");themeStatus=document.getElementsByTagName("BODY")[0];listCheckBox.addEventListener("change",(function(){this.checked?(transs(),themeStatus.setAttribute("data-gridlist","list")):(transs(),themeStatus.setAttribute("data-gridlist","grid"))}));let transs=()=>{themeStatus.classList.add("transition-theme"),window.setTimeout(()=>{themeStatus.classList.remove("transition-theme")},1e3)};
diff --git a/resource/static/theme-daynight/js/navtop.js b/resource/static/theme-daynight/js/navtop.js
new file mode 100644
index 0000000..41f9a22
--- /dev/null
+++ b/resource/static/theme-daynight/js/navtop.js
@@ -0,0 +1 @@
+$(document).ready((function(){$(".hamburger").click((function(){$(this).toggleClass("is-active"),$(".nav-menu").toggleClass("active"),$(".nav-bar").toggleClass("active")}))}));var btn=$("#back-to-top");$(window).scroll((function(){$(window).scrollTop()>300?btn.addClass("show"):btn.removeClass("show")})),btn.on("click",(function(o){o.preventDefault(),$("html, body").animate({scrollTop:0},"300")}));
\ No newline at end of file
diff --git a/resource/static/theme-daynight/js/service.js b/resource/static/theme-daynight/js/service.js
new file mode 100644
index 0000000..8624047
--- /dev/null
+++ b/resource/static/theme-daynight/js/service.js
@@ -0,0 +1 @@
+function callAllJsFiles(t){var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",t),document.getElementsByTagName("head")[0].appendChild(e)}callAllJsFiles("/static/theme-daynight/js/navtop.js"),callAllJsFiles("/static/theme-daynight/js/mode.js"),callAllJsFiles("/static/theme-daynight/js/tooltip.js"),$(".corner").hover((function(){$(this).attr("aria-expanded","true")}));
\ No newline at end of file
diff --git a/resource/static/theme-daynight/js/tooltip.js b/resource/static/theme-daynight/js/tooltip.js
new file mode 100644
index 0000000..817395c
--- /dev/null
+++ b/resource/static/theme-daynight/js/tooltip.js
@@ -0,0 +1 @@
+var tooltipData=document.querySelectorAll(".corner ul");$(window).width()<=500?window.onmousemove=function(t){for(var o=t.clientX-40+"px",l=t.clientY+30+"px",e=0;e<tooltipData.length;e++)tooltipData[e].style.top=l,tooltipData[e].style.left=o}:window.onmousemove=function(t){for(var o=t.clientX-50+"px",l=t.clientY-100+"px",e=0;e<tooltipData.length;e++)tooltipData[e].style.top=l,tooltipData[e].style.left=o};
\ No newline at end of file
diff --git a/resource/template/theme-daynight/home.html b/resource/template/theme-daynight/home.html
index b861d0d..c15255d 100644
--- a/resource/template/theme-daynight/home.html
+++ b/resource/template/theme-daynight/home.html
@@ -9,7 +9,7 @@
     <title>{{.Title}}</title>
     <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
 
-    <link rel="stylesheet" href="/static/theme-daynight/main.css?v202101220904">
+    <link rel="stylesheet" href="/static/theme-daynight/css/main.css">
     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
@@ -20,7 +20,7 @@
 
 <body data-theme="light" data-gridlist="grid">
     <header class="nav-bar clearfix">
-        <figure class="logo"><a href="/">{{.Title}}</a></figure>
+        <figure class="logo"><a href="/">哪吒面板</a></figure>
         <div class="icon-container">
             <div class="row cf">
                 <div class="three col">
@@ -31,21 +31,27 @@
         </div>
         <nav class="nav-menu">
             <ul>
+                {{if .Admin}}
                 <li><a href="/">首页</a></li>
                 <li><a href="/service">服务状态</a></li>
                 <li><a href="/server">服务器</a></li>
                 <li><a href="/monitor">监控</a></li>
                 <li><a href="/notification">通知</a></li>
-                <li><a href="/setting">设置</a></li>{{if .Admin}} <li><a href="#" style="padding:.8em;text-align:center;"
-                        title="您已登录">{{.Admin.Name}}</a></li>{{else}} <li><a href="/login">登录</a></li>{{end}}
+                <li><a href="/setting">设置</a></li>
+                <li><a href="#" style="padding:.8em;text-align:center;"
+                        title="您已登录">{{.Admin.Name}}</a></li>
+                {{else}}
+                <li><a href="/">首页</a></li>
+                <li><a href="/service">服务状态</a></li>
+                <li><a href="/login">登录</a></li>{{end}}
             </ul>
         </nav>
     </header>
-    <script>$(document).ready(function () { $(".hamburger").click(function () { $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active'); }); }); </script>
+ 
     <section class="toggle-container">
       <div class="dark-mode-toggle">
         <label class="switcher">
-          <input type="checkbox" name="theme" id="switch" />
+          <input type="checkbox" name="theme" id="dark-light" />
           <div>
             <i class="fas fa-sun" title="白昼模式"></i>
             <i class="fas fa-moon" title="暗黑模式"></i>
@@ -134,43 +140,8 @@
         </div>
     </div>
 
-    <!-- Dark mode toggle -->
-    <script>
-      var checkbox = document.querySelector("input[name=theme]");
-      var themeStatue = document.getElementsByTagName("BODY")[0];
-      checkbox.addEventListener("change", function () {
-        if (this.checked) {
-          themeStatue.setAttribute("data-theme", "dark");
-        } else {
-          themeStatue.setAttribute("data-theme", "light");
-        }
-      });
-    </script>
-
-    <!-- Grid list mode toggle -->
-    <script>
-      var checkboxs = document.querySelector("input[name=grid]");
-      var themeStatue = document.getElementsByTagName("BODY")[0];
-      checkboxs.addEventListener("change", function () {
-        if (this.checked) {
-          transs();
-          themeStatue.setAttribute("data-gridlist", "list");
-        } else {
-          transs();
-          themeStatue.setAttribute("data-gridlist", "grid");
-        }
-      });
-      let transs = () => {
-        themeStatue.classList.add("transition-theme");
-        window.setTimeout(() => {
-          themeStatue.classList.remove("transition-theme");
-        }, 1000);
-      };
-    </script>
-
     <!-- Back to top button -->
     <a id="back-to-top"></a>
-    <script>var btn = $('#back-to-top'); $(window).scroll(function () { if ($(window).scrollTop() > 300) { btn.addClass('show'); } else { btn.removeClass('show'); } }); btn.on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, '300') });</script>
 
     <footer>
         <div class="footer-container">
@@ -183,7 +154,7 @@
         </div>
     </footer>
 
-
+    <script src="/static/theme-daynight/js/main.js" ></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
 
diff --git a/resource/template/theme-daynight/service.html b/resource/template/theme-daynight/service.html
index 95d2452..ee4c512 100644
--- a/resource/template/theme-daynight/service.html
+++ b/resource/template/theme-daynight/service.html
@@ -1,44 +1,126 @@
 {{define "theme-daynight/service"}}
-{{template "common/header" .}}
-{{if ts .CustomCode}}
-{{.CustomCode|safe}}
-{{end}}
-{{template "common/menu" .}}
-<div class="nb-container">
-    <div class="ui container">
-        <div class="service-status">
 
-            <table class="ui celled table">
-                <thead>
-                    <tr>
-                        <th class="ui center aligned">名称</th>
-                        <th class="ui center aligned">30天在线率</th>
-                        <th class="ui center aligned">详情</th>
-                        <th class="ui center aligned">状态</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{range $service := .Services}}
-                    <tr>
-                        <td class="ui center aligned">{{$service.Monitor.Name}}</td>
-                        <td class="ui center aligned">
-                            {{float32f (divU64 $service.TotalUp (addU64 $service.TotalUp $service.TotalDown))}}%
-                        </td>
-                        <td class="ui center aligned">{{range $i,$d := $service.Delay}}
-                            <div class="ui icon button {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}"
-                                data-tooltip="{{dayBefore $i}}，在线率:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%，平均延迟:{{float32f $d}}ms">
-                            </div> {{end}}
-                        </td>
-                        <td class="ui center aligned delay-today">
-                            <i
-                                class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
-                            {{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
-                        </td>
-                    </tr> {{end}}
-                </tbody>
-            </table>
+<!DOCTYPE html>
+<html lang="zh-Hans">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{.Title}}</title>
+    <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
+    <link rel="stylesheet" href="/static/theme-daynight/css/service.css" />
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+    {{if ts .CustomCode}}
+    {{.CustomCode|safe}}
+    {{end}}
+  </head>
+
+  <body data-theme="light" data-gridlist="list">
+    <article>
+      <header class="nav-bar clearfix">
+        <figure class="logo"><a href="/">哪吒面板</a></figure>
+        <div class="icon-container">
+          <div class="row cf">
+            <div class="three col">
+              <div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span class="line"></span></div>
+            </div>
+          </div>
         </div>
-    </div>
-</div>
-{{template "common/footer" .}}
-{{end}}
\ No newline at end of file
+        <nav class="nav-menu">
+          <ul>
+            {{if .Admin}}
+            <li><a href="/">首页</a></li>
+            <li><a href="/service">服务状态</a></li>
+            <li><a href="/server">服务器</a></li>
+            <li><a href="/monitor">监控</a></li>
+            <li><a href="/notification">通知</a></li>
+            <li><a href="/setting">设置</a></li>
+            <li><a href="#" style="padding: 0.8em; text-align: center" title="您已登录">{{.Admin.Name}}</a></li>
+            {{else}}
+            <li><a href="/">首页</a></li>
+            <li><a href="/service">服务状态</a></li>
+            <li><a href="/login">登录</a></li>
+            {{end}}
+          </ul>
+        </nav>
+      </header>
+
+      <section class="toggle-container">
+        <div class="dark-mode-toggle">
+          <label class="switcher">
+            <input type="checkbox" name="theme" id="dark-light" />
+            <div>
+              <i class="fas fa-sun" title="白昼模式"></i>
+              <i class="fas fa-moon" title="暗黑模式"></i>
+            </div>
+          </label>
+        </div>
+
+        <div class="grid-mode-toggle">
+          <label class="switcher">
+            <input type="checkbox" name="grid" id="grid-list" checked />
+            <div>
+              <i class="fas fa-th" title="网格视图"></i>
+              <i class="fas fa-list-ul" title="列表视图"></i>
+            </div>
+          </label>
+        </div>
+      </section>
+
+      <main>
+        <section class="monitor-header">
+          <h2>服务状态</h2>
+          <h4>最近30天在线率</h4>
+        </section>
+        <section class="monitor-container">
+          {{range $service := .Services}}
+          <section class="monitor-info-container">
+            <div class="monitor-state">
+              <span class="monitor-state-dot {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></span>
+              <span class="monitor-state-text">{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</span>
+            </div>
+            <div class="monitor-name">{{$service.Monitor.Name}}</div>
+            <div class="monitor-uptime">{{float32f (divU64 $service.TotalUp (addU64 $service.TotalUp $service.TotalDown))}}%</div>
+
+            <div class="corner-container">
+              {{range $i,$d := $service.Delay}}
+              <div class="corner {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}" aria-expanded="false">
+                <ul class="sub-content">
+                  <li>{{dayBefore $i}}</li>
+                  <li>{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%</li>
+                  <li>{{float32f $d}}ms</li>
+                </ul>
+              </div>
+              {{end}}
+            </div>
+          </section>
+          {{end}}
+        </section>
+      </main>
+
+      <footer>
+        <div class="footer-container">
+          <div>
+            <a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a>
+            <p>
+              &copy;
+              <span id="copyright-date"
+                ><script>
+                  document.getElementById("copyright-date").appendChild(document.createTextNode(new Date().getFullYear()));
+                </script></span
+              >
+              · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
+            </p>
+          </div>
+        </div>
+      </footer>
+      <!-- Back to top button -->
+      <a id="back-to-top"></a>
+    </article>
+
+    <script src="/static/theme-daynight/js/service.js" ></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
+  </body>
+</html>
+{{end}}