index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7. <title>服务器状态</title>
  8. <meta name="keywords" content="ServerStatus">
  9. <meta name="description" content="ServerStatus">
  10. <!-- Fix chrome language detection -->
  11. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  12. <meta http-equiv="Content-Language" content="zh" />
  13. <!-- Styles -->
  14. <link href="css/core.css" rel="stylesheet">
  15. <link href="css/main.css" rel="stylesheet">
  16. <link href="css/panel.css" rel="stylesheet">
  17. <link href="css/global.css" rel="stylesheet">
  18. <link href="css/font-awesome.min.css" rel="stylesheet">
  19. <style>
  20. @font-face {
  21. font-family: 'icons';
  22. src: url('fonts/icons/icons.eot');
  23. 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');
  24. font-weight: normal;
  25. font-style: normal;
  26. }
  27. </style>
  28. <!--[if lt IE 9]>
  29. <script src="/js/selectivizr-min.js"></script>
  30. <script src="/js/html5shiv.min.js"></script>
  31. <script src="/js/respond.min.js"></script>
  32. <![endif]-->
  33. </head>
  34. <body>
  35. <div class="container">
  36. <div id="loading-notice">
  37. <div class="progress progress-striped active">
  38. <div class="progress-bar progress-bar-warning" style="width: 100%;">加载中...</div>
  39. </div>
  40. <div style="text-align: center;">
  41. 如果出現此消息,請確保您已啟用Javascript! <br />否則雲監控主服務(服務端)未啟動或已關閉.
  42. </div>
  43. <p></p>
  44. </div>
  45. <table class="table table-striped">
  46. <thead>
  47. <tr>
  48. <th id="status4" style="text-align: center;">运行状态</th>
  49. <th id="name">节点名</th>
  50. <th id="type">类型</th>
  51. <th id="location">服务器位置</th>
  52. <th id="uptime">在线时间</th>
  53. <th id="load">负载</th>
  54. <th id="network">网络(B/s) ↓|↑</th>
  55. <th id="traffic">流量(B) ↓|↑</th>
  56. <th id="cpu">CPU</th>
  57. <th id="ram">RAM</th>
  58. <th id="hdd">ROM</th>
  59. </tr>
  60. </thead>
  61. <tbody id="servers">
  62. <!-- Servers here \o/ -->
  63. </tbody>
  64. </table>
  65. <br />
  66. <div id="updated" style="margin-left: 5px;">Updating...</div>
  67. </div>
  68. <div class="page-section">
  69. <div class="container">
  70. <div id='cards' class="row">
  71. <div class="col-lg-4 col-md-4 col-sm-4">
  72. <div class="panel panel-block panel-block-sm panel-location">
  73. <div class="location-header">
  74. <h3 class="h4"><img src="img/clients/singapore.png"> 新加坡 智能分流 1 <small>Singapore</small></h3>
  75. <i class="zmdi zmdi-check-circle text-success"></i>
  76. </div>
  77. <div class="location-progress">
  78. <div class="progress progress-sm">
  79. <div class="progress-bar" style="width: 92%;"></div>
  80. </div>
  81. </div>
  82. <ul class="location-info list-styled">
  83. <li><span class="list-label">状态:</span> 在线</li>
  84. <li><span class="list-label">空闲:</span> 92%</li>
  85. </ul>
  86. </div>
  87. </div>
  88. <div class="col-lg-4 col-md-4 col-sm-4">
  89. <div class="panel panel-block panel-block-sm panel-location">
  90. <div class="location-header">
  91. <h3 class="h4"><img src="img/clients/singapore.png"> 新加坡 智能分流 2<small>Singapore</small></h3>
  92. <i class="zmdi zmdi-check-circle text-success"></i>
  93. </div>
  94. <div class="location-progress">
  95. <div class="progress progress-sm">
  96. <div class="progress-bar" style="width: 98%;"></div>
  97. </div>
  98. </div>
  99. <ul class="location-info list-styled">
  100. <li><span class="list-label">状态:</span> OK</li>
  101. <li><span class="list-label">空闲:</span> 98%</li>
  102. </ul>
  103. </div>
  104. </div>
  105. <div class="col-lg-4 col-md-4 col-sm-4">
  106. <div class="panel panel-block panel-block-sm panel-location">
  107. <div class="location-header">
  108. <h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 1<small>USA-LA</small></h3>
  109. <i class="zmdi zmdi-check-circle text-success"></i>
  110. </div>
  111. <div class="location-progress">
  112. <div class="progress progress-sm">
  113. <div class="progress-bar" style="width: 90%;"></div>
  114. </div>
  115. </div>
  116. <ul class="location-info list-styled">
  117. <li><span class="list-label">状态:</span> OK</li>
  118. <li><span class="list-label">空闲:</span> 90%</li>
  119. </ul>
  120. </div>
  121. </div>
  122. <div class="col-lg-4 col-md-4 col-sm-4">
  123. <div class="panel panel-block panel-block-sm panel-location">
  124. <div class="location-header">
  125. <h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 2<small>USA-LA</small></h3>
  126. <i class="zmdi zmdi-check-circle text-success"></i>
  127. </div>
  128. <div class="location-progress">
  129. <div class="progress progress-sm">
  130. <div class="progress-bar" style="width: 83%;"></div>
  131. </div>
  132. </div>
  133. <ul class="location-info list-styled">
  134. <li><span class="list-label">状态:</span> OK</li>
  135. <li><span class="list-label">空闲:</span> 83%</li>
  136. </ul>
  137. </div>
  138. </div>
  139. <div class="col-lg-4 col-md-4 col-sm-4">
  140. <div class="panel panel-block panel-block-sm panel-location">
  141. <div class="location-header">
  142. <h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 3<small>USA-LA</small></h3>
  143. <i class="zmdi zmdi-check-circle text-success"></i>
  144. </div>
  145. <div class="location-progress">
  146. <div class="progress progress-sm">
  147. <div class="progress-bar" style="width: 98%;"></div>
  148. </div>
  149. </div>
  150. <ul class="location-info list-styled">
  151. <li><span class="list-label">状态:</span> OK</li>
  152. <li><span class="list-label">空闲:</span> 98%</li>
  153. </ul>
  154. </div>
  155. </div>
  156. <div class="col-lg-4 col-md-4 col-sm-4">
  157. <div class="panel panel-block panel-block-sm panel-location">
  158. <div class="location-header">
  159. <h3 class="h4"><img src="img/clients/usa.png"> 美国 智能分流 4<small>USA-LA</small></h3>
  160. <i class="zmdi zmdi-check-circle text-success"></i>
  161. </div>
  162. <div class="location-progress">
  163. <div class="progress progress-sm">
  164. <div class="progress-bar" style="width: 100%;"></div>
  165. </div>
  166. </div>
  167. <ul class="location-info list-styled">
  168. <li><span class="list-label">状态:</span> 维护中</li>
  169. <li><span class="list-label">空闲:</span> 100%</li>
  170. </ul>
  171. </div>
  172. </div>
  173. <div class="col-lg-4 col-md-4 col-sm-4">
  174. <div class="panel panel-block panel-block-sm panel-location">
  175. <div class="location-header">
  176. <h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 1<small>China-Hongkong</small></h3>
  177. <i class="zmdi zmdi-check-circle text-success"></i>
  178. </div>
  179. <div class="location-progress">
  180. <div class="progress progress-sm">
  181. <div class="progress-bar" style="width: 90%;"></div>
  182. </div>
  183. </div>
  184. <ul class="location-info list-styled">
  185. <li><span class="list-label">状态:</span> OK</li>
  186. <li><span class="list-label">空闲:</span> 90%</li>
  187. </ul>
  188. </div>
  189. </div>
  190. <div class="col-lg-4 col-md-4 col-sm-4">
  191. <div class="panel panel-block panel-block-sm panel-location">
  192. <div class="location-header">
  193. <h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 2<small>China-Hongkong</small></h3>
  194. <i class="zmdi zmdi-check-circle text-success"></i>
  195. </div>
  196. <div class="location-progress">
  197. <div class="progress progress-sm">
  198. <div class="progress-bar" style="width: 96%;"></div>
  199. </div>
  200. </div>
  201. <ul class="location-info list-styled">
  202. <li><span class="list-label">状态:</span> OK</li>
  203. <li><span class="list-label">空闲:</span> 96%</li>
  204. </ul>
  205. </div>
  206. </div>
  207. <div class="col-lg-4 col-md-4 col-sm-4">
  208. <div class="panel panel-block panel-block-sm panel-location">
  209. <div class="location-header">
  210. <h3 class="h4"><img src="img/clients/china.png"> 香港 智能分流 3<small>China-Hongkong-九龙</small></h3>
  211. <i class="zmdi zmdi-check-circle text-success"></i>
  212. </div>
  213. <div class="location-progress">
  214. <div class="progress progress-sm">
  215. <div class="progress-bar" style="width: 98%;"></div>
  216. </div>
  217. </div>
  218. <ul class="location-info list-styled">
  219. <li><span class="list-label">状态:</span> OK</li>
  220. <li><span class="list-label">空闲:</span> 98%</li>
  221. </ul>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <!-- Scripts -->
  228. <script src="js/jquery-1.10.2.min.js"></script>
  229. <script src="js/bootstrap.min.js"></script>
  230. <script src="js/serverstatus.js"></script>
  231. </body>
  232. </html>