diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..f4c9e34 --- /dev/null +++ b/public/css/main.css @@ -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); + } +} diff --git a/public/index.html b/public/index.html index 7c59930..9ef8871 100644 --- a/public/index.html +++ b/public/index.html @@ -8,120 +8,9 @@ + @@ -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 = `
-

📊 接口调用次数 🔄

+

📊 接口调用次数 🔄

今日总调用：${todayCalls} 次
@@ -219,10 +170,17 @@ `; - Object.entries(stats).forEach(([endpoint, stat]) => { + sortedEndpoints.forEach(([endpoint, stat]) => { detailHtml += ` - ${endpoint} + + + ${getDisplayName(endpoint)} + + ${stat.today_calls} ${stat.total_calls} @@ -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()) diff --git a/public/index.md b/public/index.md index a4d87d3..5272be2 100644 --- a/public/index.md +++ b/public/index.md @@ -1,6 +1,5 @@ # Random-Api 随机文件API -## 统计
@@ -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) | - ## 部署和原理