mirror of
https://github.com//cppla/ServerStatus
synced 2025-09-23 02:12:22 +08:00
更改web页面为layui模板
This commit is contained in:
parent
e34ed05901
commit
e00fe25ec4
6
web/css/bootstrap-theme.min.css
vendored
6
web/css/bootstrap-theme.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
6
web/css/bootstrap.min.css
vendored
6
web/css/bootstrap.min.css
vendored
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 ![]() (image error) Size: 1.9 KiB |
182
web/index.html
182
web/index.html
@ -1,110 +1,80 @@
|
||||
<!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">
|
||||
<noscript>
|
||||
<div class="alert alert-danger" style="text-align: center;">
|
||||
<strong>Enable JavaScript</strong> , please do it.
|
||||
</div>
|
||||
</noscript>
|
||||
<div style="text-align: center;">
|
||||
警告:如果出现此消息,请确保您已启用Javascript! <br />否则云监控主服务没启动或已关闭.
|
||||
</div>
|
||||
<p></p>
|
||||
</div>
|
||||
<table class="table table-striped table-condensed table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="online_status" style="text-align: center;">🔗协议</th>
|
||||
<th id="month_traffic" style="text-align: center;">📊月流量↓|↑</th>
|
||||
<th id="name">📌节点</th>
|
||||
<th id="type">🗂️虚拟化</th>
|
||||
<th id="location">🌍位置</th>
|
||||
<th id="uptime">⏱️在线</th>
|
||||
<th id="load">负载</th>
|
||||
<th id="network">🚦网络↓|↑</th>
|
||||
<th id="traffic">📋总流量↓|↑</th>
|
||||
<th id="cpu">🎯核芯</th>
|
||||
<th id="ram">⚡️内存</th>
|
||||
<th id="hdd">💾硬盘</th>
|
||||
<th id="ping">🌐CU|CT|CM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="servers">
|
||||
<!-- Servers here \o/ -->
|
||||
</tbody>
|
||||
</table>
|
||||
<br />
|
||||
<div id="updated">Updating...</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<script src="js/serverstatus.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<body>
|
||||
<div class="layui-hide">
|
||||
<h3>您不应该看到此提示,如果看到此提示说明您未能正确加载网站依赖,请启用js或换用其他浏览器</h3>
|
||||
</div>
|
||||
<noscript>
|
||||
<h3>您的浏览器不支持js,请启用js或换用其他浏览器</h3>
|
||||
</noscript>
|
||||
<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>
|
||||
</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">🔗协议</th>
|
||||
<th id="month_traffic">📊月流量↓|↑</th>
|
||||
<th id="name">📌节点</th>
|
||||
<th id="type">🗂️虚拟化</th>
|
||||
<th id="location">🌍位置</th>
|
||||
<th id="uptime">⏱️在线</th>
|
||||
<th id="load">负载</th>
|
||||
<th id="network">🚦网络↓|↑</th>
|
||||
<th id="traffic">📋总流量↓|↑</th>
|
||||
<th id="cpu">🎯核芯</th>
|
||||
<th id="ram">⚡️内存</th>
|
||||
<th id="hdd">💾硬盘</th>
|
||||
<th id="ping">🌐CU|CT|CM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="servers">
|
||||
<!-- Servers here \o/ -->
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<div id="updated" style="margin: 10px;">最后更新: 几秒前.</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
7
web/js/bootstrap.min.js
vendored
7
web/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
326
web/js/html5shiv.js
vendored
326
web/js/html5shiv.js
vendored
@ -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));
|
2
web/js/jquery.min.js
vendored
2
web/js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
5
web/js/respond.min.js
vendored
5
web/js/respond.min.js
vendored
@ -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";
|
||||
else
|
||||
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_in < 1024 * 1024 * 1024 * 1024)
|
||||
trafficstr += (result.servers[i].network_in / 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_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";
|
||||
else
|
||||
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
|
||||
// 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 + "%"
|
||||
// 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).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";
|
||||
else if (PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10)
|
||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
||||
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 + "%";
|
||||
if (PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20)
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-red");
|
||||
else if (PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10)
|
||||
$(TableRow).find("#ping .layui-badge").alterClass("layui-bg-*").addClass("layui-bg-orange");
|
||||
else
|
||||
$(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) {
|
||||
var cookie = readCookie("style");
|
||||
if (cookie && cookie != 'null' ) {
|
||||
setActiveStyleSheet(cookie);
|
||||
} else {
|
||||
function handleChange (mediaQueryListEvent) {
|
||||
if (mediaQueryListEvent.matches) {
|
||||
setActiveStyleSheet('dark');
|
||||
} else {
|
||||
setActiveStyleSheet('light');
|
||||
}
|
||||
}
|
||||
const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||
mediaQueryListDark.addEventListener("change",handleChange);
|
||||
}
|
||||
$(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') {
|
||||
changeTheme(cookie);
|
||||
} else {
|
||||
function handleChange(mediaQueryListEvent) {
|
||||
if (mediaQueryListEvent.matches) {
|
||||
changeTheme('dark');
|
||||
} else {
|
||||
changeTheme('light');
|
||||
}
|
||||
}
|
||||
const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
changeTheme(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||
mediaQueryListDark.addEventListener("change", handleChange);
|
||||
}
|
||||
}
|
||||
|
1
web/layui/css/layui.css
Normal file
1
web/layui/css/layui.css
Normal file
File diff suppressed because one or more lines are too long
BIN
web/layui/font/iconfont.eot
Normal file
BIN
web/layui/font/iconfont.eot
Normal file
Binary file not shown.
405
web/layui/font/iconfont.svg
Normal file
405
web/layui/font/iconfont.svg
Normal file
File diff suppressed because one or more lines are too long
After (image error) Size: 321 KiB |
BIN
web/layui/font/iconfont.ttf
Normal file
BIN
web/layui/font/iconfont.ttf
Normal file
Binary file not shown.
BIN
web/layui/font/iconfont.woff
Normal file
BIN
web/layui/font/iconfont.woff
Normal file
Binary file not shown.
BIN
web/layui/font/iconfont.woff2
Normal file
BIN
web/layui/font/iconfont.woff2
Normal file
Binary file not shown.
1
web/layui/layui.js
Normal file
1
web/layui/layui.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user