ServerStatus/web/index.html

257 lines
12 KiB
HTML
Raw Permalink Normal View History

2020-02-10 23:06:49 +08:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>服务器状态</title>
<meta name="keywords" content="ServerStatus">
<meta name="description" content="ServerStatus">
<!-- Fix chrome language detection -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Language" content="zh" />
<!-- Styles -->
<link href="css/core.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/panel.css" rel="stylesheet">
<link href="css/global.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<style>
@font-face {
font-family: 'icons';
src: url('fonts/icons/icons.eot');
src: url('fonts/icons/icons.eot') format('embedded-opentype'), url('fonts/icons/icons.ttf') format('truetype'), url('fonts/icons/icons.woff') format('woff'), url('fonts/icons/icons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--[if lt IE 9]>
<script src="/js/selectivizr-min.js"></script>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="loading-notice">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width: 100%;">加载中...</div>
</div>
<div style="text-align: center;">
如果出現此消息請確保您已啟用Javascript <br />否則雲監控主服務(服務端)未啟動或已關閉.
</div>
<p></p>
</div>
<table class="table table-striped">
<thead>
<tr>
<th id="status4" 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">网络(B/s) ↓|↑</th>
<th id="traffic">流量(B) ↓|↑</th>
<th id="cpu">CPU</th>
<th id="ram">RAM</th>
<th id="hdd">ROM</th>
</tr>
</thead>
<tbody id="servers">
<!-- Servers here \o/ -->
</tbody>
</table>
<br />
<div id="updated" style="margin-left: 5px;">Updating...</div>
</div>
<div class="page-section">
<div class="container">
<div id='cards' class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/singapore.png"> 新加坡 智能分流 1 <small>Singapore</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 92%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> 在线</li>
<li><span class="list-label">空闲:</span> 92%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/singapore.png"> 新加坡 智能分流 2<small>Singapore</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 98%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 98%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 1<small>USA-LA</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 90%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 90%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 2<small>USA-LA</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 83%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 83%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 3<small>USA-LA</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 98%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 98%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 4<small>USA-LA</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> 维护中</li>
<li><span class="list-label">空闲:</span> 100%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 1<small>China-Hongkong</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 90%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 90%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 2<small>China-Hongkong</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 96%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 96%</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-block panel-block-sm panel-location">
<div class="location-header">
<h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 3<small>China-Hongkong-九龙</small></h3>
<i class="zmdi zmdi-check-circle text-success"></i>
</div>
<div class="location-progress">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 98%;"></div>
</div>
</div>
<ul class="location-info list-styled">
<li><span class="list-label">状态:</span> OK</li>
<li><span class="list-label">空闲:</span> 98%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/serverstatus.js"></script>
</body>
</html>