mirror of
https://github.com/woodchen-ink/random-api-go.git
synced 2025-07-18 13:52:02 +08:00
feat(public): update index.html, add main.css, and enhance stats display
This commit is contained in:
parent
8f596dea34
commit
861835ef92
175
public/css/main.css
Normal file
175
public/css/main.css
Normal file
@ -0,0 +1,175 @@
|
||||
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: #44444423;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.stats-header h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.stats-summary,
|
||||
table {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.endpoint-link {
|
||||
/* color: #666; 默认字体颜色改为深灰色 */
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 8px; /* 稍微增加内边距 */
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease; /* 平滑过渡效果 */
|
||||
display: inline-block; /* 使padding生效 */
|
||||
font-weight: 500; /* 稍微加粗 */
|
||||
}
|
||||
|
||||
.endpoint-link:hover {
|
||||
background-color: #2196f3; /* 鼠标悬停时的背景色改为蓝色 */
|
||||
color: white; /* 鼠标悬停时文字变为白色 */
|
||||
transform: translateY(-1px); /* 轻微上浮效果 */
|
||||
box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2); /* 添加阴影效果 */
|
||||
}
|
||||
|
||||
/* 点击时的效果 */
|
||||
.endpoint-link:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 提示框样式也稍作优化 */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #2196f3; /* 改为蓝色背景 */
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
z-index: 1000;
|
||||
animation: fadeInOut 2s ease;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
|
||||
15% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
85% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -20px);
|
||||
}
|
||||
}
|
||||
@ -8,120 +8,9 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="./css/main.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: #44444423;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.stats-header h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.stats-summary,
|
||||
table {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
|
||||
</head>
|
||||
@ -139,6 +28,61 @@
|
||||
var md = window.markdownit({
|
||||
html: true
|
||||
});
|
||||
// 统一配置对象
|
||||
const endpointConfig = {
|
||||
'pic/all': {
|
||||
name: '全部图片',
|
||||
order: 1
|
||||
},
|
||||
'pic/ai': {
|
||||
name: 'AI绘图',
|
||||
order: 2
|
||||
},
|
||||
'pic/ecy': {
|
||||
name: '二次元(ALL)',
|
||||
order: 3
|
||||
},
|
||||
'pic/ecy1': {
|
||||
name: '二次元文件1',
|
||||
order: 4
|
||||
},
|
||||
'pic/ecy2': {
|
||||
name: '二次元文件2',
|
||||
order: 5
|
||||
},
|
||||
'pic/truegirl': {
|
||||
name: '真人美女(ALL)',
|
||||
order: 6
|
||||
},
|
||||
'pic/truegirl1': {
|
||||
name: '真人美女文件1',
|
||||
order: 7
|
||||
},
|
||||
'pic/truegirl2': {
|
||||
name: '真人美女文件2',
|
||||
order: 8
|
||||
},
|
||||
'pic/fj': {
|
||||
name: '风景',
|
||||
order: 9
|
||||
},
|
||||
'pic/czlwb': {
|
||||
name: 'CZL网站背景图',
|
||||
order: 10
|
||||
},
|
||||
'pic/girl-gif': {
|
||||
name: '真人美女动图',
|
||||
order: 11
|
||||
},
|
||||
'pic/loading': {
|
||||
name: '加载图',
|
||||
order: 12
|
||||
},
|
||||
'video/all': {
|
||||
name: '视频',
|
||||
order: 13
|
||||
}
|
||||
};
|
||||
|
||||
// 加载统计数据
|
||||
async function loadStats() {
|
||||
@ -155,7 +99,7 @@
|
||||
if (detailElement) detailElement.classList.add('fade');
|
||||
|
||||
// 获取数据
|
||||
const response = await fetch('/stats');
|
||||
const response = await fetch('https://random-api.czl.net/stats');
|
||||
const stats = await response.json();
|
||||
|
||||
// 更新统计
|
||||
@ -190,12 +134,19 @@
|
||||
});
|
||||
|
||||
const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
|
||||
// 获取所有endpoints并按order排序
|
||||
const sortedEndpoints = Object.entries(stats)
|
||||
.sort(([endpointA], [endpointB]) => {
|
||||
const orderA = endpointConfig[endpointA]?.order || 999;
|
||||
const orderB = endpointConfig[endpointB]?.order || 999;
|
||||
return orderA - orderB;
|
||||
});
|
||||
|
||||
// 更新总体统计
|
||||
const summaryHtml = `
|
||||
<div class="stats-summary">
|
||||
<div class="stats-header">
|
||||
<h3>📊 接口调用次数 <span class="refresh-icon">🔄</span></h3>
|
||||
<h2>📊 接口调用次数 <span class="refresh-icon">🔄</span></h2>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stats-item">今日总调用：${todayCalls} 次</div>
|
||||
@ -219,10 +170,17 @@
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
Object.entries(stats).forEach(([endpoint, stat]) => {
|
||||
sortedEndpoints.forEach(([endpoint, stat]) => {
|
||||
detailHtml += `
|
||||
<tr>
|
||||
<td>${endpoint}</td>
|
||||
<td>
|
||||
<a href="javascript:void(0)"
|
||||
onclick="copyToClipboard('${endpoint}')"
|
||||
class="endpoint-link"
|
||||
title="点击复制链接">
|
||||
${getDisplayName(endpoint)}
|
||||
</a>
|
||||
</td>
|
||||
<td>${stat.today_calls}</td>
|
||||
<td>${stat.total_calls}</td>
|
||||
</tr>
|
||||
@ -242,6 +200,31 @@
|
||||
if (detailElement) detailElement.innerHTML = detailHtml;
|
||||
}
|
||||
|
||||
// 获取显示名称的函数
|
||||
function getDisplayName(endpoint) {
|
||||
return endpointConfig[endpoint]?.name || endpoint;
|
||||
}
|
||||
|
||||
|
||||
// 添加复制功能
|
||||
function copyToClipboard(endpoint) {
|
||||
const url = `https://random-api.czl.net/${endpoint}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
// 显示提示
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast';
|
||||
toast.textContent = '链接已复制到剪贴板！';
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// 2秒后移除提示
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// 先加载 markdown 内容
|
||||
fetch('./index.md')
|
||||
.then(response => response.text())
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
# Random-Api 随机文件API
|
||||
|
||||
## 统计
|
||||
<div class="stats-container">
|
||||
<div id="stats-summary"></div>
|
||||
<div id="stats-detail"></div>
|
||||
@ -8,26 +7,6 @@
|
||||
|
||||
---
|
||||
|
||||
## 图片接口说明
|
||||
|
||||
| 种类 | 请求地址 |
|
||||
| ---------- | ---------------- |
|
||||
| 所有 | [https://random-api.czl.net/pic/all](https://random-api.czl.net/pic/all) |
|
||||
| CZL网站背景 | [https://random-api.czl.net/pic/czlwb](https://random-api.czl.net/pic/czlwb) |
|
||||
| 真人美女 | [https://random-api.czl.net/pic/truegirl](https://random-api.czl.net/pic/truegirl) |
|
||||
| 女孩动态图 | [https://random-api.czl.net/pic/girl-gif](https://random-api.czl.net/pic/girl-gif) |
|
||||
| 二次元 | [https://random-api.czl.net/pic/ecy](https://random-api.czl.net/pic/ecy) |
|
||||
| 风景 | [https://random-api.czl.net/pic/fj](https://random-api.czl.net/pic/fj) |
|
||||
| AI绘图 | [https://random-api.czl.net/pic/ai](https://random-api.czl.net/pic/ai) |
|
||||
| 加载 | [https://random-api.czl.net/pic/loading](https://random-api.czl.net/pic/loading) |
|
||||
|
||||
|
||||
|
||||
## 视频接口说明
|
||||
| 种类 | 请求地址 |
|
||||
| ---------- | ---------------- |
|
||||
| 所有 | [https://random-api.czl.net/video/all](https://random-api.czl.net/video/all) |
|
||||
|
||||
|
||||
## 部署和原理
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user