Merge pull request #87 from JackieSung4ev/daynight
UI design update and JavaScript files formating Co-authored-by: JackieSung4ev <[email protected]>
This commit is contained in:
7 files changed
+272
-261
No files matched your search
+1
-1
@@ -1 +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.transition-sidebar,body.transition-sidebar *,body.transition-sidebar *:before,body.transition-sidebar *:after{-webkit-transition:100ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:100ms 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"] .dark-light-toggle .switcher{background-color:#124b8c}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>.progress-bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.progress-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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-Line truncated
|
||||
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.transition-sidebar,body.transition-sidebar *,body.transition-sidebar *:before,body.transition-sidebar *:after{-webkit-transition:100ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:100ms 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"] .dark-light-toggle .switcher{background-color:#124b8c}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>.progress-bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.progress-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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-Line truncated
|
||||
+1
-5
@@ -1,5 +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:#fa9c10}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-bottom:.5em solid #092f52;top:-.5em}}body[data-theme="dark"] .service-mobile-toggle.smt-active ul li:nth-child(2){background-color:#124b8c}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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-color:#555}.sidebar-container ul li i.fas{font-size:1em;width:36px;text-align:center;position:relative;top:0.04em}.sidebar-container ul li .fas.fa-sun{font-size:1.3em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-sun{font-sLine truncated
|
||||
"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}}*,*::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 1fr auto;grid-template-rows: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}@media (max-width: 500px){.service-mobile-toggle.smt-active ul li:first-child{z-index:10;position:fixed;bottom:80px;right:30px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.service-mobile-toggle.smt-active ul li:nth-child(2){z-index:4;position:fixed;bottom:80px;right:85px;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.05s;transition-delay:0.05s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.service-mobile-toggle.smt-active ul li:last-child{z-index:3;position:fixed;bottom:80px;right:140px;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}}.service-mobile-toggle{display:none}@media (max-width: 500px){.service-mobile-toggle{display:-webkit-box;display:-mLine truncated
|
||||
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:#fa9c10}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-bottom:.5em solid #092f52;top:-.5em}}body[data-theme='dark'] .service-mobile-toggle.smt-active ul li:nth-child(2){background-color:#124b8c}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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-color:#555}.sidebar-container ul li i.fas{font-size:1em;width:36px;text-align:center;position:relative;top:0.04em}.sidebar-container ul li .fas.fa-sun{font-size:1.3em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-sun{font-sLine truncated
|
||||
+1
-1
@@ -1 +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/mode.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101290086");
|
||||
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/mode.js?v202101301768"),callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101301768");
|
||||
+1
-1
@@ -1 +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(),$(".service-mobile-toggle").hasClass("smt-active")&&($(".service-mobile-toggle ").removeClass("smt-active"),$("html, body").animate({scrollTop:0},"300")),$("html, body").animate({scrollTop:0},"300")}));
|
||||
$(document).ready((function(){$(".hamburger").click((function(){$(this).toggleClass("is-active"),$(".nav-menu ul").slideToggle("500","linear")}))}));var btn=$("#back-to-top");$(window).scroll((function(){$(window).scrollTop()>300?btn.addClass("show"):btn.removeClass("show")})),$(document).ready((function(){btn.on("click",(function(o){o.preventDefault(),$(".service-mobile-toggle").hasClass("smt-active")&&($(".service-mobile-toggle ").removeClass("smt-active"),$("html, body").animate({scrollTop:0},"300")),$("html, body").animate({scrollTop:0},"300")}))}));
|
||||
+1
-1
@@ -1 +1 @@
|
||||
function callAllJsFiles(e){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("src",e),document.getElementsByTagName("head")[0].appendChild(t)}callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/mode.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/tooltip.js?v202101290086"),$(".corner").hover((function(){$(this).attr("aria-expanded","true"===$(this).attr("aria-expanded")?"false":"true")}));const hour=new Date(Date.now()).getHours();(hour>17||hour<4)&&(document.querySelector("input[name=service-theme]").checked=!0,document.getElementsByTagName("BODY")[0].setAttribute("data-theme","dark")),$(document).ready((function(){$(".fa-plus").click((function(){$(".service-mobile-toggle").toggleClass("smt-active")}))}));
|
||||
function callAllJsFiles(e){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("src",e),document.getElementsByTagName("head")[0].appendChild(t)}callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101301768"),callAllJsFiles("/static/theme-daynight/js/mode.js?v202101301768"),callAllJsFiles("/static/theme-daynight/js/tooltip.js?v202101301768"),$(".corner").hover((function(){$(this).attr("aria-expanded","true"===$(this).attr("aria-expanded")?"false":"true")}));const hour=new Date(Date.now()).getHours();(hour>17||hour<4)&&(document.querySelector("input[name=service-theme]").checked=!0,document.getElementsByTagName("BODY")[0].setAttribute("data-theme","dark")),$(document).ready((function(){$(".service-mobile-toggle ul li:first-of-type").click((function(){$(".service-mobile-toggle").toggleClass("smt-active")}))})),$(document).on("click",(function(e){0==$(e.target).closest(".service-mobile-toggle").length&&$(".service-mobile-toggle").hasClass("smt-active")&&$(".service-mobile-toggle").toggleClass("smt-active")}));
|
||||
+239
-229
@@ -1,107 +1,122 @@
|
||||
{{define "theme-daynight/home"}}
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/static/logo.png" />
|
||||
|
||||
<link rel="stylesheet" href="/static/theme-daynight/css/main.css?v202101290086" />
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/static/theme-daynight/css/main.css?v202101301768">
|
||||
<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>
|
||||
{{if ts .CustomCode}}
|
||||
{{.CustomCode|safe}}
|
||||
{{end}}
|
||||
</head>
|
||||
|
||||
<body data-theme="light" data-gridlist="grid">
|
||||
<header class="nav-bar clearfix">
|
||||
<figure class="logo"><a href="/">{{.Conf.Site.Brand}}</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>
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/service">服务状态</a></li>
|
||||
{{if .Admin}}
|
||||
<li><a href="/server" style="padding: 0.8em; text-align: center">管理后台</a></li>
|
||||
{{else}}
|
||||
<li><a href="/login">登录</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</nav>
|
||||
<body data-theme="light" data-gridlist="grid">
|
||||
<header>
|
||||
<section class="nav-bar clearfix">
|
||||
<figure class="logo"><a href="/">{{.Conf.Site.Brand}}</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>
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/service">服务状态</a></li>
|
||||
{{if .Admin}}
|
||||
<li><a href="/server" style="padding:.8em;text-align:center;">管理后台</a></li>
|
||||
{{else}}
|
||||
<li><a href="/login">登录</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="app">
|
||||
<div class="server-info-container" v-for="server in servers" :id="server.ID">
|
||||
<div class="info-body">
|
||||
<ul class="server-info-body-container">
|
||||
<li>
|
||||
<div :class="'state-'+ (server.live?'online':'offline')">
|
||||
<p>@#server.live?'Running':'Down'#@</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3>@#server.Name#@</h3>
|
||||
</li>
|
||||
<li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'" :title="server.Host.CountryCode.toUpperCase()" /></li>
|
||||
<li>@#server.Host.Platform#@</li>
|
||||
<li>@#server.Host.CountryCode.toUpperCase()#@</li>
|
||||
<li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li>
|
||||
<li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
|
||||
<li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
|
||||
<li>@#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
|
||||
<li>
|
||||
<div class="cpu-bar">
|
||||
<div>
|
||||
<h4>CPU</h4>
|
||||
</div>
|
||||
<div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class" :title="formatPercent(server.live,server.State.CPU,100).percent+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="formatPercent(server.live,server.State.CPU,100).percent" aria-valuemin="0" aria-valuemax="100" :style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||
<p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ram-bar">
|
||||
<div>
|
||||
<h4>RAM</h4>
|
||||
</div>
|
||||
<div v-if="server.State" :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class" :title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)" aria-valuemin="0" aria-valuemax="100" :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||
<p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="disk-bar">
|
||||
<div>
|
||||
<h4>硬盘</h4>
|
||||
</div>
|
||||
<div v-if="server.State" :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class" :title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)" aria-valuemin="0" aria-valuemax="100" :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||
<p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main>
|
||||
<div id="app">
|
||||
<div class="server-info-container" v-for='server in servers' :id="server.ID">
|
||||
<div class="info-body">
|
||||
<ul class="server-info-body-container">
|
||||
<li>
|
||||
<div :class="'state-'+ (server.live?'online':'offline')">
|
||||
<p>@#server.live?'Running':'Down'#@</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3>@#server.Name#@</h3>
|
||||
</li>
|
||||
<li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
|
||||
:title="server.Host.CountryCode.toUpperCase()" /></li>
|
||||
<li>@#server.Host.Platform#@</li>
|
||||
<li>@#server.Host.CountryCode.toUpperCase()#@</li>
|
||||
<li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li>
|
||||
<li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
|
||||
<li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
|
||||
<li>@#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
|
||||
<li>
|
||||
<div class="cpu-bar">
|
||||
<div>
|
||||
<h4>CPU</h4>
|
||||
</div>
|
||||
<div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class"
|
||||
:title="formatPercent(server.live,server.State.CPU,100).percent+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="formatPercent(server.live,server.State.CPU,100).percent" aria-valuemin="0" aria-valuemax="100"
|
||||
:style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||
<p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="ram-bar">
|
||||
<div>
|
||||
<h4>RAM</h4>
|
||||
</div>
|
||||
<div v-if="server.State"
|
||||
:class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
|
||||
:title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)" aria-valuemin="0" aria-valuemax="100"
|
||||
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||
<p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="disk-bar">
|
||||
<div>
|
||||
<h4>硬盘</h4>
|
||||
</div>
|
||||
<div v-if="server.State"
|
||||
:class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
|
||||
:title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'">
|
||||
<div class="progress-bar" role="progressbar" :aria-valuenow="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)" aria-valuemin="0" aria-valuemax="100"
|
||||
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||
<p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-container">
|
||||
<div class="sidebar-container">
|
||||
<ul>
|
||||
<li><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
|
||||
<li><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
|
||||
@@ -109,7 +124,7 @@
|
||||
<li><i class="fas fa-list-ul" title="列表视图"></i><span>列表视图</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
<section class="dark-light-toggle">
|
||||
<label class="switcher">
|
||||
@@ -124,150 +139,145 @@
|
||||
<a id="back-to-top"></a>
|
||||
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div>
|
||||
<a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a>
|
||||
<p>
|
||||
©
|
||||
<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 class="footer-container">
|
||||
<div><a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a>
|
||||
<p>© <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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/static/theme-daynight/js/main.js?v202101290086"></script>
|
||||
<script src="/static/theme-daynight/js/main.js?v202101301768" ></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
||||
|
||||
<script>
|
||||
const initData = {{.Servers }};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
servers: initData,
|
||||
cache: [],
|
||||
},
|
||||
mounted() {
|
||||
this.DarkMode();
|
||||
},
|
||||
methods: {
|
||||
mergeUsage(state, host) {
|
||||
if (!state) {
|
||||
return 0
|
||||
}
|
||||
if (!host) {
|
||||
return state.CPU
|
||||
}
|
||||
return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
|
||||
},
|
||||
formatPercent(live, used, total) {
|
||||
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||
if (!this.cache[percent]) {
|
||||
this.cache[percent] = {
|
||||
class: {
|
||||
ui: true,
|
||||
progress: true,
|
||||
},
|
||||
style: {
|
||||
'transition-duration': '300ms',
|
||||
'min-width': 'unset',
|
||||
width: percent + '% !important',
|
||||
},
|
||||
percent,
|
||||
}
|
||||
if (percent < 0) {
|
||||
this.cache[percent].style['background-color'] = 'slategray'
|
||||
this.cache[percent].class.offline = true
|
||||
} else if (percent < 51) {
|
||||
this.cache[percent].style['background-color'] = '#53B449'
|
||||
this.cache[percent].class.fine = true
|
||||
} else if (percent < 81) {
|
||||
this.cache[percent].style['background-color'] = '#FBB142'
|
||||
this.cache[percent].class.warning = true
|
||||
} else {
|
||||
this.cache[percent].style['background-color'] = '#F23D34'
|
||||
this.cache[percent].class.error = true
|
||||
}
|
||||
}
|
||||
return this.cache[percent]
|
||||
},
|
||||
readableBytes(bytes) {
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
return (bytes / Math.pow(1024, i)).toFixed(0) + ' ' + sizes[i];
|
||||
},
|
||||
DarkMode() {
|
||||
const hour = new Date(Date.now()).getHours()
|
||||
if (hour > 17 || hour < 4) {
|
||||
document.querySelector("input[name=theme]").checked = true;
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
|
||||
}
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
if (d > 0) {
|
||||
return d + "天"
|
||||
}
|
||||
var h = Math.floor(s / 3600 % 24);
|
||||
var m = Math.floor(s / 60 % 60);
|
||||
var s = Math.floor(s % 60);
|
||||
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
|
||||
},
|
||||
formatTimestamp(t) {
|
||||
return new Date(t * 1000).toLocaleString()
|
||||
},
|
||||
formatByteSize(bs) {
|
||||
const x = this.readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'success',
|
||||
title: '实时通道建立',
|
||||
text: '可以实时获取最新监控数据啦',
|
||||
showConfirmButton: false,
|
||||
timer: 2000
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
const keys = Object.keys(statusCards.servers)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const ns = statusCards.servers[keys[i]];
|
||||
if (!ns.Host) ns.live = false
|
||||
else {
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
if (Date.now() - lastActive > 20 * 1000) {
|
||||
ns.live = false
|
||||
} else {
|
||||
ns.live = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ws.onclose = function () {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'error',
|
||||
title: '实时通道断开',
|
||||
text: '无法实时获取最新监控数据咯',
|
||||
showConfirmButton: false,
|
||||
timer: 2000
|
||||
});
|
||||
const initData = {{.Servers }};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
servers: initData,
|
||||
cache: [],
|
||||
},
|
||||
mounted() {
|
||||
this.DarkMode();
|
||||
},
|
||||
methods: {
|
||||
mergeUsage(state, host) {
|
||||
if (!state) {
|
||||
return 0
|
||||
}
|
||||
if (!host) {
|
||||
return state.CPU
|
||||
}
|
||||
return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
|
||||
},
|
||||
formatPercent(live, used, total) {
|
||||
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||
if (!this.cache[percent]) {
|
||||
this.cache[percent] = {
|
||||
class: {
|
||||
ui: true,
|
||||
progress: true,
|
||||
},
|
||||
style: {
|
||||
'transition-duration': '300ms',
|
||||
'min-width': 'unset',
|
||||
width: percent + '% !important',
|
||||
},
|
||||
percent,
|
||||
}
|
||||
if (percent < 0) {
|
||||
this.cache[percent].style['background-color'] = 'slategray'
|
||||
this.cache[percent].class.offline = true
|
||||
} else if (percent < 51) {
|
||||
this.cache[percent].style['background-color'] = '#53B449'
|
||||
this.cache[percent].class.fine = true
|
||||
} else if (percent < 81) {
|
||||
this.cache[percent].style['background-color'] = '#FBB142'
|
||||
this.cache[percent].class.warning = true
|
||||
} else {
|
||||
this.cache[percent].style['background-color'] = '#F23D34'
|
||||
this.cache[percent].class.error = true
|
||||
}
|
||||
}
|
||||
return this.cache[percent]
|
||||
},
|
||||
readableBytes(bytes) {
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
return (bytes / Math.pow(1024, i)).toFixed(0) + ' ' + sizes[i];
|
||||
},
|
||||
DarkMode() {
|
||||
const hour = new Date(Date.now()).getHours()
|
||||
if (hour > 17 || hour < 4) {
|
||||
document.querySelector("input[name=theme]").checked = true;
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
|
||||
}
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
if (d > 0) {
|
||||
return d + "天"
|
||||
}
|
||||
var h = Math.floor(s / 3600 % 24);
|
||||
var m = Math.floor(s / 60 % 60);
|
||||
var s = Math.floor(s % 60);
|
||||
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
|
||||
},
|
||||
formatTimestamp(t) {
|
||||
return new Date(t * 1000).toLocaleString()
|
||||
},
|
||||
formatByteSize(bs) {
|
||||
const x = this.readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'success',
|
||||
title: '实时通道建立',
|
||||
text: '可以实时获取最新监控数据啦',
|
||||
showConfirmButton: false,
|
||||
timer: 2000
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
const keys = Object.keys(statusCards.servers)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const ns = statusCards.servers[keys[i]];
|
||||
if (!ns.Host) ns.live = false
|
||||
else {
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
if (Date.now() - lastActive > 20 * 1000) {
|
||||
ns.live = false
|
||||
} else {
|
||||
ns.live = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ws.onclose = function () {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'error',
|
||||
title: '实时通道断开',
|
||||
text: '无法实时获取最新监控数据咯',
|
||||
showConfirmButton: false,
|
||||
timer: 2000
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{end}}
|
||||
+28
-23
@@ -7,36 +7,40 @@
|
||||
<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?v202101290086" />
|
||||
<link rel="stylesheet" href="/static/theme-daynight/css/service.css?v202101301768" />
|
||||
|
||||
<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}}
|
||||
{{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="/">{{.Conf.Site.Brand}}</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>
|
||||
<header>
|
||||
<section class="nav-bar clearfix">
|
||||
<figure class="logo"><a href="/">{{.Conf.Site.Brand}}</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>
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/service">服务状态</a></li>
|
||||
{{if .Admin}}
|
||||
<li><a href="/server" style="padding: 0.8em; text-align: center">管理后台</a></li>
|
||||
{{else}}
|
||||
<li><a href="/login">登录</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav-menu">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/service">服务状态</a></li>
|
||||
{{if .Admin}}
|
||||
<li><a href="/server" style="padding:.8em;text-align:center;">管理后台</a></li>
|
||||
{{else}}
|
||||
<li><a href="/login">登录</a></li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
@@ -92,7 +96,7 @@
|
||||
</li>
|
||||
<li>
|
||||
<label class="switcher">
|
||||
<input type="checkbox" name="service-grid" id="grid-list" checked />
|
||||
<input type="checkbox" name="service-grid" id="grid-list" checked/>
|
||||
<div>
|
||||
<i class="fas fa-grip-horizontal"></i>
|
||||
</div>
|
||||
@@ -122,7 +126,8 @@
|
||||
<a id="back-to-top"></a>
|
||||
</article>
|
||||
|
||||
<script src="/static/theme-daynight/js/service.js?v202101290086"></script>
|
||||
<script src="/static/theme-daynight/js/service.js?v202101301768"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in new issue
Block a user