129 lines
4.0 KiB
HTML
129 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>[在线时间] 玩家在线时间及服务器状态</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>玩家在线时间统计</h1>
|
||
|
||
<button id="theme-toggle" class="theme-toggle" aria-label="切换主题">
|
||
<i class="fas fa-moon"></i>
|
||
<i class="fas fa-sun"></i>
|
||
</button>
|
||
</div>
|
||
<div class="warning">数据统计时间开始于此MOD安装时间,不包含安装之前的所有数据</div>
|
||
<br>
|
||
|
||
<!-- 更新后的状态卡片 -->
|
||
<div class="status-cards">
|
||
<div class="status-card">
|
||
<h3>在线玩家</h3>
|
||
<div class="player-counts">
|
||
<div class="count-item">
|
||
<span class="count-label">总数:</span>
|
||
<span class="count-value" id="total-count">0</span>
|
||
</div>
|
||
<div class="count-item">
|
||
<span class="count-label">玩家:</span>
|
||
<span class="count-value" id="whitelist-count">0</span>
|
||
</div>
|
||
<div class="count-item">
|
||
<span class="count-label">假人:</span>
|
||
<span class="count-value" id="non-whitelist-count">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="status-card">
|
||
<h3>在线玩家列表</h3>
|
||
<div class="player-lists">
|
||
<div class="player-list">
|
||
<h4>玩家</h4>
|
||
<ul class="online-players" id="whitelist-players"></ul>
|
||
</div>
|
||
<div class="player-list">
|
||
<h4>假人</h4>
|
||
<ul class="online-players" id="non-whitelist-players"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务器状态可视化 -->
|
||
<div class="status-section">
|
||
<h2>服务器状态</h2>
|
||
<div class="status-grid">
|
||
<div class="status-item">
|
||
<h3>内存使用</h3>
|
||
<canvas id="memory-chart"></canvas>
|
||
<div class="memory-stats">
|
||
<div>已用: <span id="memory-used">0</span> MB</div>
|
||
<div>可用: <span id="memory-free">0</span> MB</div>
|
||
<div>使用率: <span id="memory-percent">0</span>%</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-item">
|
||
<h3>实时性能</h3>
|
||
<div class="chart-container">
|
||
<div class="metric-display">
|
||
<div class="metric">
|
||
<span class="metric-label">TPS:</span>
|
||
<span class="metric-value" id="tps-value">0.0</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-label">MSPT:</span>
|
||
<span class="metric-value" id="mspt-value">0.0</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrapper">
|
||
<canvas id="performance-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 玩家时长统计表格 -->
|
||
<h2>玩家在线时长 (白名单)</h2>
|
||
<div class="controls">
|
||
<button id="refresh-btn" class="refresh-btn">
|
||
<i class="fas fa-sync-alt"></i>
|
||
<span>刷新数据</span>
|
||
</button>
|
||
<p class="info-note">仅跟踪和显示列入白名单的玩家</p>
|
||
</div>
|
||
<div class="stats-container">
|
||
|
||
|
||
<table id="stats-table">
|
||
<thead>
|
||
<tr>
|
||
<th>玩家</th>
|
||
<th>总计时间</th>
|
||
<th>最近 30 天</th>
|
||
<th>最近 7 天</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<script src="js/app.js"></script>
|
||
<footer class="license-footer">
|
||
<div class="license-info">
|
||
<p>本项目基于 <a href="https://opensource.org/licenses/MIT" target="_blank">MIT许可证</a> 开源</p>
|
||
<p>Copyright © 2025 <a href="https://git.branulf.top/BRanulf" target="_blank">BRanulf</a></p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|