mirror of https://github.com/cppla/ServerStatus
更改web页面为layui模板
zeyudada
parent
e34ed05901
commit
e00fe25ec4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
553
web/css/dark.css
553
web/css/dark.css
|
|
@ -1,70 +1,487 @@
|
|||
body { background: #212e36 url('../img/dark.png'); color: #dcdcdc; }
|
||||
.navbar { min-height: 40px; }
|
||||
.navbar-brand { color: #FFF !important; padding: 10px; font-size: 20px; }
|
||||
.dropdown .dropdown-toggle { padding-bottom: 10px; padding-top: 10px; }
|
||||
.dropdown-menu > li > a { color: #FFF !important; background-color: #222222 !important; }
|
||||
.dropdown-menu > li > a:hover { color: #FFF !important; background: #000 !important; }
|
||||
.dropdown-menu { background: #222 !important; background-color: #222222 !important; }
|
||||
.navbar-inverse .navbar-inner { background-color:#1B1B1B; background-image:-moz-linear-gradient(top, #222222, #111111); background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image:-webkit-linear-gradient(top, #222222, #111111); background-image:-o-linear-gradient(top, #222222, #111111); background-image:linear-gradient(to bottom, #212e36, #212e36); background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); border-color: #252525; }
|
||||
.content { background: #212e36; padding: 20px; border-radius: 5px; border: 1px #212e36 solid; -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0); box-shadow: 0 0px 0px rgba(0, 0, 0, 0); margin-bottom: 20px; }
|
||||
.table { background: #363b40; margin-bottom: 0; border-collapse: collapse; border-radius: 3px; }
|
||||
.table th { text-align: center; }
|
||||
.table-striped tbody > tr.even > td, .table-striped tbody > tr.even > th { background-color: #212e36; }
|
||||
.table-striped tbody > tr.odd > td, .table-striped tbody > tr.odd > th { background-color: #212e36; }
|
||||
.table td { text-align: center; border-color: #2F2F2F; }
|
||||
.progress { margin-bottom: 0; background: #363b40; }
|
||||
.table-hover > tbody > tr:hover > td { background: #414141; }
|
||||
tr.even.expandRow > :hover { background: #212e36 !important; }
|
||||
tr.odd.expandRow > :hover { background: #212e36 !important; }
|
||||
.expandRow > td { padding: 0 !important; border-top: 0px !important; }
|
||||
#month_traffic { min-width: 85px; max-width: 95px;}
|
||||
#network { min-width: 110px; }
|
||||
#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; }
|
||||
#ping { max-width: 100px; }
|
||||
:root{
|
||||
/* =====色板===== */
|
||||
/*常量,不随明暗主题变化*/
|
||||
--color-white: #FFFFFF;
|
||||
--color-black: #000000;
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 620px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 533px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 450px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#cpu, #ram, #hdd { min-width: 25px; max-width: 50px; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
--lay-color-white: #FAFAFA;
|
||||
--lay-color-black: #333333;
|
||||
|
||||
--lay-color-red-1: #FFF1E8;
|
||||
--lay-color-red-2: #FFD7C0;
|
||||
--lay-color-red-3: #FFBB99;
|
||||
--lay-color-red-4: #FF9C71;
|
||||
--lay-color-red-5: #FF7A4A;
|
||||
--lay-color-red-6: #FF5722;
|
||||
--lay-color-red-7: #D23B15;
|
||||
--lay-color-red-8: #A6250B;
|
||||
--lay-color-red-9: #791404;
|
||||
--lay-color-red-10: #4D0800;
|
||||
|
||||
--lay-color-blue-1: #E8F9FF;
|
||||
--lay-color-blue-2: #C0ECFF;
|
||||
--lay-color-blue-3: #97DCFF;
|
||||
--lay-color-blue-4: #6FCAFF;
|
||||
--lay-color-blue-5: #46B5FF;
|
||||
--lay-color-blue-6: #1E9FFF;
|
||||
--lay-color-blue-7: #1379D2;
|
||||
--lay-color-blue-8: #0A58A6;
|
||||
--lay-color-blue-9: #043A79;
|
||||
--lay-color-blue-10: #00214D;
|
||||
|
||||
--lay-color-lightblue-1: #E8FDFF;
|
||||
--lay-color-lightblue-2: #C1F4FB;
|
||||
--lay-color-lightblue-3: #9CEAF7;
|
||||
--lay-color-lightblue-4: #77DDF4;
|
||||
--lay-color-lightblue-5: #53CEF0;
|
||||
--lay-color-lightblue-6: #31BDEC;
|
||||
--lay-color-lightblue-7: #1F95C4;
|
||||
--lay-color-lightblue-8: #10709C;
|
||||
--lay-color-lightblue-9: #064E74;
|
||||
--lay-color-lightblue-10: #002F4D;
|
||||
|
||||
/* --lay-color-green-1: #E8FFF9;
|
||||
--lay-color-green-2: #AAEADB;
|
||||
--lay-color-green-3: #74D5C2;
|
||||
--lay-color-green-4: #46C0AC;
|
||||
--lay-color-green-5: #1FAB98;
|
||||
--lay-color-green-6: #009688;
|
||||
--lay-color-green-7: #00847B;
|
||||
--lay-color-green-8: #00716D;
|
||||
--lay-color-green-9: #005F5F;
|
||||
--lay-color-green-10: #004A4D; */
|
||||
|
||||
--lay-color-green-1: #E8FFF9;
|
||||
--lay-color-green-2: #B5F1E3;
|
||||
--lay-color-green-3: #87E3D1;
|
||||
--lay-color-green-4: #5DD6C1;
|
||||
--lay-color-green-5: #37C8B5;
|
||||
--lay-color-green-6: #16BAAA;
|
||||
--lay-color-green-7: #0E9F95;
|
||||
--lay-color-green-8: #08837F;
|
||||
--lay-color-green-9: #036868;
|
||||
--lay-color-green-10: #004A4D;
|
||||
|
||||
/* --lay-color-lightgreen-1: #E8FFEB;
|
||||
--lay-color-lightgreen-2: #C8F1CE;
|
||||
--lay-color-lightgreen-3: #ABE3B5;
|
||||
--lay-color-lightgreen-4: #8FD49E;
|
||||
--lay-color-lightgreen-5: #76C68A;
|
||||
--lay-color-lightgreen-6: #5FB878;
|
||||
--lay-color-lightgreen-7: #3D9D5B;
|
||||
--lay-color-lightgreen-8: #228243;
|
||||
--lay-color-lightgreen-9: #0D6730;
|
||||
--lay-color-lightgreen-10: #004D20; */
|
||||
|
||||
--lay-color-lightgreen-1: #E8FFF2;
|
||||
--lay-color-lightgreen-2: #B5F1D1;
|
||||
--lay-color-lightgreen-3: #86E2B4;
|
||||
--lay-color-lightgreen-4: #5CD49C;
|
||||
--lay-color-lightgreen-5: #37C588;
|
||||
--lay-color-lightgreen-6: #16B777;
|
||||
--lay-color-lightgreen-7: #0E9C68;
|
||||
--lay-color-lightgreen-8: #088259;
|
||||
--lay-color-lightgreen-9: #036749;
|
||||
--lay-color-lightgreen-10: #004D38;
|
||||
|
||||
--lay-color-orange-1: #FFFCE8;
|
||||
--lay-color-orange-2: #FFF5BA;
|
||||
--lay-color-orange-3: #FFEA8B;
|
||||
--lay-color-orange-4: #FFDC5D;
|
||||
--lay-color-orange-5: #FFCB2E;
|
||||
--lay-color-orange-6: #FFB800;
|
||||
--lay-color-orange-7: #D29000;
|
||||
--lay-color-orange-8: #A66C00;
|
||||
--lay-color-orange-9: #794B00;
|
||||
--lay-color-orange-10: #4D2D00;
|
||||
|
||||
--lay-color-cyan-1: #E8F6FF;
|
||||
--lay-color-cyan-2: #B9CEDD;
|
||||
--lay-color-cyan-3: #8FA7BB;
|
||||
--lay-color-cyan-4: #6A829A;
|
||||
--lay-color-cyan-5: #4A5F78;
|
||||
--lay-color-cyan-6: #2F4056;
|
||||
--lay-color-cyan-7: #223654;
|
||||
--lay-color-cyan-8: #162C51;
|
||||
--lay-color-cyan-9: #0B214F;
|
||||
--lay-color-cyan-10: #00174D;
|
||||
|
||||
--lay-color-purple-1: #FDE8FF;
|
||||
--lay-color-purple-2: #EDBEF4;
|
||||
--lay-color-purple-3: #DC97E8;
|
||||
--lay-color-purple-4: #C972DD;
|
||||
--lay-color-purple-5: #B651D1;
|
||||
--lay-color-purple-6: #A233C6;
|
||||
--lay-color-purple-7: #8120A8;
|
||||
--lay-color-purple-8: #631289;
|
||||
--lay-color-purple-9: #48076B;
|
||||
--lay-color-purple-10: #2F004D;
|
||||
|
||||
--lay-color-black-1: #E8F8FF;
|
||||
--lay-color-black-2: #BFD0D8;
|
||||
--lay-color-black-3: #98A8B1;
|
||||
--lay-color-black-4: #73818A;
|
||||
--lay-color-black-5: #505B63;
|
||||
--lay-color-black-6: #2F363C;
|
||||
--lay-color-black-7: #23303C;
|
||||
--lay-color-black-8: #18293C;
|
||||
--lay-color-black-9: #0C213C;
|
||||
--lay-color-black-10: #00183C;
|
||||
|
||||
/* --lay-color-black-1: #E8F2FF;
|
||||
--lay-color-black-2: #C1CBDB;
|
||||
--lay-color-black-3: #9CA5B6;
|
||||
--lay-color-black-4: #798192;
|
||||
--lay-color-black-5: #585E6D;
|
||||
--lay-color-black-6: #393D49;
|
||||
--lay-color-black-7: #2B3149;
|
||||
--lay-color-black-8: #1D2549;
|
||||
--lay-color-black-9: #0E1749;
|
||||
--lay-color-black-10: #000949; */
|
||||
|
||||
--lay-color-gray-1: #FAFAFA;
|
||||
--lay-color-gray-2: #F6F6F6;
|
||||
--lay-color-gray-3: #EEEEEE;
|
||||
--lay-color-gray-4: #E2E2E2;
|
||||
--lay-color-gray-5: #DDDDDD;
|
||||
--lay-color-gray-6: #D2D2D2;
|
||||
--lay-color-gray-7: #CCCCCC;
|
||||
--lay-color-gray-8: #C2C2C2;
|
||||
--lay-color-gray-9: #AAAAAA;
|
||||
--lay-color-gray-10: #939393;
|
||||
|
||||
/* =====语义===== */
|
||||
/* 主色 */
|
||||
--lay-color-primary: var(--lay-color-green-6);
|
||||
--lay-color-primary-hover: var(--lay-color-green-5);
|
||||
--lay-color-primary-active: var(--lay-color-green-7);
|
||||
--lay-color-primary-disabled: var(--lay-color-green-3);
|
||||
--lay-color-primary-light: var(--lay-color-green-4);
|
||||
|
||||
/* 次色 */
|
||||
--lay-color-secondary: var(--lay-color-lightgreen-6);
|
||||
--lay-color-secondary-hover: var(--lay-color-lightgreen-5);
|
||||
--lay-color-secondary-active: var(--lay-color-lightgreen-7);
|
||||
--lay-color-secondary-disabled: var(--lay-color-lightgreen-3);
|
||||
--lay-color-secondary-light: var(--lay-color-lightgreen-4);
|
||||
|
||||
/* 引导 */
|
||||
--lay-color-info: var(--lay-color-lightblue-6);
|
||||
--lay-color-info-hover: var(--lay-color-lightblue-5);
|
||||
--lay-color-info-active: var(--lay-color-lightblue-7);
|
||||
--lay-color-info-disabled: var(--lay-color-lightblue-3);
|
||||
--lay-color-info-light: var(--lay-color-lightblue-4);
|
||||
|
||||
/* 百搭 */
|
||||
--lay-color-normal: var(--lay-color-blue-6);
|
||||
--lay-color-normal-hover: var(--lay-color-blue-5);
|
||||
--lay-color-normal-active: var(--lay-color-blue-7);
|
||||
--lay-color-normal-disabled: var(--lay-color-blue-3);
|
||||
|
||||
/* 警示 */
|
||||
--lay-color-warning: var(--lay-color-orange-6);
|
||||
--lay-color-warning-hover: var(--lay-color-orange-5);
|
||||
--lay-color-warning-active: var(--lay-color-orange-7);
|
||||
--lay-color-warning-disabled: var(--lay-color-orange-3);
|
||||
--lay-color-warning-light: var(--lay-color-orange-4);
|
||||
|
||||
/* 成功 */
|
||||
--lay-color-success: var(--lay-color-lightgreen-6);
|
||||
--lay-color-success-hover: var(--lay-color-lightgreen-5);
|
||||
--lay-color-success-active: var(--lay-color-lightgreen-7);
|
||||
--lay-color-success-disabled: var(--lay-color-lightgreen-3);
|
||||
--lay-color-success-light: var(--lay-color-lightgreen-4);
|
||||
|
||||
/* 错误 */
|
||||
--lay-color-danger: var(--lay-color-red-6);
|
||||
--lay-color-danger-hover: var(--lay-color-red-5);
|
||||
--lay-color-danger-active: var(--lay-color-red-7);
|
||||
--lay-color-danger-disabled: var(--lay-color-red-3);
|
||||
--lay-color-danger-light: var(--lay-color-red-4);
|
||||
|
||||
--lay-color-bg-1: #17171A; /*整体背景*/
|
||||
--lay-color-bg-2: #232324; /*一级容器背景,卡片,面板*/
|
||||
--lay-color-bg-3: #2a2a2b; /*二级容器背景*/
|
||||
--lay-color-bg-4: #313132; /*三级容器背景*/
|
||||
--lay-color-bg-5: #373739; /*下拉弹出框、Tooltip 背景颜色*/
|
||||
--lay-color-bg-white: #f6f6f6; /*白色背景*/
|
||||
|
||||
--lay-color-text-1: rgba(255,255,255,.9); /*强调/正文标题*/
|
||||
--lay-color-text-2: rgba(255,255,255,.7); /*次强调/语句*/
|
||||
--lay-color-text-3: rgba(255,255,255,.5); /*次要信息*/
|
||||
--lay-color-text-4: rgba(255,255,255,.3);/*禁用状态文字 */
|
||||
|
||||
--lay-color-border-1: #2e2e30;
|
||||
--lay-color-border-2: #484849;
|
||||
--lay-color-border-3: #5f5f60;
|
||||
--lay-color-border-4: #929293;
|
||||
|
||||
--lay-color-fill-1: rgba(255,255,255,.04);/*浅/禁用*/
|
||||
--lay-color-fill-2: rgba(255,255,255,.08);/*常规/白底悬浮*/
|
||||
--lay-color-fill-3: rgba(255,255,255,.12); /*深/灰底悬浮*/
|
||||
--lay-color-fill-4: rgba(255,255,255,.16);/*重/特殊场景*/
|
||||
|
||||
--lay-color-hover: var(--lay-color-fill-3); /*bg*/
|
||||
--lay-color-active: var(--lay-color-fill-3); /*bg*/
|
||||
}
|
||||
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{-webkit-tap-highlight-color: rgba(0, 0, 0, 0)} /*danger: 勿改*/
|
||||
body{color:var(--lay-color-text-2);background-color: var(--lay-color-bg-1); color-scheme: dark;}
|
||||
hr{border-bottom:1px solid var(--lay-color-border-2)!important}
|
||||
a{color:var(--lay-color-text-1);}
|
||||
a:hover{color:var(--lay-color-text-3)}
|
||||
/* 三角形 */
|
||||
.layui-edge{border-color:transparent}
|
||||
.layui-edge-top{border-bottom-color:var(--lay-color-border-4)}
|
||||
.layui-edge-right{border-left-color:var(--lay-color-border-4)}
|
||||
.layui-edge-bottom{border-top-color:var(--lay-color-border-4)}
|
||||
.layui-edge-left{border-right-color:var(--lay-color-border-4)}
|
||||
/* 禁用文字 */
|
||||
.layui-disabled,.layui-disabled:hover{color:var(--lay-color-text-4)!important}
|
||||
/* 图标 */
|
||||
.layui-icon{-moz-osx-font-smoothing:grayscale}
|
||||
/* admin 布局 */
|
||||
.layui-layout-admin .layui-header{background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-footer{box-shadow:-1px 0 4px rgb(0 0 0 / 12%);background-color:var(--lay-color-bg-2)}
|
||||
.layui-layout-admin .layui-logo{color:var(--lay-color-primary);box-shadow:0 1px 2px 0 rgb(0 0 0 / 15%)}
|
||||
/* 引用 */
|
||||
.layui-elem-quote{border-left:5px solid var(--lay-color-secondary);background-color:var(--lay-color-bg-2)}
|
||||
/* 进度条 */
|
||||
.layui-progress{background-color: var(--lay-color-bg-3)}
|
||||
.layui-progress-bar{background-color:var( --lay-color-secondary)}
|
||||
.layui-progress-text{color:var(--lay-color-text-2)}
|
||||
.layui-progress-big .layui-progress-text{color: var(--lay-color-text-1)}
|
||||
/* 折叠面板 */
|
||||
.layui-colla-title{color: var(--lay-color-text-1);background-color: var(--lay-color-bg-2)}
|
||||
.layui-colla-content{color:var(--lay-color-text-2)}
|
||||
/* 卡片面板 */
|
||||
.layui-card{background-color: var(--lay-color-bg-2);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
|
||||
.layui-card-header{border-bottom:1px solid var(--lay-color-border-2);color:var(--lay-color-text-1)}
|
||||
/* 常规面板 */
|
||||
.layui-panel{box-shadow:1px 1px 4px rgb(0 0 0 / 8%);background-color: var( --lay-color-bg-2);color: var(--lay-color-text-1)}
|
||||
/* 窗口面板 */
|
||||
.layui-panel-window{border-top:5px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-2)}
|
||||
/* 背景颜色 */
|
||||
.layui-bg-red{background-color:var(--lay-color-red-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-orange{background-color:var(--lay-color-orange-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-green{background-color:var(--lay-color-green-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-cyan{background-color:var(--lay-color-cyan-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-blue{background-color: var(--lay-color-blue-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-black{background-color:var(--lay-color-black-6)!important;color: var(--lay-color-white)!important}
|
||||
.layui-bg-purple{background-color: var(--lay-color-purple-6)!important; color: var(--lay-color-white)!important;}
|
||||
.layui-bg-gray{background-color:var(--lay-color-gray-1)!important;color: var(--lay-color-black-6)!important}
|
||||
/* 徽章 */
|
||||
.layui-badge-rim,.layui-border,.layui-colla-content,.layui-colla-item,.layui-collapse,.layui-elem-field,.layui-form-pane .layui-form-item[pane],.layui-form-pane .layui-form-label,.layui-input,.layui-input-split,.layui-panel,.layui-quote-nm,.layui-select,.layui-tab-bar,.layui-tab-card,.layui-tab-title,.layui-tab-title .layui-this:after,.layui-textarea{border-color: var(--lay-color-border-1)}
|
||||
/* 边框颜色 */
|
||||
.layui-border{color:var(--lay-color-text-1)!important}
|
||||
.layui-border-red{border-color:var(--lay-color-red-6)!important;color:var(--lay-color-red-6)!important}
|
||||
.layui-border-orange{border-color:var(--lay-color-orange-6)!important;color:var(--lay-color-orange-6)!important}
|
||||
.layui-border-green{border-color:var(--lay-color-green-6)!important;color:var(--lay-color-green-6)!important}
|
||||
.layui-border-cyan{border-color:var(--lay-color-cyan-6)!important;color:var(--lay-color-cyan-6)!important}
|
||||
.layui-border-blue{border-color: var(--lay-color-blue-6)!important;color: var(--lay-color-blue-6)!important}
|
||||
.layui-border-purple{border-color: var(--lay-color-purple-6)!important; color: var(--lay-color-purple-6)!important;}
|
||||
.layui-border-black{border-color:var(--lay-color-black-6)!important;color:var(--lay-color-black-5)!important}
|
||||
/* 文本区域 */
|
||||
.layui-text{color:var(--lay-color-text-3)}
|
||||
.layui-text h1,.layui-text h2,.layui-text h3,.layui-text h4,.layui-text h5,.layui-text h6{color: var(--lay-color-text-2)}
|
||||
.layui-text-em,.layui-word-aux{color: var(--lay-color-text-2)!important}
|
||||
.layui-text a:not(.layui-btn){color:var(--lay-color-lightblue-6)}
|
||||
.layui-text blockquote:not(.layui-elem-quote){border-left:5px solid var(--lay-color-border-4)}
|
||||
.layui-text pre>code:not(.layui-code){background-color:var(--lay-color-bg-white)}
|
||||
/* 字体颜色 */
|
||||
.layui-font-red{color:var(--lay-color-red-6)!important}
|
||||
.layui-font-orange{color:var(--lay-color-orange-6)!important}
|
||||
.layui-font-green{color:var(--lay-color-green-6)!important}
|
||||
.layui-font-cyan{color:var(--lay-color-cyan-6)!important}
|
||||
.layui-font-blue{color:var(--lay-color-lightblue-6)!important}
|
||||
.layui-font-black{color:var(--lay-color-black)!important}
|
||||
.layui-font-purple{color:var(--lay-color-purple-6)!important;}
|
||||
.layui-font-gray{color:var(--lay-color-gray-7)!important}
|
||||
/* 按钮 */
|
||||
.layui-btn{border:1px solid transparent;background-color:var(--lay-color-primary);color: var(--lay-color-text-1)}
|
||||
.layui-btn:hover{color: var(--lay-color-text-2)}
|
||||
.layui-btn-primary{border-color:var(--lay-color-border-2);color:var(--lay-color-text-1);background-color: var(--lay-color-bg-4)}
|
||||
.layui-btn-primary:hover{border-color:var(--lay-color-primary);color:var(--lay-color-text-2)}
|
||||
.layui-btn-normal{background-color: var(--lay-color-normal)}
|
||||
.layui-btn-warm{background-color:var(--lay-color-warning)}
|
||||
.layui-btn-danger{background-color:var(--lay-color-danger)}
|
||||
.layui-btn-checked{background-color:var(--lay-color-success)}
|
||||
.layui-btn-disabled,.layui-btn-disabled:active,.layui-btn-disabled:hover{border-color: var(--lay-color-border-2)!important;background-color: var(--lay-color-bg-2)!important;color: var(--lay-color-text-4)!important}
|
||||
.layui-btn-group .layui-btn{border-left:1px solid var(--lay-color-border-2)}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-color:var(--lay-color-border-2);color:var(--lay-color-primary)}
|
||||
.layui-btn-group .layui-btn-primary:first-child{border-left:1px solid var(--lay-color-gray-5)}
|
||||
/*表单*/
|
||||
.layui-input,.layui-select,.layui-textarea{background-color: var(--lay-color-fill-2);color: var(--lay-color-text-2)}
|
||||
.layui-input[disabled],.layui-select[disabled],.layui-textarea[disabled]{background-color: var(--lay-color-fill-1);color: var(--lay-color-text-4)}
|
||||
.layui-input:hover,.layui-textarea:hover{border-color: var(--lay-color-border-2)!important}
|
||||
.layui-input:focus,.layui-textarea:focus{border-color: var(--lay-color-border-2)!important}
|
||||
.layui-form-danger+.layui-form-select .layui-input,.layui-form-danger:focus{border-color:var(--lay-color-danger)!important}
|
||||
/* 输入框点缀 */
|
||||
.layui-input-prefix .layui-icon,.layui-input-split .layui-icon,.layui-input-suffix .layui-icon{color: var(--lay-color-gray-8)}
|
||||
.layui-input-wrap .layui-input:focus+.layui-input-split{border-color: var(--lay-color-border-2)}
|
||||
.layui-input-affix .layui-icon{color: var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon-clear{color:var(--lay-color-text-2)}
|
||||
.layui-input-affix .layui-icon:hover{color:var(--lay-color-text-3)}
|
||||
/* 下拉选择 */
|
||||
.layui-form-select{color:var(--lay-color-text-2)}
|
||||
.layui-form-select .layui-edge{border-top-color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl{border:1px solid var( --lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:1px 1px 4px rgb(0 0 0 / 8%)}
|
||||
.layui-form-select dl dt{color:var(--lay-color-gray-8)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-active)}
|
||||
.layui-form-select dl dd.layui-select-tips{color:var(--lay-color-text-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color: var(--lay-color-active);color: var(--lay-color-text-1)}
|
||||
.layui-form-select dl dd.layui-disabled,.layui-form-select dl dd:hover.layui-disabled{background-color: var(--lay-color-bg-5)}
|
||||
.layui-select-none{color:var(--lay-color-black-8)}
|
||||
.layui-select-disabled .layui-disabled{border-color:var(--lay-color-gray-3)!important}
|
||||
.layui-select-disabled .layui-edge{border-top-color:var(--lay-color-gray-6)}
|
||||
/* 复选框 */
|
||||
.layui-form-checkbox{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox span{background-color:var(--lay-color-fill-3);color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox:hover span{background-color: var(--lay-color-active)}
|
||||
.layui-form-checkbox i{background-color: var(--lay-color-fill-1);border-top-color:var(--lay-color-border-1);border-right-color:var(--lay-color-border-1);border-bottom-color:var(--lay-color-border-1);border-left-color:initial;color:var(--lay-color-text-1)}
|
||||
.layui-form-checkbox:hover i{border-color:var(--lay-color-border-2);color:var(--lay-color-text-4)}
|
||||
.layui-form-checked,.layui-form-checked:hover{border-color:var(--lay-color-secondary-active)}
|
||||
.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--lay-color-secondary)}
|
||||
.layui-form-checked i,.layui-form-checked:hover i{color:var(--lay-color-secondary-hover)}
|
||||
/* 复选框-默认风格 */
|
||||
.layui-form-checkbox[lay-skin=primary]{background-image:none;background-color:initial;border-color:initial!important}
|
||||
.layui-form-checkbox[lay-skin=primary] span{background-image:none;background-color:initial;color:var(--lay-color-text-2)}
|
||||
.layui-form-checkbox[lay-skin=primary] i{border-color:var(--lay-color-border-1);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--lay-color-secondary-hover);color:var(--lay-color-text-1)}
|
||||
.layui-form-checked[lay-skin=primary] i{background-color:var(--lay-color-secondary);color:var(--lay-color-text-1);border-color:var(--lay-color-secondary-active)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary] span{background-image:none!important;background-color:initial!important;color:var(--lay-color-text-4)!important}
|
||||
.layui-form-checked.layui-checkbox-disabled[lay-skin=primary] i{background-image:initial!important;background-color:var(--lay-color-fill-1)!important;border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--lay-color-border-1)}
|
||||
.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate:before{background-color: var(--lay-color-gray-6);opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover .layui-icon-indeterminate:before{background-color: var(--lay-color-secondary-hover);opacity: 1;}
|
||||
.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate{border-color: var(--lay-color-border-2);}
|
||||
.layui-form-checkbox[lay-skin="primary"]:hover .layui-icon-indeterminate {border-color: var(--lay-color-secondary-hover);}
|
||||
/* 复选框-开关风格 */
|
||||
.layui-form-switch{border-color:var(--lay-color-border-2);background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-switch i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-switch.layui-checkbox-disabled i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-switch em{color:var(--lay-color-gray-8)!important}
|
||||
.layui-form-onswitch{border-color:var(--lay-color-secondary-active);background-color:var(--lay-color-secondary)}
|
||||
.layui-form-onswitch i{background-color:var(--lay-color-gray-4)}
|
||||
.layui-form-onswitch em{color:var(--lay-color-text-1)!important}
|
||||
.layui-checkbox-disabled{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled span{background-color:var(--lay-color-fill-3)!important;color: var(--lay-color-text-4);}
|
||||
.layui-checkbox-disabled i{border-color:var(--lay-color-border-2)!important}
|
||||
.layui-checkbox-disabled em{color:var(--lay-color-text-4)!important}
|
||||
.layui-checkbox-disabled:hover i{color:var(--lay-color-text-1)!important}
|
||||
/*复选框背景优化*/
|
||||
.layui-form-checkbox i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checkbox:hover i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checked.layui-checkbox-disabled:hover i:before,.layui-form-checked:hover i:before,.layui-form-checked i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-form-checkbox[lay-skin=primary]:hover i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
.layui-form-checked[lay-skin=primary]:hover i:before{opacity:1;filter:alpha(opacity=100)}
|
||||
.layui-checkbox-disabled:hover i:before{opacity:0;filter:alpha(opacity=0)}
|
||||
/*单选框*/
|
||||
.layui-form-radio>i{color:var(--lay-color-gray-8)}
|
||||
.layui-form-radio:hover *,.layui-form-radioed,.layui-form-radioed>i{color:var(--lay-color-secondary)}
|
||||
.layui-radio-disabled>i{color:var(--lay-color-text-4)!important}
|
||||
.layui-radio-disabled *{color:var(--lay-color-text-4)!important}
|
||||
/* 表单方框风格 */
|
||||
.layui-form-pane .layui-form-label{background-color:var(--lay-color-bg-2)}
|
||||
/** 分页 **/
|
||||
.layui-laypage a,.layui-laypage button,.layui-laypage input,.layui-laypage select,.layui-laypage span{border:1px solid var(--lay-color-border-2)}
|
||||
.layui-laypage a,.layui-laypage span{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-laypage a[data-page]{color:var(--lay-color-text-2)}
|
||||
.layui-laypage a:hover{color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-spr{color:var(--lay-color-text-3)}
|
||||
.layui-laypage .layui-laypage-curr em{color: var(--lay-color-white)}
|
||||
.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color: var(--lay-color-primary)}
|
||||
.layui-laypage .layui-laypage-skip{color:var(--lay-color-text-3)}
|
||||
.layui-laypage button,.layui-laypage input{background-color: var(--lay-color-bg-2)}
|
||||
.layui-laypage input:focus,.layui-laypage select:focus{border-color: var(--lay-color-primary)!important}
|
||||
/** 流加载 **/
|
||||
.layui-flow-more{color:var(--lay-color-text-1)}
|
||||
.layui-flow-more a cite{background-color: var(--lay-color-bg-4);color: var(--lay-color-text-1)}
|
||||
.layui-flow-more a i{color:var(--lay-color-text-2)}
|
||||
/** 表格 **/
|
||||
.layui-table{background-color: var(--lay-color-bg-2);color: var(--lay-color-text-2)}
|
||||
.layui-table-mend{background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-click,.layui-table-hover,.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-bg-2)}
|
||||
.layui-table td,.layui-table th,.layui-table-col-set,.layui-table-fixed-r,.layui-table-grid-down,.layui-table-header,.layui-table-mend,.layui-table-page,.layui-table-tips-main,.layui-table-tool,.layui-table-total,.layui-table-view,.layui-table[lay-skin=line],.layui-table[lay-skin=row]{border-color: var(--lay-color-border-2)}
|
||||
.layui-table-view .layui-table td[data-edit]:hover:after{border:1px solid var(--lay-color-primary-active)}
|
||||
.layui-table-init{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-init .layui-icon{color:var(--lay-color-gray-8);}
|
||||
.layui-table-page{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-tool{background-color: var(--lay-color-bg-2);}
|
||||
.layui-table-tool .layui-inline[lay-event]{color:var(--lay-color-text-3);border:1px solid var(--lay-color-border-2)}
|
||||
.layui-table-tool .layui-inline[lay-event]:hover{border:1px solid var(--lay-color-border-3)}
|
||||
.layui-table-tool-panel{color: var(--lay-color-text-1); border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5);box-shadow:0 2px 4px rgba(0,0,0,.12)}
|
||||
.layui-table-tool-panel li:hover{background-color:var(--lay-color-active)}
|
||||
.layui-table-col-set{background-color: var(--lay-color-white)}
|
||||
.layui-table-sort .layui-table-sort-asc{border-bottom-color:var(--lay-color-border-4)}
|
||||
.layui-table-sort .layui-table-sort-asc:hover{border-bottom-color:var(--lay-color-border-3)}
|
||||
.layui-table-sort .layui-table-sort-desc{border-top-color:var(--lay-color-border-4)}
|
||||
.layui-table-sort .layui-table-sort-desc:hover{border-top-color:var(--lay-color-border-3)}
|
||||
.layui-table-sort[lay-sort=asc] .layui-table-sort-asc{border-bottom-color:var(--lay-color-bg-5)}
|
||||
.layui-table-sort[lay-sort=desc] .layui-table-sort-desc{border-top-color:var(--lay-color-bg-5)}
|
||||
.layui-table-cell .layui-table-link{color: var(--lay-color-lightblue-5)}
|
||||
.layui-table-body .layui-none{color:var(--lay-color-gray-8)}
|
||||
.layui-table-fixed-l{box-shadow:1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-fixed-r{box-shadow:-1px 0 8px rgba(0,0,0,1)}
|
||||
.layui-table-edit{box-shadow:1px 1px 20px rgba(0,0,0,.15);background-color: var(--lay-color-bg-2)}
|
||||
.layui-table-edit:focus{border-color:var(--lay-color-secondary)!important}
|
||||
select.layui-table-edit{border-color:var(--lay-color-border-2)}
|
||||
.layui-table-grid-down{background-color: var(--lay-color-bg-5);color:var(--lay-color-gray-8)}
|
||||
.layui-table-grid-down:hover{background-color:var(--lay-color-bg-5)}
|
||||
body .layui-table-tips .layui-layer-content{box-shadow:0 1px 6px rgba(0,0,0,.12)}
|
||||
.layui-table-tips-main{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-3)}
|
||||
.layui-table-tips-c{background-color:var(--lay-color-gray-7);color: var(--lay-color-text-1)}
|
||||
.layui-table-tips-c:hover{background-color:var(--lay-color-gray-8)}
|
||||
/* 下拉菜单 */
|
||||
.layui-dropdown{background-color: var(--lay-color-bg-5)}
|
||||
.layui-dropdown.layui-panel,.layui-dropdown .layui-panel{background-color: var(--lay-color-bg-5)}
|
||||
.layui-dropdown.layui-panel .layui-menu{background-color: var(--lay-color-bg-5)}
|
||||
/** 导航菜单 **/
|
||||
.layui-nav{background-color:#393d49;color: var(--lay-color-white)}
|
||||
.layui-nav .layui-nav-item a{color: var(--lay-color-text-1);}
|
||||
.layui-nav .layui-this:after,.layui-nav-bar{background-color:var(--lay-color-secondary)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{color: var(--lay-color-text-1)}
|
||||
.layui-nav-child{box-shadow:0 2px 4px rgba(0,0,0,.12);border:1px solid var(--lay-color-border-2);background-color: var(--lay-color-bg-5)}
|
||||
.layui-nav .layui-nav-child a{color: var(--lay-color-text-1)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-bg-5);color: var(--lay-color-text-1)}
|
||||
.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-this>a:hover{background-color: var(--lay-color-primary);color: var(--lay-color-white)}
|
||||
.layui-nav-itemed>a,.layui-nav-tree .layui-nav-title a,.layui-nav-tree .layui-nav-title a:hover{color: var(--lay-color-white)!important}
|
||||
.layui-nav-tree .layui-nav-bar{background-color:var(--lay-color-primary)}
|
||||
.layui-nav-tree .layui-nav-child a{color: var(--lay-color-white);color: var(--lay-color-white)}
|
||||
.layui-nav-tree .layui-nav-child,.layui-nav-tree .layui-nav-child a:hover{color: var(--lay-color-white)}
|
||||
.layui-nav-itemed>.layui-nav-child{background-color:rgba(0, 0, 0, .3) !important}
|
||||
.layui-nav-tree.layui-bg-gray a,.layui-nav.layui-bg-gray .layui-nav-item a{color: var(--lay-color-black-4)}
|
||||
.layui-nav.layui-bg-gray .layui-nav-child{background-color: var(--lay-color-gray-1);}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color:#333!important}
|
||||
.layui-nav.layui-bg-gray .layui-this a{color:var(--lay-color-secondary)}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this,.layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a,.layui-nav-tree.layui-bg-gray .layui-this,.layui-nav-tree.layui-bg-gray .layui-this>a{color:var(--lay-color-secondary)!important}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-bar{background-color:var( --lay-color-secondary)}
|
||||
/*徽章*/
|
||||
.layui-badge,.layui-badge-dot,.layui-badge-rim{background-color:var(--lay-color-red-6);color: var(--lay-color-white)}
|
||||
.layui-badge-rim{background-color: var(--lay-color-white);color:var(--lay-color-black-6)}
|
||||
/*fix style*/
|
||||
.layui-layer-loading{background:0 0}
|
||||
.layui-btn-primary{border-color:transparent}
|
||||
.layui-btn-group .layui-btn:first-child{border-left:none}
|
||||
.layui-btn-group .layui-btn-primary:hover{border-top-color:transparent; border-bottom-color: transparent;}
|
||||
.layui-menu li:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-child a:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{background-color: var(--lay-color-fill-2)}
|
||||
.layui-nav-child dd.layui-this{background-color: var(--lay-color-fill-2)}
|
||||
.layui-tab-card>.layui-tab-title .layui-this:after,.layui-tab-title .layui-this:after{border-bottom-color:var(--lay-color-bg-1)}
|
||||
.layui-form-select dl dd:hover{background-color:var(--lay-color-fill-2)}
|
||||
.layui-form-select dl dd.layui-this{background-color:var(--lay-color-fill-2)}
|
||||
.layui-laypage button{color:var(--lay-color-text-1)}
|
||||
.layui-table-click,.layui-table-hover,.layui-table[lay-even] tbody tr:nth-child(even){background-color:var(--lay-color-fill-3)}
|
||||
.layui-transfer-data li:hover{background-color:var(--lay-color-active)}
|
||||
.layui-menu .layui-menu-item-checked,.layui-menu .layui-menu-item-checked2{background-color:var(--lay-color-fill-2)!important}
|
||||
.layui-input-split{background-color: var(--lay-color-bg-2);}
|
||||
.layui-layer-tab .layui-layer-title span:first-child{border-left: none !important;}
|
||||
.layui-slider-input.layui-input,
|
||||
.layui-slider-input .layui-input {background-color: var(--lay-color-bg-2);}
|
||||
|
||||
body {background: #212e36;}
|
||||
.layui-panel {overflow-x: auto;}
|
||||
.layui-table th, .layui-table td { text-align: center;white-space: nowrap; }
|
||||
.collapse { text-align: center; }
|
||||
|
|
@ -1,67 +1,5 @@
|
|||
body { background: #ebebeb url('../img/light.png'); }
|
||||
.navbar { min-height: 40px; }
|
||||
.navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
|
||||
.dropdown .dropdown-toggle { padding-bottom: 10px; padding-top: 10px; }
|
||||
.navbar-inverse .navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
|
||||
.content { background: #ffffff; padding: 20px; border-radius: 5px; border: 1px #cecece solid; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); box-shadow: 0 1px 10px rgba(0, 0, 0, .1); margin-bottom: 20px; }
|
||||
.table { background: #ffffff; margin-bottom: 0; border-collapse: collapse; border-radius: 3px; }
|
||||
.table th, .table td { text-align: center; }
|
||||
.table-striped tbody > tr.even > td, .table-striped tbody > tr.even > th { background-color: #F9F9F9; }
|
||||
.table-striped tbody > tr.odd > td, .table-striped tbody > tr.odd > th { background-color: #FFF; }
|
||||
.progress { margin-bottom: 0; }
|
||||
.progress-bar { color: #000; }
|
||||
.table-hover > tbody > tr:hover > td { background: #E6E6E6; }
|
||||
tr.even.expandRow > :hover { background: #F9F9F9 !important; }
|
||||
tr.odd.expandRow > :hover { background: #FFF !important; }
|
||||
.expandRow > td { padding: 0 !important; border-top: 0px !important; }
|
||||
#month_traffic { min-width: 85px; max-width: 95px;}
|
||||
#network { min-width: 110px; }
|
||||
#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; }
|
||||
#ping { max-width: 100px; }
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 620px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 533px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
@media only screen and (max-width: 450px) {
|
||||
body { font-size: 10px; }
|
||||
.content { padding: 0; }
|
||||
#month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; }
|
||||
#name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
|
||||
#type, tr td:nth-child(4) { display:none; visibility:hidden; }
|
||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
||||
#cpu, #ram, #hdd { min-width: 25px; max-width: 50px; }
|
||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
||||
}
|
||||
body {background: #ebebeb url(../img/light.png);}
|
||||
.layui-panel {overflow-x: auto;}
|
||||
.layui-table th, .layui-table td { text-align: center;white-space: nowrap; }
|
||||
.layui-progress-text { color: #000 !important; }
|
||||
.collapse { text-align: center; }
|
||||
BIN
web/img/dark.png
BIN
web/img/dark.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
134
web/index.html
134
web/index.html
|
|
@ -1,82 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
json字段保持完整, 自行自定义前端展示
|
||||
ლ(•̀ _ •́ ლ)
|
||||
ლ(•̀ _ •́ ლ)ლ(•̀ _ •́ ლ)
|
||||
ლ(•̀ _ •́ ლ)ლ(•̀ _ •́ ლ)ლ(•̀ _ •́ ლ)
|
||||
ლ(•̀ _ •́ ლ)ლ(•̀ _ •́ ლ)
|
||||
ლ(•̀ _ •́ ლ)
|
||||
follow me, better solution for you. by:https://cpp.la
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>云监控</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="云监控">
|
||||
<meta name="author" content="BotoX">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
|
||||
<link rel="stylesheet" href="css/light.css" title="light">
|
||||
<link rel="stylesheet" href="css/dark.css" title="dark">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<script src="js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div role="navigation" class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="#" class="navbar-brand">云监控</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle" href="#">风格<b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" onclick="setActiveStyleSheet('dark', true)">黑夜</a></li>
|
||||
<li><a href="#" onclick="setActiveStyleSheet('light', true)">白天</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container content">
|
||||
<div id="loading-notice">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>云监控</title>
|
||||
<meta name="description" content="云监控">
|
||||
<meta name="author" content="卢本伟">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="layui/css/layui.css" />
|
||||
<link id="layui_theme_css" href="css/light.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="layui-hide">
|
||||
<h3>您不应该看到此提示，如果看到此提示说明您未能正确加载网站依赖，请启用js或换用其他浏览器</h3>
|
||||
</div>
|
||||
<noscript>
|
||||
<div class="alert alert-danger" style="text-align: center;">
|
||||
<strong>Enable JavaScript</strong> , please do it.
|
||||
</div>
|
||||
<h3>您的浏览器不支持js，请启用js或换用其他浏览器</h3>
|
||||
</noscript>
|
||||
<div style="text-align: center;">
|
||||
警告:如果出现此消息，请确保您已启用Javascript! <br />否则云监控主服务没启动或已关闭.
|
||||
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
|
||||
<div class="layui-container">
|
||||
<li class="layui-nav-item layui-font-20">云监控</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:;">主题</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a href="javascript:changeTheme('dark', true);">暗色</a></dd>
|
||||
<dd><a href="javascript:changeTheme('light', true);">亮色</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</div>
|
||||
<p></p>
|
||||
</div>
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
</ul>
|
||||
<div class="layui-container" style="margin-top: 20px;">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-panel">
|
||||
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="online_status" style="text-align: center;">🔗协议</th>
|
||||
<th id="month_traffic" style="text-align: center;">📊月流量↓|↑</th>
|
||||
<th id="online_status">🔗协议</th>
|
||||
<th id="month_traffic">📊月流量↓|↑</th>
|
||||
<th id="name">📌节点</th>
|
||||
<th id="type">🗂️虚拟化</th>
|
||||
<th id="location">🌍位置</th>
|
||||
|
|
@ -94,17 +62,19 @@
|
|||
<!-- Servers here \o/ -->
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
<div id="updated">Updating...</div>
|
||||
<br>
|
||||
<div id="updated" style="margin: 10px;">最后更新: 几秒前.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<p style="text-align: center; font-size: 10px;">
|
||||
<a href="https://github.com/cppla/ServerStatus">ServerStatus中文版</a>
|
||||
</p>
|
||||
</div>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-panel layui-text" style="padding: 10px;">
|
||||
<a href="https://github.com/cppla/ServerStatus" target="_blank">ServerStatus中文版</a> | <a href="mailto:admin@zeyudada.cn" target="_blank">模板作者：卢本伟</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="layui/layui.js"></script>
|
||||
<script src="js/serverstatus.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,326 +0,0 @@
|
|||
/**
|
||||
* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
;(function(window, document) {
|
||||
/*jshint evil:true */
|
||||
/** version */
|
||||
var version = '3.7.3';
|
||||
|
||||
/** Preset options */
|
||||
var options = window.html5 || {};
|
||||
|
||||
/** Used to skip problem elements */
|
||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
||||
|
||||
/** Not all elements can be cloned in IE **/
|
||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
||||
|
||||
/** Detect whether the browser supports default html5 styles */
|
||||
var supportsHtml5Styles;
|
||||
|
||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
||||
var expando = '_html5shiv';
|
||||
|
||||
/** The id for the the documents expando */
|
||||
var expanID = 0;
|
||||
|
||||
/** Cached data for each document */
|
||||
var expandoData = {};
|
||||
|
||||
/** Detect whether the browser supports unknown elements */
|
||||
var supportsUnknownElements;
|
||||
|
||||
(function() {
|
||||
try {
|
||||
var a = document.createElement('a');
|
||||
a.innerHTML = '<xyz></xyz>';
|
||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
||||
supportsHtml5Styles = ('hidden' in a);
|
||||
|
||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
||||
// assign a false positive if unable to shiv
|
||||
(document.createElement)('a');
|
||||
var frag = document.createDocumentFragment();
|
||||
return (
|
||||
typeof frag.cloneNode == 'undefined' ||
|
||||
typeof frag.createDocumentFragment == 'undefined' ||
|
||||
typeof frag.createElement == 'undefined'
|
||||
);
|
||||
}());
|
||||
} catch(e) {
|
||||
// assign a false positive if detection fails => unable to shiv
|
||||
supportsHtml5Styles = true;
|
||||
supportsUnknownElements = true;
|
||||
}
|
||||
|
||||
}());
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
||||
* @private
|
||||
* @param {Document} ownerDocument The document.
|
||||
* @param {String} cssText The CSS text.
|
||||
* @returns {StyleSheet} The style element.
|
||||
*/
|
||||
function addStyleSheet(ownerDocument, cssText) {
|
||||
var p = ownerDocument.createElement('p'),
|
||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
||||
|
||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the value of `html5.elements` as an array.
|
||||
* @private
|
||||
* @returns {Array} An array of shived element node names.
|
||||
*/
|
||||
function getElements() {
|
||||
var elements = html5.elements;
|
||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extends the built-in list of html5 elements
|
||||
* @memberOf html5
|
||||
* @param {String|Array} newElements whitespace separated list or array of new element names to shiv
|
||||
* @param {Document} ownerDocument The context document.
|
||||
*/
|
||||
function addElements(newElements, ownerDocument) {
|
||||
var elements = html5.elements;
|
||||
if(typeof elements != 'string'){
|
||||
elements = elements.join(' ');
|
||||
}
|
||||
if(typeof newElements != 'string'){
|
||||
newElements = newElements.join(' ');
|
||||
}
|
||||
html5.elements = elements +' '+ newElements;
|
||||
shivDocument(ownerDocument);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the data associated to the given document
|
||||
* @private
|
||||
* @param {Document} ownerDocument The document.
|
||||
* @returns {Object} An object of data.
|
||||
*/
|
||||
function getExpandoData(ownerDocument) {
|
||||
var data = expandoData[ownerDocument[expando]];
|
||||
if (!data) {
|
||||
data = {};
|
||||
expanID++;
|
||||
ownerDocument[expando] = expanID;
|
||||
expandoData[expanID] = data;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns a shived element for the given nodeName and document
|
||||
* @memberOf html5
|
||||
* @param {String} nodeName name of the element
|
||||
* @param {Document|DocumentFragment} ownerDocument The context document.
|
||||
* @returns {Object} The shived element.
|
||||
*/
|
||||
function createElement(nodeName, ownerDocument, data){
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
if(supportsUnknownElements){
|
||||
return ownerDocument.createElement(nodeName);
|
||||
}
|
||||
if (!data) {
|
||||
data = getExpandoData(ownerDocument);
|
||||
}
|
||||
var node;
|
||||
|
||||
if (data.cache[nodeName]) {
|
||||
node = data.cache[nodeName].cloneNode();
|
||||
} else if (saveClones.test(nodeName)) {
|
||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
||||
} else {
|
||||
node = data.createElem(nodeName);
|
||||
}
|
||||
|
||||
// Avoid adding some elements to fragments in IE < 9 because
|
||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
||||
// is inserted into a document/fragment
|
||||
// * Link elements with `src` attributes that are inaccessible, as with
|
||||
// a 403 response, will cause the tab/window to crash
|
||||
// * Script elements appended to fragments will execute when their `src`
|
||||
// or `text` property is set
|
||||
return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
|
||||
}
|
||||
|
||||
/**
|
||||
* returns a shived DocumentFragment for the given document
|
||||
* @memberOf html5
|
||||
* @param {Document} ownerDocument The context document.
|
||||
* @returns {Object} The shived DocumentFragment.
|
||||
*/
|
||||
function createDocumentFragment(ownerDocument, data){
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
if(supportsUnknownElements){
|
||||
return ownerDocument.createDocumentFragment();
|
||||
}
|
||||
data = data || getExpandoData(ownerDocument);
|
||||
var clone = data.frag.cloneNode(),
|
||||
i = 0,
|
||||
elems = getElements(),
|
||||
l = elems.length;
|
||||
for(;i<l;i++){
|
||||
clone.createElement(elems[i]);
|
||||
}
|
||||
return clone;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
||||
* @private
|
||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
||||
* @param {Object} data of the document.
|
||||
*/
|
||||
function shivMethods(ownerDocument, data) {
|
||||
if (!data.cache) {
|
||||
data.cache = {};
|
||||
data.createElem = ownerDocument.createElement;
|
||||
data.createFrag = ownerDocument.createDocumentFragment;
|
||||
data.frag = data.createFrag();
|
||||
}
|
||||
|
||||
|
||||
ownerDocument.createElement = function(nodeName) {
|
||||
//abort shiv
|
||||
if (!html5.shivMethods) {
|
||||
return data.createElem(nodeName);
|
||||
}
|
||||
return createElement(nodeName, ownerDocument, data);
|
||||
};
|
||||
|
||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
||||
'var n=f.cloneNode(),c=n.createElement;' +
|
||||
'h.shivMethods&&(' +
|
||||
// unroll the `createElement` calls
|
||||
getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
|
||||
data.createElem(nodeName);
|
||||
data.frag.createElement(nodeName);
|
||||
return 'c("' + nodeName + '")';
|
||||
}) +
|
||||
');return n}'
|
||||
)(html5, data.frag);
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* Shivs the given document.
|
||||
* @memberOf html5
|
||||
* @param {Document} ownerDocument The document to shiv.
|
||||
* @returns {Document} The shived document.
|
||||
*/
|
||||
function shivDocument(ownerDocument) {
|
||||
if (!ownerDocument) {
|
||||
ownerDocument = document;
|
||||
}
|
||||
var data = getExpandoData(ownerDocument);
|
||||
|
||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
||||
// corrects block display not defined in IE6/7/8/9
|
||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
||||
// adds styling not present in IE6/7/8/9
|
||||
'mark{background:#FF0;color:#000}' +
|
||||
// hides non-rendered elements
|
||||
'template{display:none}'
|
||||
);
|
||||
}
|
||||
if (!supportsUnknownElements) {
|
||||
shivMethods(ownerDocument, data);
|
||||
}
|
||||
return ownerDocument;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* The `html5` object is exposed so that more elements can be shived and
|
||||
* existing shiving can be detected on iframes.
|
||||
* @type Object
|
||||
* @example
|
||||
*
|
||||
* // options can be changed before the script is included
|
||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
||||
*/
|
||||
var html5 = {
|
||||
|
||||
/**
|
||||
* An array or space separated string of node names of the elements to shiv.
|
||||
* @memberOf html5
|
||||
* @type Array|String
|
||||
*/
|
||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
|
||||
|
||||
/**
|
||||
* current version of html5shiv
|
||||
*/
|
||||
'version': version,
|
||||
|
||||
/**
|
||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
||||
* @memberOf html5
|
||||
* @type Boolean
|
||||
*/
|
||||
'shivCSS': (options.shivCSS !== false),
|
||||
|
||||
/**
|
||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
||||
* @memberOf html5
|
||||
* @type boolean
|
||||
*/
|
||||
'supportsUnknownElements': supportsUnknownElements,
|
||||
|
||||
/**
|
||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
||||
* methods should be overwritten.
|
||||
* @memberOf html5
|
||||
* @type Boolean
|
||||
*/
|
||||
'shivMethods': (options.shivMethods !== false),
|
||||
|
||||
/**
|
||||
* A string to describe the type of `html5` object ("default" or "default print").
|
||||
* @memberOf html5
|
||||
* @type String
|
||||
*/
|
||||
'type': 'default',
|
||||
|
||||
// shivs the document according to the specified `html5` object options
|
||||
'shivDocument': shivDocument,
|
||||
|
||||
//creates a shived element
|
||||
createElement: createElement,
|
||||
|
||||
//creates a shived documentFragment
|
||||
createDocumentFragment: createDocumentFragment,
|
||||
|
||||
//extends list of elements
|
||||
addElements: addElements
|
||||
};
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
// expose html5
|
||||
window.html5 = html5;
|
||||
|
||||
// shiv the document
|
||||
shivDocument(document);
|
||||
|
||||
if(typeof module == 'object' && module.exports){
|
||||
module.exports = html5;
|
||||
}
|
||||
|
||||
}(typeof window !== "undefined" ? window : this, document));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
|
||||
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
|
||||
* */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
|
||||
var $ = layui.jquery, layer = layui.layer, element = layui.element;
|
||||
// serverstatus.js. big data boom today.
|
||||
var error = 0;
|
||||
var d = 0;
|
||||
var server_status = new Array();
|
||||
|
||||
function timeSince(date) {
|
||||
if(date == 0)
|
||||
if (date == 0)
|
||||
return "从未.";
|
||||
|
||||
var seconds = Math.floor((new Date() - date) / 1000);
|
||||
|
|
@ -15,11 +17,10 @@ function timeSince(date) {
|
|||
return "几秒前.";
|
||||
}
|
||||
|
||||
function bytesToSize(bytes, precision, si)
|
||||
{
|
||||
function bytesToSize(bytes, precision, si) {
|
||||
var ret;
|
||||
si = typeof si !== 'undefined' ? si : 0;
|
||||
if(si != 0) {
|
||||
if (si != 0) {
|
||||
var megabyte = 1000 * 1000;
|
||||
var gigabyte = megabyte * 1000;
|
||||
var terabyte = gigabyte * 1000;
|
||||
|
|
@ -49,105 +50,124 @@ function bytesToSize(bytes, precision, si)
|
|||
}*/
|
||||
}
|
||||
|
||||
function uptime() {
|
||||
$.getJSON("json/stats.json", function(result) {
|
||||
$("#loading-notice").remove();
|
||||
if(result.reload)
|
||||
setTimeout(function() { location.reload() }, 1000);
|
||||
$.fn.alterClass = function (removals, additions) {
|
||||
|
||||
for (var i = 0, rlen=result.servers.length; i < rlen; i++) {
|
||||
var self = this;
|
||||
|
||||
if (removals.indexOf('*') === -1) {
|
||||
// Use native jQuery methods if there is no wildcard matching
|
||||
self.removeClass(removals);
|
||||
return !additions ? self : self.addClass(additions);
|
||||
}
|
||||
|
||||
var patt = new RegExp('\\s' +
|
||||
removals.
|
||||
replace(/\*/g, '[A-Za-z0-9-_]+').
|
||||
split(' ').
|
||||
join('\\s|\\s') +
|
||||
'\\s', 'g');
|
||||
|
||||
self.each(function (i, it) {
|
||||
var cn = ' ' + it.className + ' ';
|
||||
while (patt.test(cn)) {
|
||||
cn = cn.replace(patt, ' ');
|
||||
}
|
||||
it.className = $.trim(cn);
|
||||
});
|
||||
|
||||
return !additions ? self : self.addClass(additions);
|
||||
};
|
||||
|
||||
function uptime() {
|
||||
$.getJSON("json/stats.json", function (result) {
|
||||
$("#loading-notice").remove();
|
||||
if (result.reload)
|
||||
setTimeout(function () { location.reload() }, 1000);
|
||||
|
||||
for (var i = 0, rlen = result.servers.length; i < rlen; i++) {
|
||||
var TableRow = $("#servers tr#r" + i);
|
||||
var ExpandRow = $("#servers #rt" + i);
|
||||
var hack; // fuck CSS for making me do this
|
||||
if(i%2) hack="odd"; else hack="even";
|
||||
if (i % 2) hack = "odd"; else hack = "even";
|
||||
if (!TableRow.length) {
|
||||
$("#servers").append(
|
||||
"<tr id=\"r" + i + "\" data-toggle=\"collapse\" data-target=\"#rt" + i + "\" class=\"accordion-toggle " + hack + "\">" +
|
||||
"<td id=\"online_status\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"<td id=\"month_traffic\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"<td id=\"name\">加载中</td>" +
|
||||
"<td id=\"type\">加载中</td>" +
|
||||
"<td id=\"location\">加载中</td>" +
|
||||
"<td id=\"uptime\">加载中</td>" +
|
||||
"<td id=\"load\">加载中</td>" +
|
||||
"<td id=\"network\">加载中</td>" +
|
||||
"<td id=\"traffic\">加载中</td>" +
|
||||
"<td id=\"cpu\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"<td id=\"memory\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"<td id=\"hdd\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"<td id=\"ping\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
||||
"</tr>" +
|
||||
"<tr class=\"expandRow " + hack + "\"><td colspan=\"16\"><div class=\"accordian-body collapse\" id=\"rt" + i + "\">" +
|
||||
"<div id=\"expand_mem\">加载中</div>" +
|
||||
"<div id=\"expand_hdd\">加载中</div>" +
|
||||
"<div id=\"expand_tupd\">加载中</div>" +
|
||||
"<div id=\"expand_ping\">加载中</div>" +
|
||||
"<div id=\"expand_lost\">加载中</div>" +
|
||||
"<div id=\"expand_custom\">加载中</div>" +
|
||||
"</div></td></tr>"
|
||||
$("<tr>", {
|
||||
id: "r" + i,
|
||||
"data-target": "#rt" + i,
|
||||
class: "accordion-toggle " + hack,
|
||||
html: "<td id='online_status'><div class='layui-badge'>加载中</div></td>" +
|
||||
"<td id='month_traffic'><div class='layui-badge'>加载中</div></td>" +
|
||||
"<td id='name'>加载中</td>" +
|
||||
"<td id='type'>加载中</td>" +
|
||||
"<td id='location'>加载中</td>" +
|
||||
"<td id='uptime'>加载中</td>" +
|
||||
"<td id='load'>加载中</td>" +
|
||||
"<td id='network'>加载中</td>" +
|
||||
"<td id='traffic'>加载中</td>" +
|
||||
"<td id='cpu'><div class='layui-progress layui-progress-big' lay-showpercent='true'><div style='width: 100%;' class='layui-progress-bar layui-bg-orange'><small>加载中</small></div></div></td>" +
|
||||
"<td id='memory'><div class='layui-progress layui-progress-big' lay-showpercent='true'><div style='width: 100%;' class='layui-progress-bar layui-bg-orange'><small>加载中</small></div></div></td>" +
|
||||
"<td id='hdd'><div class='layui-progress layui-progress-big' lay-showpercent='true'><div style='width: 100%;' class='layui-progress-bar layui-bg-orange'><small>加载中</small></div></div></td>" +
|
||||
"<td id='ping'><div class='layui-badge'>加载中</div></td>"
|
||||
}),
|
||||
$("<tr>", {
|
||||
class: "expandRow " + hack,
|
||||
html: "<td colspan='16' style='display: none;'><div class='layui-text collapse' id='rt" + i + "'>" +
|
||||
"<div id='expand_mem'>加载中</div>" +
|
||||
"<div id='expand_hdd'>加载中</div>" +
|
||||
"<div id='expand_tupd'>加载中</div>" +
|
||||
"<div id='expand_ping'>加载中</div>" +
|
||||
"<div id='expand_lost'>加载中</div>" +
|
||||
"<div id='expand_custom'>加载中</div>" +
|
||||
"</div></td>"
|
||||
})
|
||||
);
|
||||
TableRow = $("#servers tr#r" + i);
|
||||
ExpandRow = $("#servers #rt" + i);
|
||||
server_status[i] = true;
|
||||
}
|
||||
TableRow = TableRow[0];
|
||||
if(error) {
|
||||
if (error) {
|
||||
TableRow.setAttribute("data-target", "#rt" + i);
|
||||
server_status[i] = true;
|
||||
}
|
||||
|
||||
// online_status
|
||||
if (result.servers[i].online4 && !result.servers[i].online6) {
|
||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>IPv4</small>";
|
||||
$(TableRow).find("#online_status .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-green").text("IPv4");
|
||||
} else if (result.servers[i].online4 && result.servers[i].online6) {
|
||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>双栈</small>";
|
||||
$(TableRow).find("#online_status .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-green").text("双栈");
|
||||
} else if (!result.servers[i].online4 && result.servers[i].online6) {
|
||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>IPv6</small>";
|
||||
$(TableRow).find("#online_status .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-green").text("IPv6");
|
||||
} else {
|
||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
$(TableRow).find("#online_status .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red").text("关闭");
|
||||
}
|
||||
|
||||
// Name
|
||||
TableRow.children["name"].innerHTML = result.servers[i].name;
|
||||
$(TableRow).find("#name").text(result.servers[i].name);
|
||||
|
||||
// Type
|
||||
TableRow.children["type"].innerHTML = result.servers[i].type;
|
||||
$(TableRow).find("#type").text(result.servers[i].type);
|
||||
|
||||
// Location
|
||||
TableRow.children["location"].innerHTML = result.servers[i].location;
|
||||
$(TableRow).find("#location").text(result.servers[i].location);
|
||||
if (!result.servers[i].online4 && !result.servers[i].online6) {
|
||||
if (server_status[i]) {
|
||||
TableRow.children["uptime"].innerHTML = "–";
|
||||
TableRow.children["load"].innerHTML = "–";
|
||||
TableRow.children["network"].innerHTML = "–";
|
||||
TableRow.children["traffic"].innerHTML = "–";
|
||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
TableRow.children["cpu"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["cpu"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
TableRow.children["memory"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["memory"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
TableRow.children["hdd"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
TableRow.children["ping"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["ping"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
||||
if(ExpandRow.hasClass("in")) {
|
||||
ExpandRow.collapse("hide");
|
||||
}
|
||||
TableRow.setAttribute("data-target", "");
|
||||
$(TableRow).find("#uptime").text("–");
|
||||
$(TableRow).find("#load").text("–");
|
||||
$(TableRow).find("#network").text("–");
|
||||
$(TableRow).find("#traffic").text("–");
|
||||
$(TableRow).find("#month_traffic .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-orange").text("关闭");
|
||||
$(TableRow).find("#cpu .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">关闭</span>');
|
||||
$(TableRow).find("#memory .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">关闭</span>');
|
||||
$(TableRow).find("#hdd .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">关闭</span>');
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red").text("关闭");
|
||||
$($(TableRow).attr("data-target")).parent().slideUp();
|
||||
$(TableRow).attr("data-target", "");
|
||||
server_status[i] = false;
|
||||
}
|
||||
} else {
|
||||
if (!server_status[i]) {
|
||||
TableRow.setAttribute("data-target", "#rt" + i);
|
||||
$(TableRow).attr("data-target", "#rt" + i);
|
||||
server_status[i] = true;
|
||||
}
|
||||
|
||||
|
|
@ -155,172 +175,153 @@ function uptime() {
|
|||
var monthtraffic = "";
|
||||
var trafficdiff_in = result.servers[i].network_in - result.servers[i].last_network_in;
|
||||
var trafficdiff_out = result.servers[i].network_out - result.servers[i].last_network_out;
|
||||
if(trafficdiff_in < 1024*1024*1024*1024)
|
||||
monthtraffic += (trafficdiff_in/1024/1024/1024).toFixed(1) + "G";
|
||||
if (trafficdiff_in < 1024 * 1024 * 1024 * 1024)
|
||||
monthtraffic += (trafficdiff_in / 1024 / 1024 / 1024).toFixed(1) + "G";
|
||||
else
|
||||
monthtraffic += (trafficdiff_in/1024/1024/1024/1024).toFixed(1) + "T";
|
||||
monthtraffic += (trafficdiff_in / 1024 / 1024 / 1024 / 1024).toFixed(1) + "T";
|
||||
monthtraffic += " | "
|
||||
if(trafficdiff_out < 1024*1024*1024*1024)
|
||||
monthtraffic += (trafficdiff_out/1024/1024/1024).toFixed(1) + "G";
|
||||
if (trafficdiff_out < 1024 * 1024 * 1024 * 1024)
|
||||
monthtraffic += (trafficdiff_out / 1024 / 1024 / 1024).toFixed(1) + "G";
|
||||
else
|
||||
monthtraffic += (trafficdiff_out/1024/1024/1024/1024).toFixed(1) + "T";
|
||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>"+monthtraffic+"</small>";
|
||||
monthtraffic += (trafficdiff_out / 1024 / 1024 / 1024 / 1024).toFixed(1) + "T";
|
||||
$(TableRow).find("#month_traffic .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-green").html("<small>" + monthtraffic + "</small>");
|
||||
|
||||
// Uptime
|
||||
TableRow.children["uptime"].innerHTML = result.servers[i].uptime;
|
||||
$(TableRow).find("#uptime").text(result.servers[i].uptime);
|
||||
|
||||
// Load: default load_1, you can change show: load_1, load_5, load_15
|
||||
if(result.servers[i].load == -1) {
|
||||
TableRow.children["load"].innerHTML = "–";
|
||||
if (result.servers[i].load == -1) {
|
||||
$(TableRow).find("#load").text("–");
|
||||
} else {
|
||||
TableRow.children["load"].innerHTML = result.servers[i].load_1.toFixed(2);
|
||||
$(TableRow).find("#load").text(result.servers[i].load_1.toFixed(2));
|
||||
}
|
||||
|
||||
// Network
|
||||
var netstr = "";
|
||||
if(result.servers[i].network_rx < 1024*1024)
|
||||
netstr += (result.servers[i].network_rx/1024).toFixed(1) + "K";
|
||||
if (result.servers[i].network_rx < 1024 * 1024)
|
||||
netstr += (result.servers[i].network_rx / 1024).toFixed(1) + "K";
|
||||
else
|
||||
netstr += (result.servers[i].network_rx/1024/1024).toFixed(1) + "M";
|
||||
netstr += (result.servers[i].network_rx / 1024 / 1024).toFixed(1) + "M";
|
||||
netstr += " | "
|
||||
if(result.servers[i].network_tx < 1024*1024)
|
||||
netstr += (result.servers[i].network_tx/1024).toFixed(1) + "K";
|
||||
if (result.servers[i].network_tx < 1024 * 1024)
|
||||
netstr += (result.servers[i].network_tx / 1024).toFixed(1) + "K";
|
||||
else
|
||||
netstr += (result.servers[i].network_tx/1024/1024).toFixed(1) + "M";
|
||||
TableRow.children["network"].innerHTML = netstr;
|
||||
netstr += (result.servers[i].network_tx / 1024 / 1024).toFixed(1) + "M";
|
||||
$(TableRow).find("#network").text(netstr);
|
||||
|
||||
//Traffic
|
||||
var trafficstr = "";
|
||||
if(result.servers[i].network_in < 1024*1024*1024*1024)
|
||||
trafficstr += (result.servers[i].network_in/1024/1024/1024).toFixed(1) + "G";
|
||||
if (result.servers[i].network_in < 1024 * 1024 * 1024 * 1024)
|
||||
trafficstr += (result.servers[i].network_in / 1024 / 1024 / 1024).toFixed(1) + "G";
|
||||
else
|
||||
trafficstr += (result.servers[i].network_in/1024/1024/1024/1024).toFixed(1) + "T";
|
||||
trafficstr += (result.servers[i].network_in / 1024 / 1024 / 1024 / 1024).toFixed(1) + "T";
|
||||
trafficstr += " | "
|
||||
if(result.servers[i].network_out < 1024*1024*1024*1024)
|
||||
trafficstr += (result.servers[i].network_out/1024/1024/1024).toFixed(1) + "G";
|
||||
if (result.servers[i].network_out < 1024 * 1024 * 1024 * 1024)
|
||||
trafficstr += (result.servers[i].network_out / 1024 / 1024 / 1024).toFixed(1) + "G";
|
||||
else
|
||||
trafficstr += (result.servers[i].network_out/1024/1024/1024/1024).toFixed(1) + "T";
|
||||
TableRow.children["traffic"].innerHTML = trafficstr;
|
||||
trafficstr += (result.servers[i].network_out / 1024 / 1024 / 1024 / 1024).toFixed(1) + "T";
|
||||
$(TableRow).find("#traffic").text(trafficstr);
|
||||
|
||||
// CPU
|
||||
if (result.servers[i].cpu >= 90)
|
||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
$(TableRow).find("#cpu .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red");
|
||||
else if (result.servers[i].cpu >= 80)
|
||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
$(TableRow).find("#cpu .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-orange");
|
||||
else
|
||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["cpu"].children[0].children[0].style.width = result.servers[i].cpu + "%";
|
||||
TableRow.children["cpu"].children[0].children[0].innerHTML = result.servers[i].cpu + "%";
|
||||
$(TableRow).find("#cpu .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-green");
|
||||
$(TableRow).find("#cpu .layui-progress-bar").css("width", result.servers[i].cpu + "%").html('<span class="layui-progress-text">' + result.servers[i].cpu + "%</span>");
|
||||
|
||||
// Memory
|
||||
var Mem = ((result.servers[i].memory_used/result.servers[i].memory_total)*100.0).toFixed(0);
|
||||
var Mem = ((result.servers[i].memory_used / result.servers[i].memory_total) * 100.0).toFixed(0);
|
||||
if (Mem >= 90)
|
||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
$(TableRow).find("#memory .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red");
|
||||
else if (Mem >= 80)
|
||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
$(TableRow).find("#memory .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-orange");
|
||||
else
|
||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["memory"].children[0].children[0].style.width = Mem + "%";
|
||||
TableRow.children["memory"].children[0].children[0].innerHTML = Mem + "%";
|
||||
$(TableRow).find("#memory .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-green");
|
||||
$(TableRow).find("#memory .layui-progress-bar").css("width", Mem + "%").html('<span class="layui-progress-text">' + Mem + "%</span>");
|
||||
// 内存|swap
|
||||
ExpandRow[0].children["expand_mem"].innerHTML = "内存|虚存: " + bytesToSize(result.servers[i].memory_used*1024, 1) + " / " + bytesToSize(result.servers[i].memory_total*1024, 1) + " | " + bytesToSize(result.servers[i].swap_used*1024, 0) + " / " + bytesToSize(result.servers[i].swap_total*1024, 0);
|
||||
$(ExpandRow).find("#expand_mem").html("内存|虚存:" + bytesToSize(result.servers[i].memory_used * 1024, 1) + " / " + bytesToSize(result.servers[i].memory_total * 1024, 1) + " | " + bytesToSize(result.servers[i].swap_used * 1024, 0) + " / " + bytesToSize(result.servers[i].swap_total * 1024, 0));
|
||||
|
||||
// HDD
|
||||
var HDD = ((result.servers[i].hdd_used/result.servers[i].hdd_total)*100.0).toFixed(0);
|
||||
var HDD = ((result.servers[i].hdd_used / result.servers[i].hdd_total) * 100.0).toFixed(0);
|
||||
if (HDD >= 90)
|
||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
$(TableRow).find("#hdd .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red");
|
||||
else if (HDD >= 80)
|
||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
$(TableRow).find("#hdd .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-orange");
|
||||
else
|
||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["hdd"].children[0].children[0].style.width = HDD + "%";
|
||||
TableRow.children["hdd"].children[0].children[0].innerHTML = HDD + "%";
|
||||
$(TableRow).find("#hdd .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-green");
|
||||
$(TableRow).find("#hdd .layui-progress-bar").css("width", HDD + "%").html('<span class="layui-progress-text">' + HDD + "%</span>");
|
||||
// IO Speed for HDD.
|
||||
// IO， 过小的B字节单位没有意义
|
||||
var io = "";
|
||||
if(result.servers[i].io_read < 1024*1024)
|
||||
io += parseInt(result.servers[i].io_read/1024) + "K";
|
||||
if (result.servers[i].io_read < 1024 * 1024)
|
||||
io += parseInt(result.servers[i].io_read / 1024) + "K";
|
||||
else
|
||||
io += parseInt(result.servers[i].io_read/1024/1024) + "M";
|
||||
io += parseInt(result.servers[i].io_read / 1024 / 1024) + "M";
|
||||
io += " / "
|
||||
if(result.servers[i].io_write < 1024*1024)
|
||||
io += parseInt(result.servers[i].io_write/1024) + "K";
|
||||
if (result.servers[i].io_write < 1024 * 1024)
|
||||
io += parseInt(result.servers[i].io_write / 1024) + "K";
|
||||
else
|
||||
io += parseInt(result.servers[i].io_write/1024/1024) + "M";
|
||||
io += parseInt(result.servers[i].io_write / 1024 / 1024) + "M";
|
||||
// Expand for HDD.
|
||||
ExpandRow[0].children["expand_hdd"].innerHTML = "硬盘|读写: " + bytesToSize(result.servers[i].hdd_used*1024*1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total*1024*1024, 2) + " | " + io;
|
||||
$(ExpandRow).find("#expand_hdd").html("硬盘|读写: " + bytesToSize(result.servers[i].hdd_used * 1024 * 1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total * 1024 * 1024, 2) + " | " + io);
|
||||
|
||||
// delay time
|
||||
|
||||
// tcp, udp, process, thread count
|
||||
ExpandRow[0].children["expand_tupd"].innerHTML = "TCP/UDP/进/线: " + result.servers[i].tcp_count + " / " + result.servers[i].udp_count + " / " + result.servers[i].process_count+ " / " + result.servers[i].thread_count;
|
||||
ExpandRow[0].children["expand_ping"].innerHTML = "联通/电信/移动: " + result.servers[i].time_10010 + "ms / " + result.servers[i].time_189 + "ms / " + result.servers[i].time_10086 + "ms"
|
||||
$(ExpandRow).find("#expand_tupd").html("TCP/UDP/进/线: " + result.servers[i].tcp_count + " / " + result.servers[i].udp_count + " / " + result.servers[i].process_count + " / " + result.servers[i].thread_count);
|
||||
$(ExpandRow).find("#expand_ping").html("联通/电信/移动: " + result.servers[i].time_10010 + "ms / " + result.servers[i].time_189 + "ms / " + result.servers[i].time_10086 + "ms");
|
||||
|
||||
// ping
|
||||
var PING_10010 = result.servers[i].ping_10010.toFixed(0);
|
||||
var PING_189 = result.servers[i].ping_189.toFixed(0);
|
||||
var PING_10086 = result.servers[i].ping_10086.toFixed(0);
|
||||
ExpandRow[0].children["expand_lost"].innerHTML = "丢包：联通/电信/移动: " + PING_10010 + "% / " + PING_189 + "% / " + PING_10086 + "%"
|
||||
$(ExpandRow).find("#expand_lost").html("丢包：联通/电信/移动: " + PING_10010 + "% / " + PING_189 + "% / " + PING_10086 + "%");
|
||||
|
||||
if (PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20)
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red");
|
||||
else if (PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10)
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-orange");
|
||||
else
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-success";
|
||||
TableRow.children["ping"].children[0].children[0].innerHTML = PING_10010 + "%💻" + PING_189 + "%💻" + PING_10086 + "%";
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-green");
|
||||
$(TableRow).find("#ping .layui-badge").html(PING_10010 + "%💻" + PING_189 + "%💻" + PING_10086 + "%");
|
||||
|
||||
// Custom
|
||||
if (result.servers[i].custom) {
|
||||
ExpandRow[0].children["expand_custom"].innerHTML = result.servers[i].custom
|
||||
$(ExpandRow).find("#expand_custom").html(result.servers[i].custom);
|
||||
} else {
|
||||
ExpandRow[0].children["expand_custom"].innerHTML = ""
|
||||
$(ExpandRow).find("#expand_custom").html("");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
d = new Date(result.updated*1000);
|
||||
d = new Date(result.updated * 1000);
|
||||
error = 0;
|
||||
}).fail(function(update_error) {
|
||||
}).fail(function (update_error) {
|
||||
if (!error) {
|
||||
$("#servers > tr.accordion-toggle").each(function(i) {
|
||||
$("#servers > tr.accordion-toggle").each(function (i) {
|
||||
var TableRow = $("#servers tr#r" + i)[0];
|
||||
var ExpandRow = $("#servers #rt" + i);
|
||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["uptime"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["uptime"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["load"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["load"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["network"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["network"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["traffic"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["traffic"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["cpu"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["cpu"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["memory"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["memory"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["hdd"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["hdd"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-error";
|
||||
TableRow.children["ping"].children[0].children[0].style.width = "100%";
|
||||
TableRow.children["ping"].children[0].children[0].innerHTML = "<small>错误</small>";
|
||||
if(ExpandRow.hasClass("in")) {
|
||||
ExpandRow.collapse("hide");
|
||||
}
|
||||
TableRow.setAttribute("data-target", "");
|
||||
$(TableRow).find("#online_status .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red").text("错误");
|
||||
$(TableRow).find("#month_traffic .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red").text("错误");
|
||||
$(TableRow).find("#uptime").html("<div class='layui-badge'>错误</div>");
|
||||
$(TableRow).find("#load").html("<div class='layui-badge'>错误</div>");
|
||||
$(TableRow).find("#network").html("<div class='layui-badge'>错误</div>");
|
||||
$(TableRow).find("#traffic").html("<div class='layui-badge'>错误</div>");
|
||||
$(TableRow).find("#cpu .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">错误</span>');
|
||||
$(TableRow).find("#memory .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">错误</span>');
|
||||
$(TableRow).find("#hdd .layui-progress-bar").alterClass("layui-bg-*").addClass("layui-bg-red").css("width", "100%").html('<span class="layui-progress-text">错误</span>');
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red").text("错误");
|
||||
$($(TableRow).attr("data-target")).parent().slideUp();
|
||||
$(TableRow).attr("data-target", "");
|
||||
server_status[i] = false;
|
||||
});
|
||||
}
|
||||
error = 1;
|
||||
$("#updated").html("更新错误.");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateTime() {
|
||||
|
|
@ -334,66 +335,68 @@ setInterval(uptime, 2000);
|
|||
setInterval(updateTime, 2000);
|
||||
|
||||
|
||||
// styleswitcher.js
|
||||
function setActiveStyleSheet(title, cookie=false) {
|
||||
var i, a, main;
|
||||
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
|
||||
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
|
||||
a.disabled = true;
|
||||
if(a.getAttribute("title") == title) a.disabled = false;
|
||||
}
|
||||
}
|
||||
if (true==cookie) {
|
||||
createCookie("style", title, 365);
|
||||
}
|
||||
}
|
||||
|
||||
function getActiveStyleSheet() {
|
||||
var i, a;
|
||||
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
|
||||
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
|
||||
for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
|
||||
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
|
||||
return a.getAttribute("title");
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function createCookie(name,value,days) {
|
||||
function createCookie(name, value, days) {
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
||||
var expires = "; expires="+date.toGMTString();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
var expires = "; expires=" + date.toGMTString();
|
||||
}
|
||||
else expires = "";
|
||||
document.cookie = name+"="+value+expires+"; path=/";
|
||||
document.cookie = name + "=" + value + expires + "; path=/";
|
||||
}
|
||||
|
||||
function readCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ')
|
||||
c = c.substring(1,c.length);
|
||||
while (c.charAt(0) == ' ')
|
||||
c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) == 0)
|
||||
return c.substring(nameEQ.length,c.length);
|
||||
return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
window.onload = function(e) {
|
||||
$(document).on('click', ".accordion-toggle", function () {
|
||||
$($(this).attr("data-target")).parent().slideToggle();
|
||||
});
|
||||
|
||||
function changeTheme(title, cookie = false) {
|
||||
if (title == 'dark') {
|
||||
$('#layui_theme_css').prop('href', 'css/dark.css');
|
||||
} else {
|
||||
$('#layui_theme_css').prop('href', 'css/light.css');
|
||||
}
|
||||
if (true == cookie) {
|
||||
createCookie("style", title, 365);
|
||||
}
|
||||
}
|
||||
window.changeTheme = changeTheme;
|
||||
|
||||
window.onload = function (e) {
|
||||
var cookie = readCookie("style");
|
||||
if (cookie && cookie != 'null' ) {
|
||||
setActiveStyleSheet(cookie);
|
||||
if (cookie && cookie != 'null') {
|
||||
changeTheme(cookie);
|
||||
} else {
|
||||
function handleChange (mediaQueryListEvent) {
|
||||
function handleChange(mediaQueryListEvent) {
|
||||
if (mediaQueryListEvent.matches) {
|
||||
setActiveStyleSheet('dark');
|
||||
changeTheme('dark');
|
||||
} else {
|
||||
setActiveStyleSheet('light');
|
||||
changeTheme('light');
|
||||
}
|
||||
}
|
||||
const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||
mediaQueryListDark.addEventListener("change",handleChange);
|
||||
changeTheme(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||
mediaQueryListDark.addEventListener("change", handleChange);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 321 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue