mirror of
https://github.com/woodchen-ink/random-api-go.git
synced 2025-07-18 13:52:02 +08:00
187 lines
5.5 KiB
HTML
187 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cmn-Hans">
|
||
|
||
<head>
|
||
<title>随机文件api</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="shortcut icon" size="32x32" href="https://cdn-r2.czl.net/2023/06/20/649168ebc2b5d.png">
|
||
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/czlfonts/slice/font.css" media="all">
|
||
<link rel="stylesheet" href="https://cdn-r2.czl.net/frame/prose.css" media="all">
|
||
<style>
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
margin: 0;
|
||
font-weight: 300;
|
||
background-image: url(https://random-api.czl.net/pic/all);
|
||
background-size: cover;
|
||
overflow: auto;
|
||
}
|
||
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
z-index: 2;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
#markdown-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
background-color: transparent;
|
||
padding: 20px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
main {
|
||
padding: 1vw;
|
||
max-width: 1000px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.stats-summary {
|
||
background-color: #f5f5f5;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 两列布局 */
|
||
gap: 10px;
|
||
/* 项目之间的间距 */
|
||
}
|
||
|
||
.stats-item {
|
||
padding: 5px;
|
||
}
|
||
|
||
/* 确保在小屏幕上切换为单列 */
|
||
@media (max-width: 600px) {
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="overlay">
|
||
<main>
|
||
<div id="markdown-content" class="prose prose-dark">
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<!-- 渲染markdown -->
|
||
<script>
|
||
// 创建带有配置的 markdown-it 实例
|
||
var md = window.markdownit({
|
||
html: true
|
||
});
|
||
|
||
// 加载统计数据
|
||
async function loadStats() {
|
||
try {
|
||
const response = await fetch('/stats');
|
||
const stats = await response.json();
|
||
updateStats(stats);
|
||
} catch (error) {
|
||
console.error('Error loading stats:', error);
|
||
}
|
||
}
|
||
|
||
// 处理统计数据
|
||
function updateStats(stats) {
|
||
const startDate = new Date('2024-10-26');
|
||
const today = new Date();
|
||
const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));
|
||
|
||
let totalCalls = 0;
|
||
let todayCalls = 0;
|
||
|
||
Object.values(stats).forEach(stat => {
|
||
totalCalls += stat.total_calls;
|
||
todayCalls += stat.today_calls;
|
||
});
|
||
|
||
const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
|
||
|
||
// 更新总体统计
|
||
const summaryHtml = `
|
||
<div class="stats-summary">
|
||
<p>📊 <strong>接口调用统计</strong></p>
|
||
<div class="stats-grid">
|
||
<div class="stats-item">今日总调用：${todayCalls} 次</div>
|
||
<div class="stats-item">平均每天调用：${avgCallsPerDay} 次</div>
|
||
<div class="stats-item">总调用次数：${totalCalls} 次</div>
|
||
<div class="stats-item">统计开始日期：2024-10-26</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 更新详细统计
|
||
let detailHtml = `
|
||
<div class="prose">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>接口</th>
|
||
<th>今日调用</th>
|
||
<th>总调用</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
Object.entries(stats).forEach(([endpoint, stat]) => {
|
||
detailHtml += `
|
||
<tr>
|
||
<td>${endpoint}</td>
|
||
<td>${stat.today_calls}</td>
|
||
<td>${stat.total_calls}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
detailHtml += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
// 插入统计数据
|
||
document.getElementById('stats-summary').innerHTML = summaryHtml;
|
||
document.getElementById('stats-detail').innerHTML = detailHtml;
|
||
}
|
||
|
||
// 异步加载 index.md 文件内容
|
||
fetch('./index.md')
|
||
.then(response => response.text())
|
||
.then(markdownText => {
|
||
// 渲染 Markdown 内容
|
||
document.getElementById('markdown-content').innerHTML = md.render(markdownText);
|
||
})
|
||
.catch(error => console.error('Error loading index.md:', error));
|
||
</script>
|
||
</body>
|
||
|
||
</html> |