Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layui模板，比原来的要好很多 #220

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

layui模板，比原来的要好很多 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7ee69c9
更改web页面为layui模板
zeyudada May 1, 2023
2ab0907
修复主题自动保存
zeyudada May 1, 2023
6a97f5d
修复主题保存
zeyudada May 1, 2023
e00fe25
更改web页面为layui模板
zeyudada May 1, 2023
7d70cb3
Merge branch 'master' of https://github.com/zeyudada/ServerStatus
zeyudada May 1, 2023
74e65c9
Merge branch 'cppla:master' into master
zeyudada Jul 8, 2023
f734ba3
Layui主题
zeyudada Jul 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions web/css/bootstrap-theme.min.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion web/css/bootstrap-theme.min.css.map
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions web/css/bootstrap.min.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion web/css/bootstrap.min.css.map
View file
Open in desktop

This file was deleted.

556 changes: 487 additions & 69 deletions web/css/dark.css
View file
Open in desktop

Large diffs are not rendered by default.

73 changes: 6 additions & 67 deletions web/css/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,6 @@
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; }
.layui-table tr:hover { background-color: #f5f5f5; }
Binary file removed web/img/dark.png
View file
Open in desktop
Binary file not shown.
182 changes: 76 additions & 106 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:[email protected]" target="_blank">模板作者：卢本伟</a>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="js/serverstatus.js"></script>
</body>
7 changes: 0 additions & 7 deletions web/js/bootstrap.min.js
View file
Open in desktop

This file was deleted.

Loading