mirror of https://github.com/cppla/ServerStatus
update all
cppla
parent
705a957606
commit
b3adc6b782
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
202
web/css/dark.css
202
web/css/dark.css
|
|
@ -1,48 +1,168 @@
|
||||||
body { background: #212e36 url('../img/dark.png'); color: #dcdcdc; }
|
body {
|
||||||
.navbar { min-height: 40px; }
|
background: #212e36 url('../img/dark.png') repeat;
|
||||||
.navbar-brand { color: #FFF !important; padding: 10px; font-size: 20px; }
|
color: #dcdcdc;
|
||||||
.dropdown .dropdown-toggle { padding-bottom: 10px; padding-top: 10px; }
|
font-size: 15px;
|
||||||
.dropdown-menu > li > a { color: #FFF !important; background-color: #222222 !important; }
|
padding-top: 70px;
|
||||||
.dropdown-menu > li > a:hover { color: #FFF !important; background: #000 !important; }
|
padding-bottom: 30px;
|
||||||
.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; }
|
.navbar {
|
||||||
.table { background: #363b40; margin-bottom: 0; border-collapse: collapse; border-radius: 3px; }
|
min-height: 40px;
|
||||||
.table th { text-align: center; }
|
background-color: #1B1B1B;
|
||||||
.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; }
|
.navbar-brand {
|
||||||
.progress { margin-bottom: 0; background: #363b40; }
|
color: #FFF !important;
|
||||||
.table-hover > tbody > tr:hover > td { background: #414141; }
|
padding: 10px;
|
||||||
tr.even.expandRow > :hover { background: #212e36 !important; }
|
font-size: 20px;
|
||||||
tr.odd.expandRow > :hover { background: #212e36 !important; }
|
}
|
||||||
.expandRow > td { padding: 0 !important; border-top: 0px !important; }
|
|
||||||
#month_traffic { min-width: 85px; max-width: 95px;}
|
.dropdown .dropdown-toggle {
|
||||||
#network { min-width: 138px; }
|
padding-bottom: 10px;
|
||||||
#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; }
|
padding-top: 10px;
|
||||||
#ping { max-width: 115px; }
|
}
|
||||||
|
|
||||||
|
.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: linear-gradient(to bottom, #212e36, #212e36);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
border-color: #252525;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background: #212e36;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #212e36;
|
||||||
|
box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
background-color: #212e36 !important;
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th, .table td {
|
||||||
|
background-color: #212e36 !important;
|
||||||
|
color: #dcdcdc !important;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped tbody tr:nth-child(even) {
|
||||||
|
background-color: #212e36;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped tbody tr:nth-child(odd) {
|
||||||
|
background-color: #212e36;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: #363b40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#month_traffic {
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network {
|
||||||
|
width: 138px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpu, #ram, #hdd {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ping {
|
||||||
|
width: 115px;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1200px) {
|
@media only screen and (max-width: 1200px) {
|
||||||
#type { display:none; visibility:hidden; }
|
#type, #location, #uptime, #ping {
|
||||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
display: none;
|
||||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
visibility: hidden;
|
||||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
body { font-size: 10px; }
|
body {
|
||||||
.content { padding: 0; }
|
font-size: 10px;
|
||||||
#type { 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; }
|
|
||||||
}
|
}
|
||||||
|
.content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#cpu, #ram, #hdd {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
#month_traffic, #type, #location, #uptime, #ping {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 620px) {
|
@media only screen and (max-width: 620px) {
|
||||||
body { font-size: 10px; }
|
body {
|
||||||
.content { padding: 0; }
|
font-size: 10px;
|
||||||
#month_traffic { display:none; visibility:hidden; }
|
}
|
||||||
#type { display:none; visibility:hidden; }
|
.content {
|
||||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
padding: 0;
|
||||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
}
|
||||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
#cpu, #ram, #hdd {
|
||||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
width: 50px;
|
||||||
|
}
|
||||||
|
#month_traffic, #type, #location, #uptime, #traffic, #ping {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .nav-link {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .dropdown-toggle::after {
|
||||||
|
vertical-align: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
@ -1,45 +1,149 @@
|
||||||
body { background: #ebebeb url('../img/light.png'); }
|
body {
|
||||||
.navbar { min-height: 40px; }
|
background: #ebebeb url('../img/light.png') repeat;
|
||||||
.navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
|
font-size: 15px;
|
||||||
.dropdown .dropdown-toggle { padding-bottom: 10px; padding-top: 10px; }
|
padding-top: 70px;
|
||||||
.navbar-inverse .navbar-brand { color: #fff; padding: 10px; font-size: 20px; }
|
padding-bottom: 30px;
|
||||||
.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; }
|
.navbar {
|
||||||
.table-striped tbody > tr.even > td, .table-striped tbody > tr.even > th { background-color: #F9F9F9; }
|
min-height: 40px;
|
||||||
.table-striped tbody > tr.odd > td, .table-striped tbody > tr.odd > th { background-color: #FFF; }
|
background-color: #333;
|
||||||
.progress { margin-bottom: 0; }
|
}
|
||||||
.progress-bar { color: #000; }
|
|
||||||
.table-hover > tbody > tr:hover > td { background: #E6E6E6; }
|
.navbar-brand {
|
||||||
tr.even.expandRow > :hover { background: #F9F9F9 !important; }
|
color: #fff;
|
||||||
tr.odd.expandRow > :hover { background: #FFF !important; }
|
padding: 10px;
|
||||||
.expandRow > td { padding: 0 !important; border-top: 0px !important; }
|
font-size: 20px;
|
||||||
#month_traffic { min-width: 85px; max-width: 95px;}
|
}
|
||||||
#network { width: 138px; }
|
|
||||||
#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; }
|
.dropdown .dropdown-toggle {
|
||||||
#ping { max-width: 115px; }
|
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 solid #cecece;
|
||||||
|
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;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th, .table td {
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped tbody tr:nth-child(even) {
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped tbody tr:nth-child(odd) {
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
color: #000;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#month_traffic {
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network {
|
||||||
|
width: 138px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cpu, #ram, #hdd {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ping {
|
||||||
|
width: 115px;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1200px) {
|
@media only screen and (max-width: 1200px) {
|
||||||
#type { display:none; visibility:hidden; }
|
#type, #location, #uptime, #ping {
|
||||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
display: none;
|
||||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
visibility: hidden;
|
||||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 720px) {
|
@media only screen and (max-width: 720px) {
|
||||||
body { font-size: 10px; }
|
body {
|
||||||
.content { padding: 0; }
|
font-size: 10px;
|
||||||
#type { 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; }
|
|
||||||
}
|
}
|
||||||
|
.content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#cpu, #ram, #hdd {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
#month_traffic, #type, #location, #uptime, #ping {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 620px) {
|
@media only screen and (max-width: 620px) {
|
||||||
body { font-size: 10px; }
|
body {
|
||||||
.content { padding: 0; }
|
font-size: 10px;
|
||||||
#month_traffic { display:none; visibility:hidden; }
|
}
|
||||||
#type { display:none; visibility:hidden; }
|
.content {
|
||||||
#location, tr td:nth-child(5) { display:none; visibility:hidden; }
|
padding: 0;
|
||||||
#uptime, tr td:nth-child(6) { display:none; visibility:hidden; }
|
}
|
||||||
#traffic, tr td:nth-child(9) { display:none; visibility:hidden; }
|
#cpu, #ram, #hdd {
|
||||||
#ping, tr td:nth-child(13) { display:none; visibility:hidden; }
|
width: 50px;
|
||||||
|
}
|
||||||
|
#month_traffic, #type, #location, #uptime, #traffic, #ping {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .nav-link {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav .dropdown-toggle::after {
|
||||||
|
vertical-align: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
@ -4,41 +4,35 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla">
|
<meta name="description" content="云监控,ServerStatus中文版,ServerStatus,ServerStatus cppla">
|
||||||
<meta name="author" content="ServerStatus">
|
<meta name="author" content="ServerStatus Theme by AI">
|
||||||
<title>云监控</title>
|
<title>云监控</title>
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<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/light.css" title="light">
|
||||||
<link rel="stylesheet" href="css/dark.css" title="dark">
|
<link rel="stylesheet" href="css/dark.css" title="dark">
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
padding-top: 70px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
||||||
<span class="sr-only">Toggle navigation</span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
</button>
|
|
||||||
<a class="navbar-brand" href="#">云监控</a>
|
<a class="navbar-brand" href="#">云监控</a>
|
||||||
</div>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<div class="navbar-collapse collapse">
|
<span class="navbar-toggler-icon"></span>
|
||||||
<ul class="nav navbar-nav">
|
</button>
|
||||||
<li><a href="#server" data-toggle="tab">首页</a></li>
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<li><a href="#monitor" data-toggle="tab">服务</a></li>
|
<ul class="navbar-nav">
|
||||||
<li>
|
<li class="nav-item">
|
||||||
<a href="#" data-toggle="dropdown">风格 <b class="caret"></b></a>
|
<a class="nav-link" href="#server" data-bs-toggle="tab">首页</a>
|
||||||
<ul class="dropdown-menu">
|
</li>
|
||||||
<li><a href="#" onclick="setActiveStyleSheet('dark', true)">黑夜</a></li>
|
<li class="nav-item">
|
||||||
<li><a href="#" onclick="setActiveStyleSheet('light', true)">白天</a></li>
|
<a class="nav-link" href="#monitor" data-bs-toggle="tab">服务</a>
|
||||||
<li><a href="/index3.html">简洁</a></li>
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
风格
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||||
|
<li><a class="dropdown-item" href="#" onclick="setActiveStyleSheet('dark', true)">黑夜</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#" onclick="setActiveStyleSheet('light', true)">白天</a></li>
|
||||||
|
<li><a class="dropdown-item" href="/index3.html">简洁</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -58,9 +52,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="tab-pane fade in active" id="server">
|
<div class="tab-pane fade show active" id="server">
|
||||||
<!--主机-->
|
<!--主机-->
|
||||||
<table class="table table-striped table-condensed table-hover">
|
<table class="table table-striped table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th id="online_status" style="text-align: center;">🔗协议</th>
|
<th id="online_status" style="text-align: center;">🔗协议</th>
|
||||||
|
|
@ -85,7 +79,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane fade" id="monitor">
|
<div class="tab-pane fade" id="monitor">
|
||||||
<!--服务-->
|
<!--服务-->
|
||||||
<table class="table table-striped table-condensed table-hover">
|
<table class="table table-striped table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th id="monitor_status" style="text-align: center;">🔗协议</th>
|
<th id="monitor_status" style="text-align: center;">🔗协议</th>
|
||||||
|
|
@ -111,8 +105,7 @@
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="js/jquery.min.js"></script>
|
<script src="js/bootstrap.bundle.min.js"></script>
|
||||||
<script src="js/bootstrap.min.js"></script>
|
|
||||||
<script src="js/serverstatus.js"></script>
|
<script src="js/serverstatus.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -19,19 +19,27 @@ function bytesToSize(bytes, precision, si = false) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function uptime() {
|
function uptime() {
|
||||||
$.getJSON("json/stats.json", function(result) {
|
fetch("json/stats.json")
|
||||||
$("#loading-notice").remove();
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
document.getElementById("loading-notice")?.remove();
|
||||||
if (result.reload) setTimeout(location.reload, 1000);
|
if (result.reload) setTimeout(location.reload, 1000);
|
||||||
|
|
||||||
result.servers.forEach((server, i) => {
|
result.servers.forEach((server, i) => {
|
||||||
let TableRow = $("#servers tr#r" + i);
|
let TableRow = document.querySelector(`#servers tr#r${i}`);
|
||||||
let MableRow = $("#monitors tr#r" + i);
|
let MableRow = document.querySelector(`#monitors tr#r${i}`);
|
||||||
let ExpandRow = $("#servers #rt" + i);
|
let ExpandRow = document.querySelector(`#servers #rt${i}`);
|
||||||
let hack = i % 2 ? "odd" : "even";
|
let hack = i % 2 ? "odd" : "even";
|
||||||
|
|
||||||
if (!TableRow.length) {
|
if (!TableRow) {
|
||||||
$("#servers").append(
|
document.getElementById("servers").insertAdjacentHTML(
|
||||||
`<tr id="r${i}" data-toggle="collapse" data-target="#rt${i}" class="accordion-toggle ${hack}">
|
"beforeend",
|
||||||
|
`<tr id="r${i}" data-bs-toggle="collapse" data-bs-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="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="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="name">加载中</td>
|
||||||
|
|
@ -53,129 +61,230 @@ function uptime() {
|
||||||
<div id="expand_ping">加载中</div>
|
<div id="expand_ping">加载中</div>
|
||||||
</div></td></tr>`
|
</div></td></tr>`
|
||||||
);
|
);
|
||||||
TableRow = $("#servers tr#r" + i);
|
TableRow = document.querySelector(`#servers tr#r${i}`);
|
||||||
ExpandRow = $("#servers #rt" + i);
|
ExpandRow = document.querySelector(`#servers #rt${i}`);
|
||||||
server_status[i] = true;
|
server_status[i] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!MableRow.length) {
|
if (!MableRow) {
|
||||||
$("#monitors").append(
|
document.getElementById("monitors").insertAdjacentHTML(
|
||||||
`<tr id="r${i}" data-target="#rt${i}" class="accordion-toggle ${hack}">
|
"beforeend",
|
||||||
|
`<tr id="r${i}" data-bs-target="#rt${i}" class="accordion-toggle ${hack}">
|
||||||
<td id="monitor_status"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
<td id="monitor_status"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
<td id="monitor_node">加载中</td>
|
<td id="monitor_node">加载中</td>
|
||||||
<td id="monitor_location">加载中</td>
|
<td id="monitor_location">加载中</td>
|
||||||
<td id="monitor_text">加载中</td>
|
<td id="monitor_text">加载中</td>
|
||||||
</tr>`
|
</tr>`
|
||||||
);
|
);
|
||||||
MableRow = $("#monitors tr#r" + i);
|
MableRow = document.querySelector(`#monitors tr#r${i}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
TableRow.attr("data-target", "#rt" + i);
|
TableRow.setAttribute("data-bs-target", `#rt${i}`);
|
||||||
MableRow.attr("data-target", "#rt" + i);
|
MableRow.setAttribute("data-bs-target", `#rt${i}`);
|
||||||
server_status[i] = true;
|
server_status[i] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const statusClass = server.online4 || server.online6 ? "progress-bar progress-bar-success" : "progress-bar progress-bar-danger";
|
const statusClass = server.online4 || server.online6 ? "progress-bar progress-bar-success" : "progress-bar progress-bar-danger";
|
||||||
const statusText = server.online4 && server.online6 ? "双栈" : server.online4 ? "IPv4" : server.online6 ? "IPv6" : "关闭";
|
const statusText = server.online4 && server.online6 ? "双栈" : server.online4 ? "IPv4" : server.online6 ? "IPv6" : "关闭";
|
||||||
|
|
||||||
TableRow.find("#online_status .progress-bar").attr("class", statusClass).html(`<small>${statusText}</small>`);
|
if (TableRow) {
|
||||||
MableRow.find("#monitor_status .progress-bar").attr("class", statusClass).html(`<small>${statusText}</small>`);
|
const onlineStatusBar = TableRow.querySelector("#online_status .progress-bar");
|
||||||
|
if (onlineStatusBar) {
|
||||||
|
onlineStatusBar.setAttribute("class", statusClass);
|
||||||
|
onlineStatusBar.innerHTML = `<small>${statusText}</small>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
TableRow.find("#name").html(server.name);
|
if (MableRow) {
|
||||||
MableRow.find("#monitor_node").html(server.name);
|
const monitorStatusBar = MableRow.querySelector("#monitor_status .progress-bar");
|
||||||
TableRow.find("#type").html(server.type);
|
if (monitorStatusBar) {
|
||||||
TableRow.find("#location").html(server.location);
|
monitorStatusBar.setAttribute("class", statusClass);
|
||||||
MableRow.find("#monitor_location").html(server.location);
|
monitorStatusBar.innerHTML = `<small>${statusText}</small>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (TableRow) {
|
||||||
|
TableRow.querySelector("#name").innerHTML = server.name;
|
||||||
|
TableRow.querySelector("#type").innerHTML = server.type;
|
||||||
|
TableRow.querySelector("#location").innerHTML = server.location;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (MableRow) {
|
||||||
|
MableRow.querySelector("#monitor_node").innerHTML = server.name;
|
||||||
|
MableRow.querySelector("#monitor_location").innerHTML = server.location;
|
||||||
|
}
|
||||||
|
|
||||||
if (!server.online4 && !server.online6) {
|
if (!server.online4 && !server.online6) {
|
||||||
if (server_status[i]) {
|
if (server_status[i]) {
|
||||||
TableRow.find("#uptime").html("–");
|
if (TableRow) {
|
||||||
TableRow.find("#load").html("–");
|
TableRow.querySelector("#uptime").innerHTML = "–";
|
||||||
TableRow.find("#network").html("–");
|
TableRow.querySelector("#load").innerHTML = "–";
|
||||||
TableRow.find("#traffic").html("–");
|
TableRow.querySelector("#network").innerHTML = "–";
|
||||||
TableRow.find("#month_traffic .progress-bar").attr("class", "progress-bar progress-bar-warning").html("<small>关闭</small>");
|
TableRow.querySelector("#traffic").innerHTML = "–";
|
||||||
TableRow.find("#cpu .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
const monthTrafficBar = TableRow.querySelector("#month_traffic .progress-bar");
|
||||||
TableRow.find("#memory .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
if (monthTrafficBar) {
|
||||||
TableRow.find("#hdd .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
monthTrafficBar.setAttribute("class", "progress-bar progress-bar-warning");
|
||||||
TableRow.find("#ping .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
monthTrafficBar.innerHTML = "<small>关闭</small>";
|
||||||
MableRow.find("#monitor_text").html("-");
|
}
|
||||||
if (ExpandRow.hasClass("in")) ExpandRow.collapse("hide");
|
const cpuBar = TableRow.querySelector("#cpu .progress-bar");
|
||||||
TableRow.attr("data-target", "");
|
if (cpuBar) {
|
||||||
MableRow.attr("data-target", "");
|
cpuBar.setAttribute("class", "progress-bar progress-bar-danger");
|
||||||
|
cpuBar.style.width = "100%";
|
||||||
|
cpuBar.innerHTML = "<small>关闭</small>";
|
||||||
|
}
|
||||||
|
const memoryBar = TableRow.querySelector("#memory .progress-bar");
|
||||||
|
if (memoryBar) {
|
||||||
|
memoryBar.setAttribute("class", "progress-bar progress-bar-danger");
|
||||||
|
memoryBar.style.width = "100%";
|
||||||
|
memoryBar.innerHTML = "<small>关闭</small>";
|
||||||
|
}
|
||||||
|
const hddBar = TableRow.querySelector("#hdd .progress-bar");
|
||||||
|
if (hddBar) {
|
||||||
|
hddBar.setAttribute("class", "progress-bar progress-bar-danger");
|
||||||
|
hddBar.style.width = "100%";
|
||||||
|
hddBar.innerHTML = "<small>关闭</small>";
|
||||||
|
}
|
||||||
|
const pingBar = TableRow.querySelector("#ping .progress-bar");
|
||||||
|
if (pingBar) {
|
||||||
|
pingBar.setAttribute("class", "progress-bar progress-bar-danger");
|
||||||
|
pingBar.style.width = "100%";
|
||||||
|
pingBar.innerHTML = "<small>关闭</small>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (MableRow) {
|
||||||
|
MableRow.querySelector("#monitor_text").innerHTML = "-";
|
||||||
|
}
|
||||||
|
if (ExpandRow && ExpandRow.classList.contains("show")) ExpandRow.classList.remove("show");
|
||||||
|
if (TableRow) TableRow.setAttribute("data-bs-target", "");
|
||||||
|
if (MableRow) MableRow.setAttribute("data-bs-target", "");
|
||||||
server_status[i] = false;
|
server_status[i] = false;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (!server_status[i]) {
|
if (!server_status[i]) {
|
||||||
TableRow.attr("data-target", "#rt" + i);
|
if (TableRow) TableRow.setAttribute("data-bs-target", `#rt${i}`);
|
||||||
MableRow.attr("data-target", "#rt" + i);
|
if (MableRow) MableRow.setAttribute("data-bs-target", `#rt${i}`);
|
||||||
server_status[i] = true;
|
server_status[i] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const trafficdiff_in = server.network_in - server.last_network_in;
|
const trafficdiff_in = server.network_in - server.last_network_in;
|
||||||
const trafficdiff_out = server.network_out - server.last_network_out;
|
const trafficdiff_out = server.network_out - server.last_network_out;
|
||||||
const monthtraffic = `${bytesToSize(trafficdiff_in, 1, true)} | ${bytesToSize(trafficdiff_out, 1, true)}`;
|
const monthtraffic = `${bytesToSize(trafficdiff_in, 1, true)} | ${bytesToSize(trafficdiff_out, 1, true)}`;
|
||||||
TableRow.find("#month_traffic .progress-bar").attr("class", "progress-bar progress-bar-success").html(`<small>${monthtraffic}</small>`);
|
if (TableRow) {
|
||||||
|
const monthTrafficBar = TableRow.querySelector("#month_traffic .progress-bar");
|
||||||
|
if (monthTrafficBar) {
|
||||||
|
monthTrafficBar.setAttribute("class", "progress-bar progress-bar-success");
|
||||||
|
monthTrafficBar.innerHTML = `<small>${monthtraffic}</small>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
TableRow.find("#uptime").html(server.uptime);
|
if (TableRow) TableRow.querySelector("#uptime").innerHTML = server.uptime;
|
||||||
TableRow.find("#load").html(server.load_1 == -1 ? "–" : server.load_1.toFixed(2));
|
if (TableRow) TableRow.querySelector("#load").innerHTML = server.load_1 == -1 ? "–" : server.load_1.toFixed(2);
|
||||||
|
|
||||||
const netstr = `${bytesToSize(server.network_rx, 1, true)} | ${bytesToSize(server.network_tx, 1, true)}`;
|
const netstr = `${bytesToSize(server.network_rx, 1, true)} | ${bytesToSize(server.network_tx, 1, true)}`;
|
||||||
TableRow.find("#network").html(netstr);
|
if (TableRow) TableRow.querySelector("#network").innerHTML = netstr;
|
||||||
|
|
||||||
const trafficstr = `${bytesToSize(server.network_in, 1, true)} | ${bytesToSize(server.network_out, 1, true)}`;
|
const trafficstr = `${bytesToSize(server.network_in, 1, true)} | ${bytesToSize(server.network_out, 1, true)}`;
|
||||||
TableRow.find("#traffic").html(trafficstr);
|
if (TableRow) TableRow.querySelector("#traffic").innerHTML = trafficstr;
|
||||||
|
|
||||||
const cpuClass = server.cpu >= 90 ? "progress-bar progress-bar-danger" : server.cpu >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
const cpuClass = server.cpu >= 90 ? "progress-bar progress-bar-danger" : server.cpu >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
TableRow.find("#cpu .progress-bar").attr("class", cpuClass).css("width", `${server.cpu}%`).html(`${server.cpu}%`);
|
if (TableRow) {
|
||||||
|
const cpuBar = TableRow.querySelector("#cpu .progress-bar");
|
||||||
|
if (cpuBar) {
|
||||||
|
cpuBar.setAttribute("class", cpuClass);
|
||||||
|
cpuBar.style.width = `${server.cpu}%`;
|
||||||
|
cpuBar.innerHTML = `${server.cpu}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const Mem = ((server.memory_used / server.memory_total) * 100).toFixed(0);
|
const Mem = ((server.memory_used / server.memory_total) * 100).toFixed(0);
|
||||||
const memClass = Mem >= 90 ? "progress-bar progress-bar-danger" : Mem >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
const memClass = Mem >= 90 ? "progress-bar progress-bar-danger" : Mem >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
TableRow.find("#memory .progress-bar").attr("class", memClass).css("width", `${Mem}%`).html(`${Mem}%`);
|
if (TableRow) {
|
||||||
ExpandRow.find("#expand_mem").html(`内存|虚存: ${bytesToSize(server.memory_used * 1024, 1)} / ${bytesToSize(server.memory_total * 1024, 1)} | ${bytesToSize(server.swap_used * 1024, 0)} / ${bytesToSize(server.swap_total * 1024, 0)}`);
|
const memoryBar = TableRow.querySelector("#memory .progress-bar");
|
||||||
|
if (memoryBar) {
|
||||||
|
memoryBar.setAttribute("class", memClass);
|
||||||
|
memoryBar.style.width = `${Mem}%`;
|
||||||
|
memoryBar.innerHTML = `${Mem}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (ExpandRow) ExpandRow.querySelector("#expand_mem").innerHTML = `内存|虚存: ${bytesToSize(server.memory_used * 1024, 1)} / ${bytesToSize(server.memory_total * 1024, 1)} | ${bytesToSize(server.swap_used * 1024, 0)} / ${bytesToSize(server.swap_total * 1024, 0)}`;
|
||||||
|
|
||||||
const HDD = ((server.hdd_used / server.hdd_total) * 100).toFixed(0);
|
const HDD = ((server.hdd_used / server.hdd_total) * 100).toFixed(0);
|
||||||
const hddClass = HDD >= 90 ? "progress-bar progress-bar-danger" : HDD >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
const hddClass = HDD >= 90 ? "progress-bar progress-bar-danger" : HDD >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
TableRow.find("#hdd .progress-bar").attr("class", hddClass).css("width", `${HDD}%`).html(`${HDD}%`);
|
if (TableRow) {
|
||||||
|
const hddBar = TableRow.querySelector("#hdd .progress-bar");
|
||||||
|
if (hddBar) {
|
||||||
|
hddBar.setAttribute("class", hddClass);
|
||||||
|
hddBar.style.width = `${HDD}%`;
|
||||||
|
hddBar.innerHTML = `${HDD}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
const io = `${bytesToSize(server.io_read, 0, true)} / ${bytesToSize(server.io_write, 0, true)}`;
|
const io = `${bytesToSize(server.io_read, 0, true)} / ${bytesToSize(server.io_write, 0, true)}`;
|
||||||
ExpandRow.find("#expand_hdd").html(`硬盘|读写: ${bytesToSize(server.hdd_used * 1024 * 1024, 2)} / ${bytesToSize(server.hdd_total * 1024 * 1024, 2)} | ${io}`);
|
if (ExpandRow) ExpandRow.querySelector("#expand_hdd").innerHTML = `硬盘|读写: ${bytesToSize(server.hdd_used * 1024 * 1024, 2)} / ${bytesToSize(server.hdd_total * 1024 * 1024, 2)} | ${io}`;
|
||||||
|
|
||||||
ExpandRow.find("#expand_tupd").html(`TCP/UDP/进/线: ${server.tcp_count} / ${server.udp_count} / ${server.process_count} / ${server.thread_count}`);
|
if (ExpandRow) ExpandRow.querySelector("#expand_tupd").innerHTML = `TCP/UDP/进/线: ${server.tcp_count} / ${server.udp_count} / ${server.process_count} / ${server.thread_count}`;
|
||||||
|
|
||||||
const PING_10010 = server.ping_10010.toFixed(0);
|
const PING_10010 = server.ping_10010.toFixed(0);
|
||||||
const PING_189 = server.ping_189.toFixed(0);
|
const PING_189 = server.ping_189.toFixed(0);
|
||||||
const PING_10086 = server.ping_10086.toFixed(0);
|
const PING_10086 = server.ping_10086.toFixed(0);
|
||||||
const pingClass = PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20 ? "progress-bar progress-bar-danger" : PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
const pingClass = PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20 ? "progress-bar progress-bar-danger" : PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
TableRow.find("#ping .progress-bar").attr("class", pingClass).html(`${PING_10010}%💻${PING_189}%💻${PING_10086}%`);
|
if (TableRow) {
|
||||||
ExpandRow.find("#expand_ping").html(`CU/CT/CM: ${server.time_10010}ms (${PING_10010}%) / ${server.time_189}ms (${PING_189}%) / ${server.time_10086}ms (${PING_10086}%)`);
|
const pingBar = TableRow.querySelector("#ping .progress-bar");
|
||||||
|
if (pingBar) {
|
||||||
|
pingBar.setAttribute("class", pingClass);
|
||||||
|
pingBar.innerHTML = `${PING_10010}%💻${PING_189}%💻${PING_10086}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (ExpandRow) ExpandRow.querySelector("#expand_ping").innerHTML = `CU/CT/CM: ${server.time_10010}ms (${PING_10010}%) / ${server.time_189}ms (${PING_189}%) / ${server.time_10086}ms (${PING_10086}%)`;
|
||||||
|
|
||||||
MableRow.find("#monitor_text").html(server.custom);
|
if (MableRow) MableRow.querySelector("#monitor_text").innerHTML = server.custom;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
d = new Date(result.updated * 1000);
|
d = new Date(result.updated * 1000);
|
||||||
error = 0;
|
error = 0;
|
||||||
}).fail(function() {
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Fetch error: ", error);
|
||||||
if (!error) {
|
if (!error) {
|
||||||
$("#servers > tr.accordion-toggle").each(function(i) {
|
document.querySelectorAll("#servers > tr.accordion-toggle").forEach((TableRow, i) => {
|
||||||
const TableRow = $("#servers tr#r" + i);
|
const MableRow = document.querySelector(`#monitors tr#r${i}`);
|
||||||
const MableRow = $("#monitors tr#r" + i);
|
const ExpandRow = document.querySelector(`#servers #rt${i}`);
|
||||||
const ExpandRow = $("#servers #rt" + i);
|
|
||||||
TableRow.find(".progress-bar").attr("class", "progress-bar progress-bar-error").html("<small>错误</small>");
|
if (TableRow && MableRow) {
|
||||||
MableRow.find(".progress-bar").attr("class", "progress-bar progress-bar-error").html("<small>错误</small>");
|
TableRow.querySelectorAll(".progress-bar").forEach(bar => {
|
||||||
if (ExpandRow.hasClass("in")) ExpandRow.collapse("hide");
|
if (bar) {
|
||||||
TableRow.attr("data-target", "");
|
bar.setAttribute("class", "progress-bar progress-bar-error");
|
||||||
MableRow.attr("data-target", "");
|
bar.innerHTML = "<small>错误</small>";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
MableRow.querySelectorAll(".progress-bar").forEach(bar => {
|
||||||
|
if (bar) {
|
||||||
|
bar.setAttribute("class", "progress-bar progress-bar-error");
|
||||||
|
bar.innerHTML = "<small>错误</small>";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (ExpandRow && ExpandRow.classList.contains("show")) {
|
||||||
|
ExpandRow.classList.remove("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
TableRow.setAttribute("data-bs-target", "");
|
||||||
|
MableRow.setAttribute("data-bs-target", "");
|
||||||
server_status[i] = false;
|
server_status[i] = false;
|
||||||
|
} else {
|
||||||
|
console.error(`TableRow or MableRow is undefined for index ${i}`);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
error = 1;
|
error = 1;
|
||||||
$("#updated").html("更新错误.");
|
document.getElementById("updated").innerHTML = "更新错误.";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTime() {
|
function updateTime() {
|
||||||
if (!error) $("#updated").html("最后更新: " + timeSince(d));
|
if (!error) document.getElementById("updated").innerHTML = "最后更新: " + timeSince(d);
|
||||||
}
|
}
|
||||||
|
|
||||||
uptime();
|
uptime();
|
||||||
|
|
@ -223,4 +332,20 @@ window.onload = function() {
|
||||||
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||||
mediaQueryListDark.addEventListener("change", handleChange);
|
mediaQueryListDark.addEventListener("change", handleChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理标签页切换
|
||||||
|
const tabs = document.querySelectorAll('.nav-link');
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', function(event) {
|
||||||
|
if (this.id === 'navbarDropdown') {
|
||||||
|
return; // 阻止“风格”标签的默认行为
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
const target = this.getAttribute('href');
|
||||||
|
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('show', 'active'));
|
||||||
|
document.querySelector(target).classList.add('show', 'active');
|
||||||
|
tabs.forEach(t => t.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue