shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复

Browse Source
This commit is contained in:
树萌芽
2025-09-07 22:00:47 +08:00
parent 0a8b20e450
commit c2b2e84416
63 changed files with 1939 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
backend/config.py
View File

@@ -43,12 +43,7 @@ class Config:
# 外部API配置 # 外部API配置
EXTERNAL_APIS = { EXTERNAL_APIS = {
'60s': [ '60s': [
'https://60s.api.shumengya.top', 'https://60s.api.shumengya.top'
'https://60s-cf.viki.moe',
'https://60s.viki.moe',
'https://60s.b23.run',
'https://60s.114128.xyz',
'https://60s-cf.114128.xyz'
] ]
} }

8
frontend/60sapi/娱乐消遣/随机JavaScript趣味题/index.html
View File

@@ -4,11 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机JavaScript趣味题</title> <title>随机JavaScript趣味题</title>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="https://60s.api.shumengya.top">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/background.css"> <link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.9.0/styles/github.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">

29
frontend/60sapi/娱乐消遣/随机JavaScript趣味题/js/script.js
View File

@@ -2,19 +2,17 @@
class JSQuizApp { class JSQuizApp {
constructor() { constructor() {
this.apiEndpoints = [ this.apiEndpoints = [
'https://60s-cf.viki.moe', 'https://60s.api.shumengya.top',
'https://60s.viki.moe',
'https://60s.b23.run',
'https://60s.114128.xyz',
'https://60s-cf.114128.xyz'
]; ];
this.currentApiIndex = 0; this.currentApiIndex = 0;
this.currentQuestion = null; this.currentQuestion = null;
this.selectedOption = null; this.selectedOption = null;
this.isAnswered = false; this.isAnswered = false;
this.loadStartTime = null;
this.initElements(); this.initElements();
this.bindEvents(); this.bindEvents();
this.preloadResources();
this.loadQuestion(); this.loadQuestion();
} }
@@ -41,6 +39,17 @@ class JSQuizApp {
}; };
} }
// 预加载资源
preloadResources() {
// 预连接API服务器
this.apiEndpoints.forEach(endpoint => {
const link = document.createElement('link');
link.rel = 'preconnect';
link.href = endpoint;
document.head.appendChild(link);
});
}
// 绑定事件 // 绑定事件
bindEvents() { bindEvents() {
this.elements.submitBtn.addEventListener('click', () => this.submitAnswer()); this.elements.submitBtn.addEventListener('click', () => this.submitAnswer());
@@ -84,6 +93,7 @@ class JSQuizApp {
// 加载题目 // 加载题目
async loadQuestion() { async loadQuestion() {
this.loadStartTime = Date.now();
this.showLoading(); this.showLoading();
this.resetQuestion(); this.resetQuestion();
@@ -92,15 +102,20 @@ class JSQuizApp {
while (attempts < maxAttempts) { while (attempts < maxAttempts) {
try { try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
const response = await fetch(this.getCurrentApiUrl(), { const response = await fetch(this.getCurrentApiUrl(), {
method: 'GET', method: 'GET',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
timeout: 10000 signal: controller.signal
}); });
clearTimeout(timeoutId);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`); throw new Error(`HTTP ${response.status}: ${response.statusText}`);
} }
@@ -109,6 +124,8 @@ class JSQuizApp {
if (data.code === 200 && data.data) { if (data.code === 200 && data.data) {
this.currentQuestion = data.data; this.currentQuestion = data.data;
const loadTime = Date.now() - this.loadStartTime;
console.log(`题目加载完成，耗时: ${loadTime}ms`);
this.displayQuestion(); this.displayQuestion();
return; return;
} else { } else {

48
frontend/60sapi/娱乐消遣/随机冷笑话/接口集合.json
View File

@@ -1,47 +1 @@
{ ["https://60s.api.shumengya.top"]
"api_name": "60s-api",
"api_version": "2.22.1",
"api_docs": "https://docs.60s-api.viki.moe",
"author": "Viki <hi@viki.moe>",
"user_group": "595941841",
"github_repo": "https://github.com/vikiboss/60s",
"updated": "2025/09/01 11:12:08",
"updated_at": 1756696328000,
"endpoints": [
"/v2/60s",
"/v2/answer",
"/v2/baike",
"/v2/bili",
"/v2/bing",
"/v2/changya",
"/v2/chemical",
"/v2/douyin",
"/v2/duanzi",
"/v2/epic",
"/v2/exchange_rate",
"/v2/fabing",
"/v2/hitokoto",
"/v2/ip",
"/v2/kfc",
"/v2/luck",
"/v2/maoyan",
"/v2/today_in_history",
"/v2/toutiao",
"/v2/weibo",
"/v2/zhihu",
"/v2/lunar",
"/v2/ai-news",
"/v2/awesome-js",
"/v2/qrcode",
"/v2/dad-joke",
"/v2/hacker-news/:type",
"/v2/og",
"/v2/hash",
"/v2/fanyi",
"/v2/fanyi/langs",
"/v2/weather",
"/v2/weather/forecast",
"/v2/ncm-rank",
"/v2/ncm-rank/:id"
]
}

48
frontend/60sapi/娱乐消遣/随机发病文学/接口集合.json
View File

@@ -1,47 +1 @@
{ ["https://60s.api.shumengya.top"]
"api_name": "60s-api",
"api_version": "2.22.1",
"api_docs": "https://docs.60s-api.viki.moe",
"author": "Viki <hi@viki.moe>",
"user_group": "595941841",
"github_repo": "https://github.com/vikiboss/60s",
"updated": "2025/09/01 11:12:08",
"updated_at": 1756696328000,
"endpoints": [
"/v2/60s",
"/v2/answer",
"/v2/baike",
"/v2/bili",
"/v2/bing",
"/v2/changya",
"/v2/chemical",
"/v2/douyin",
"/v2/duanzi",
"/v2/epic",
"/v2/exchange_rate",
"/v2/fabing",
"/v2/hitokoto",
"/v2/ip",
"/v2/kfc",
"/v2/luck",
"/v2/maoyan",
"/v2/today_in_history",
"/v2/toutiao",
"/v2/weibo",
"/v2/zhihu",
"/v2/lunar",
"/v2/ai-news",
"/v2/awesome-js",
"/v2/qrcode",
"/v2/dad-joke",
"/v2/hacker-news/:type",
"/v2/og",
"/v2/hash",
"/v2/fanyi",
"/v2/fanyi/langs",
"/v2/weather",
"/v2/weather/forecast",
"/v2/ncm-rank",
"/v2/ncm-rank/:id"
]
}

2
frontend/60sapi/娱乐消遣/随机唱歌音频/js/script.js
View File

@@ -17,7 +17,7 @@
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/changya`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/changya`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/changya']; this.endpoints = ['https://60s.api.shumengya.top/v2/changya'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

2
frontend/60sapi/娱乐消遣/随机搞笑段子/js/script.js
View File

@@ -8,7 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
const jokeCard = document.getElementById('joke-card'); const jokeCard = document.getElementById('joke-card');
// API // API
const apiBaseUrls = ["https://60s.api.shumengya.top", "https://60s-cf.viki.moe", "https://60s.viki.moe"]; const apiBaseUrls = ["https://60s.api.shumengya.top"];
const apiPath = "/v2/duanzi"; const apiPath = "/v2/duanzi";
let currentApiIndex = 0; let currentApiIndex = 0;

48
frontend/60sapi/娱乐消遣/随机搞笑段子/接口集合.json
View File

@@ -1,47 +1 @@
{ ["https://60s.api.shumengya.top"]
"api_name": "60s-api",
"api_version": "2.22.1",
"api_docs": "https://docs.60s-api.viki.moe",
"author": "Viki <hi@viki.moe>",
"user_group": "595941841",
"github_repo": "https://github.com/vikiboss/60s",
"updated": "2025/09/01 11:12:08",
"updated_at": 1756696328000,
"endpoints": [
"/v2/60s",
"/v2/answer",
"/v2/baike",
"/v2/bili",
"/v2/bing",
"/v2/changya",
"/v2/chemical",
"/v2/douyin",
"/v2/duanzi",
"/v2/epic",
"/v2/exchange_rate",
"/v2/fabing",
"/v2/hitokoto",
"/v2/ip",
"/v2/kfc",
"/v2/luck",
"/v2/maoyan",
"/v2/today_in_history",
"/v2/toutiao",
"/v2/weibo",
"/v2/zhihu",
"/v2/lunar",
"/v2/ai-news",
"/v2/awesome-js",
"/v2/qrcode",
"/v2/dad-joke",
"/v2/hacker-news/:type",
"/v2/og",
"/v2/hash",
"/v2/fanyi",
"/v2/fanyi/langs",
"/v2/weather",
"/v2/weather/forecast",
"/v2/ncm-rank",
"/v2/ncm-rank/:id"
]
}

5
frontend/60sapi/娱乐消遣/随机运势/js/script.js
View File

@@ -14,11 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
const apiBaseUrls = [ const apiBaseUrls = [
"https://60s.api.shumengya.top", "https://60s.api.shumengya.top",
"https://60s-cf.viki.moe",
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
]; ];
const apiPath = "/v2/luck"; const apiPath = "/v2/luck";

6
frontend/60sapi/娱乐消遣/随机运势/接口集合.json
View File

@@ -1,7 +1,3 @@
[ [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top"
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
] ]

2
frontend/60sapi/实用功能/EpicGames免费游戏/js/script.js
View File

@@ -13,7 +13,7 @@
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/epic`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/epic`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s-api.viki.moe/v2/epic']; this.endpoints = ['https://60s.api.shumengya.top/v2/epic'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

2
frontend/60sapi/实用功能/公网IP地址/js/script.js
View File

@@ -1,7 +1,7 @@
// 公网IP地址查询应用 // 公网IP地址查询应用
class IPQueryApp { class IPQueryApp {
constructor() { constructor() {
this.apiEndpoint = 'https://60s.viki.moe/v2/ip'; this.apiEndpoint = 'https://60s.api.shumengya.top/v2/ip';
this.init(); this.init();
} }

2
frontend/60sapi/实用功能/公网IP地址/接口集合.json
View File

@@ -1,3 +1,3 @@
[ [
"https://60s.viki.moe/v2/ip" "https://60s.api.shumengya.top/v2/ip"
] ]

34
frontend/60sapi/实用功能/农历信息/js/script.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top",
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
]; ];
// 当前使用的API索引 // 当前使用的API索引
@@ -118,7 +114,7 @@ function displayLunarInfo(lunarData) {
<div class="item-value">${lunarData.solar.week_desc}</div> <div class="item-value">${lunarData.solar.week_desc}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon"><EFBFBD></div> <div class="item-icon">🍂</div>
<div class="item-label">季节</div> <div class="item-label">季节</div>
<div class="item-value">${lunarData.solar.season_name_desc}</div> <div class="item-value">${lunarData.solar.season_name_desc}</div>
</div> </div>
@@ -147,7 +143,7 @@ function displayLunarInfo(lunarData) {
<div class="item-value">${lunarData.zodiac.year}年</div> <div class="item-value">${lunarData.zodiac.year}年</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">⚡</div> <div class="item-icon">☯️</div>
<div class="item-label">天干地支</div> <div class="item-label">天干地支</div>
<div class="item-value">${lunarData.sixty_cycle.year.name}</div> <div class="item-value">${lunarData.sixty_cycle.year.name}</div>
</div> </div>
@@ -161,27 +157,27 @@ function displayLunarInfo(lunarData) {
<div class="info-card"> <div class="info-card">
<div class="card-header"> <div class="card-header">
<div class="card-icon">🌸</div> <div class="card-icon">🌾</div>
<div class="card-title">节气节日</div> <div class="card-title">节气节日</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="info-item"> <div class="info-item">
<div class="item-icon">🍃</div> <div class="item-icon">🌱</div>
<div class="item-label">当前节气</div> <div class="item-label">当前节气</div>
<div class="item-value">${lunarData.term.stage ? lunarData.term.stage.name : '无节气'}</div> <div class="item-value">${lunarData.term.stage ? lunarData.term.stage.name : '无节气'}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">🎊</div> <div class="item-icon">🎉</div>
<div class="item-label">法定假日</div> <div class="item-label">法定假日</div>
<div class="item-value">${lunarData.legal_holiday ? lunarData.legal_holiday.name : '无假日'}</div> <div class="item-value">${lunarData.legal_holiday ? lunarData.legal_holiday.name : '无假日'}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon"><EFBFBD></div> <div class="item-icon">🎊</div>
<div class="item-label">传统节日</div> <div class="item-label">传统节日</div>
<div class="item-value">${lunarData.festival.both_desc || '无特殊节日'}</div> <div class="item-value">${lunarData.festival.both_desc || '无特殊节日'}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">🔢</div> <div class="item-icon">📊</div>
<div class="item-label">一年第几天</div> <div class="item-label">一年第几天</div>
<div class="item-value">第${lunarData.stats.day_of_year}天</div> <div class="item-value">第${lunarData.stats.day_of_year}天</div>
</div> </div>
@@ -200,12 +196,12 @@ function displayLunarInfo(lunarData) {
<div class="item-value">${lunarData.lunar.hour_desc}</div> <div class="item-value">${lunarData.lunar.hour_desc}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">⚡</div> <div class="item-icon">☯️</div>
<div class="item-label">时辰干支</div> <div class="item-label">时辰干支</div>
<div class="item-value">${lunarData.sixty_cycle.hour.name}</div> <div class="item-value">${lunarData.sixty_cycle.hour.name}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">🐓</div> <div class="item-icon">🐾</div>
<div class="item-label">时辰生肖</div> <div class="item-label">时辰生肖</div>
<div class="item-value">${lunarData.zodiac.hour}</div> <div class="item-value">${lunarData.zodiac.hour}</div>
</div> </div>
@@ -219,7 +215,7 @@ function displayLunarInfo(lunarData) {
<div class="info-card"> <div class="info-card">
<div class="card-header"> <div class="card-header">
<div class="card-icon">🔮</div> <div class="card-icon">📖</div>
<div class="card-title">黄历宜忌</div> <div class="card-title">黄历宜忌</div>
</div> </div>
<div class="card-content"> <div class="card-content">
@@ -253,7 +249,7 @@ function displayLunarInfo(lunarData) {
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="info-item"> <div class="info-item">
<div class="item-icon">🎯</div> <div class="item-icon">🍀</div>
<div class="item-label">今日运势</div> <div class="item-label">今日运势</div>
<div class="item-value">${lunarData.fortune.today_luck}</div> <div class="item-value">${lunarData.fortune.today_luck}</div>
</div> </div>
@@ -268,7 +264,7 @@ function displayLunarInfo(lunarData) {
<div class="item-value">${lunarData.fortune.money}</div> <div class="item-value">${lunarData.fortune.money}</div>
</div> </div>
<div class="info-item"> <div class="info-item">
<div class="item-icon">💕</div> <div class="item-icon">💖</div>
<div class="item-label">感情运</div> <div class="item-label">感情运</div>
<div class="item-value">${lunarData.fortune.love}</div> <div class="item-value">${lunarData.fortune.love}</div>
</div> </div>
@@ -277,12 +273,12 @@ function displayLunarInfo(lunarData) {
<div class="info-card"> <div class="info-card">
<div class="card-header"> <div class="card-header">
<div class="card-icon">📊</div> <div class="card-icon">📈</div>
<div class="card-title">年度统计</div> <div class="card-title">年度统计</div>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="info-item"> <div class="info-item">
<div class="item-icon">📈</div> <div class="item-icon">📊</div>
<div class="item-label">年度进度</div> <div class="item-label">年度进度</div>
<div class="item-value">${lunarData.stats.percents_formatted.year}</div> <div class="item-value">${lunarData.stats.percents_formatted.year}</div>
</div> </div>

2
frontend/60sapi/实用功能/哈希解压压缩/js/script.js
View File

@@ -1,5 +1,5 @@
// API配置 // API配置
const API_BASE_URL = 'https://60s.viki.moe/v2/hash'; const API_BASE_URL = 'https://60s.api.shumengya.top/v2/hash';
// DOM元素 // DOM元素
const elements = { const elements = {

0
frontend/60sapi/实用功能/实时天气/css/background.css → frontend/60sapi/实用功能/天气预报/css/background.css
View File

223
frontend/60sapi/实用功能/实时天气/css/style.css → frontend/60sapi/实用功能/天气预报/css/style.css
View File

@@ -162,95 +162,6 @@ body {
font-size: 14px; font-size: 14px;
} }
/* 天气详情 */
.weather-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.detail-item {
background: rgba(168, 213, 186, 0.1);
padding: 15px;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(168, 213, 186, 0.2);
}
.detail-item .label {
display: block;
color: #666;
font-size: 12px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-item span:last-child {
color: #2d5a3d;
font-weight: 600;
font-size: 16px;
}
/* 生活指数 */
.life-index {
margin-top: 30px;
}
.life-index h3 {
color: #2d5a3d;
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
}
.index-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.index-item {
display: flex;
align-items: center;
background: rgba(168, 213, 186, 0.05);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(168, 213, 186, 0.2);
transition: all 0.3s ease;
}
.index-item:hover {
background: rgba(168, 213, 186, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(168, 213, 186, 0.2);
}
.index-icon {
font-size: 2rem;
margin-right: 15px;
width: 50px;
text-align: center;
}
.index-content h4 {
color: #2d5a3d;
font-size: 16px;
margin-bottom: 5px;
}
.index-content p {
color: #6bb77b;
font-weight: 600;
margin-bottom: 3px;
}
.index-content span {
color: #666;
font-size: 13px;
line-height: 1.4;
}
/* 更新时间 */ /* 更新时间 */
.update-time { .update-time {
text-align: center; text-align: center;
@@ -285,10 +196,6 @@ body {
font-size: 3.5rem; font-size: 3.5rem;
} }
.weather-details {
grid-template-columns: repeat(3, 1fr);
}
.index-grid { .index-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@@ -308,10 +215,6 @@ body {
justify-content: space-around; justify-content: space-around;
} }
.weather-details {
grid-template-columns: repeat(6, 1fr);
}
.index-grid { .index-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@@ -355,15 +258,6 @@ body {
font-size: 3rem; font-size: 3rem;
} }
.weather-details {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.detail-item {
padding: 12px;
}
.index-grid { .index-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 15px; gap: 15px;
@@ -398,12 +292,121 @@ body {
.temperature { .temperature {
font-size: 2.5rem; font-size: 2.5rem;
} }
}
.weather-details { /* 预报区域样式 */
grid-template-columns: 1fr; .forecast-section {
margin-top: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.forecast-section h3 {
color: #2d5a3d;
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
}
.forecast-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.forecast-item {
background: rgba(255, 255, 255, 0.8);
border-radius: 15px;
padding: 15px;
text-align: center;
border: 1px solid rgba(168, 213, 186, 0.3);
transition: all 0.3s ease;
}
.forecast-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.forecast-date {
font-weight: bold;
color: #2d5a3d;
margin-bottom: 10px;
font-size: 1.1rem;
}
.forecast-weather {
margin-bottom: 10px;
}
.weather-day {
color: #666;
font-size: 0.9rem;
}
.weather-night {
color: #888;
font-size: 0.85rem;
}
.forecast-temp {
margin-bottom: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
.temp-high {
color: #ff6b6b;
font-weight: bold;
font-size: 1.2rem;
}
.temp-low {
color: #4ecdc4;
font-size: 1rem;
}
.forecast-wind {
color: #666;
font-size: 0.85rem;
margin-bottom: 5px;
}
.forecast-humidity {
color: #888;
font-size: 0.8rem;
}
/* 预报区域响应式设计 */
@media (max-width: 768px) {
.forecast-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
} }
.detail-item { .forecast-item {
padding: 10px; padding: 12px;
}
.forecast-date {
font-size: 1rem;
}
.temp-high {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.forecast-section {
padding: 15px;
}
.forecast-grid {
grid-template-columns: repeat(2, 1fr);
} }
} }

66
frontend/60sapi/实用功能/天气预报/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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="css/background.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>天气预报</h1>
</header>
<div class="search-section">
<div class="search-box">
<input type="text" id="cityInput" placeholder="请输入城市名称（如：北京）" value="北京">
<button id="searchBtn">查询天气</button>
</div>
</div>
<div class="loading" id="loading" style="display: none;">
<div class="spinner"></div>
<p>正在获取天气信息...</p>
</div>
<div class="weather-container" id="weatherContainer" style="display: none;">
<div class="location-info">
<h2 id="locationName"></h2>
<p id="locationDetail"></p>
</div>
<div class="current-weather">
<div class="weather-main">
<div class="temperature">
<span id="temperature"></span>
<span class="unit">°C</span>
</div>
<div class="weather-desc">
<p id="weatherCondition"></p>
<p id="feelsLike"></p>
</div>
</div>
</div>
<div class="forecast-section">
<h3>未来天气预报</h3>
<div class="forecast-grid" id="forecastGrid">
<!-- 预报数据将通过JavaScript动态生成 -->
</div>
</div>
<div class="update-time">
<p>更新时间：<span id="updateTime"></span></p>
</div>
</div>
<div class="error-message" id="errorMessage" style="display: none;">
<p>获取天气信息失败，请稍后重试</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

145
frontend/60sapi/实用功能/实时天气/js/script.js → frontend/60sapi/实用功能/天气预报/js/script.js
View File

@@ -2,11 +2,7 @@
class WeatherApp { class WeatherApp {
constructor() { constructor() {
this.apiEndpoints = [ this.apiEndpoints = [
'https://60s-cf.viki.moe', "https://60s.api.shumengya.top/v2/weather/forecast"
'https://60s.viki.moe',
'https://60s.b23.run',
'https://60s.114128.xyz',
'https://60s-cf.114128.xyz'
]; ];
this.currentEndpointIndex = 0; this.currentEndpointIndex = 0;
this.init(); this.init();
@@ -74,7 +70,7 @@ class WeatherApp {
} }
async fetchWeatherData(endpoint, city) { async fetchWeatherData(endpoint, city) {
const url = `${endpoint}/v2/weather?query=${encodeURIComponent(city)}`; const url = `${endpoint}?query=${encodeURIComponent(city)}`;
const response = await fetch(url, { const response = await fetch(url, {
method: 'GET', method: 'GET',
@@ -93,90 +89,61 @@ class WeatherApp {
} }
displayWeatherData(data) { displayWeatherData(data) {
const { location, realtime } = data; const { location, forecast } = data;
// 显示位置信息 // 显示位置信息
document.getElementById('locationName').textContent = location.formatted; document.getElementById('locationName').textContent = location.formatted;
document.getElementById('locationDetail').textContent = document.getElementById('locationDetail').textContent =
`${location.province} ${location.city} | 邮编: ${location.zip_code}`; `${location.province} ${location.city} | 邮编: ${location.zip_code}`;
// 显示当前天气 // 使用第一天的预报数据作为当前天气（今天的天气）
document.getElementById('temperature').textContent = realtime.temperature; const todayWeather = forecast[0];
document.getElementById('weatherCondition').textContent = realtime.weather;
// 体感温度转换（API返回的是华氏度，需要转换为摄氏度） // 显示当前天气（使用今天的最高温度）
const feelsLikeCelsius = this.fahrenheitToCelsius(realtime.temperature_feels_like); document.getElementById('temperature').textContent = todayWeather.temperature_high;
document.getElementById('weatherCondition').textContent =
`${todayWeather.weather_day} 转 ${todayWeather.weather_night}`;
// 体感温度（使用温度范围）
document.getElementById('feelsLike').textContent = document.getElementById('feelsLike').textContent =
`体感温度 ${feelsLikeCelsius}°C`; `温度范围 ${todayWeather.temperature_low}°C - ${todayWeather.temperature_high}°C`;
// 显示天气详情 // 显示更新时间（使用当前时间）
document.getElementById('humidity').textContent = `${realtime.humidity}%`;
document.getElementById('windDirection').textContent = realtime.wind_direction;
document.getElementById('windStrength').textContent = realtime.wind_strength;
document.getElementById('pressure').textContent = `${realtime.pressure} hPa`;
document.getElementById('visibility').textContent = realtime.visibility;
// 空气质量显示
const aqiElement = document.getElementById('aqi');
aqiElement.textContent = `${realtime.aqi} (PM2.5: ${realtime.pm25})`;
aqiElement.className = this.getAQIClass(realtime.aqi);
// 显示生活指数
const lifeIndex = realtime.life_index;
this.displayLifeIndex('comfort', lifeIndex.comfort);
this.displayLifeIndex('clothing', lifeIndex.clothing);
this.displayLifeIndex('umbrella', lifeIndex.umbrella);
this.displayLifeIndex('uv', lifeIndex.uv);
this.displayLifeIndex('travel', lifeIndex.travel);
this.displayLifeIndex('sport', lifeIndex.sport);
// 显示更新时间
document.getElementById('updateTime').textContent = document.getElementById('updateTime').textContent =
`${realtime.updated} (${realtime.updated_at})`; `${this.formatDate(new Date())} (基于预报数据)`;
// 显示天气预报
this.displayForecast(forecast);
this.showWeatherContainer(); this.showWeatherContainer();
} }
displayLifeIndex(type, indexData) { displayForecast(forecast) {
const levelElement = document.getElementById(`${type}Level`); const forecastGrid = document.getElementById('forecastGrid');
const descElement = document.getElementById(`${type}Desc`); forecastGrid.innerHTML = '';
if (levelElement && descElement && indexData) { forecast.forEach((day, index) => {
levelElement.textContent = indexData.level; const forecastItem = document.createElement('div');
descElement.textContent = indexData.desc; forecastItem.className = 'forecast-item';
// 根据指数级别设置颜色 forecastItem.innerHTML = `
levelElement.className = this.getIndexLevelClass(indexData.level); <div class="forecast-date">${day.date_desc}</div>
} <div class="forecast-weather">
} <div class="weather-day">${day.weather_day}</div>
<div class="weather-night">${day.weather_night}</div>
</div>
<div class="forecast-temp">
<span class="temp-high">${day.temperature_high}°</span>
<span class="temp-low">${day.temperature_low}°</span>
</div>
<div class="forecast-wind">
<div>${day.wind_direction_day} ${day.wind_strength_day}</div>
</div>
<div class="forecast-humidity">湿度: ${day.humidity}%</div>
`;
getAQIClass(aqi) { forecastGrid.appendChild(forecastItem);
if (aqi <= 50) return 'aqi-good'; });
if (aqi <= 100) return 'aqi-moderate';
if (aqi <= 150) return 'aqi-unhealthy-sensitive';
if (aqi <= 200) return 'aqi-unhealthy';
if (aqi <= 300) return 'aqi-very-unhealthy';
return 'aqi-hazardous';
}
getIndexLevelClass(level) {
const levelMap = {
'优': 'level-excellent',
'良': 'level-good',
'适宜': 'level-suitable',
'舒适': 'level-comfortable',
'较适宜': 'level-fairly-suitable',
'不宜': 'level-unsuitable',
'较不宜': 'level-fairly-unsuitable',
'带伞': 'level-bring-umbrella',
'最弱': 'level-weakest',
'弱': 'level-weak',
'中等': 'level-moderate',
'强': 'level-strong',
'很强': 'level-very-strong'
};
return levelMap[level] || 'level-default';
} }
// 华氏度转摄氏度 // 华氏度转摄氏度
@@ -185,6 +152,18 @@ class WeatherApp {
return Math.round(celsius * 10) / 10; // 保留一位小数 return Math.round(celsius * 10) / 10; // 保留一位小数
} }
// 格式化时间
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
showLoading() { showLoading() {
document.getElementById('loading').style.display = 'block'; document.getElementById('loading').style.display = 'block';
document.getElementById('weatherContainer').style.display = 'none'; document.getElementById('weatherContainer').style.display = 'none';
@@ -206,26 +185,6 @@ class WeatherApp {
} }
} }
// 添加生活指数级别样式
const style = document.createElement('style');
style.textContent = `
.aqi-good { color: #52c41a; }
.aqi-moderate { color: #faad14; }
.aqi-unhealthy-sensitive { color: #fa8c16; }
.aqi-unhealthy { color: #f5222d; }
.aqi-very-unhealthy { color: #a0206e; }
.aqi-hazardous { color: #722ed1; }
.level-excellent, .level-suitable, .level-comfortable { color: #52c41a; }
.level-good, .level-fairly-suitable { color: #1890ff; }
.level-bring-umbrella, .level-moderate { color: #faad14; }
.level-unsuitable, .level-fairly-unsuitable { color: #f5222d; }
.level-weakest, .level-weak { color: #52c41a; }
.level-strong, .level-very-strong { color: #fa8c16; }
.level-default { color: #666; }
`;
document.head.appendChild(style);
// 页面加载完成后初始化应用 // 页面加载完成后初始化应用
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
new WeatherApp(); new WeatherApp();

3
frontend/60sapi/实用功能/天气预报/接口集合.json Normal file
View File

@@ -0,0 +1,3 @@
[
"https://60s.api.shumengya.top/v2/weather/forecast"
]

101
frontend/60sapi/实用功能/天气预报/返回接口.json Normal file
View File

@@ -0,0 +1,101 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
"data": {
"location": {
"province": "北京",
"city": "北京",
"town": "北京",
"formatted": "北京",
"location_id": "101010100",
"detail_url": "http://www.weather.com.cn/weather/101010100.shtml",
"is_province": true,
"is_city": false,
"is_town": false,
"area_code": "10",
"zip_code": "100000"
},
"forecast": [
{
"date": "9/4",
"date_desc": "今天",
"weather_day": "多云",
"weather_night": "阴",
"weather_code_day": "01",
"weather_code_night": "02",
"temperature_high": 31,
"temperature_low": 21,
"wind_direction_day": "南风",
"wind_direction_night": "南风",
"wind_strength_day": "\u003C3级",
"wind_strength_night": "\u003C3级",
"rainfall": 96.1,
"humidity": 83
},
{
"date": "9/5",
"date_desc": "星期五",
"weather_day": "中雨",
"weather_night": "多云",
"weather_code_day": "08",
"weather_code_night": "01",
"temperature_high": 23,
"temperature_low": 19,
"wind_direction_day": "西南风",
"wind_direction_night": "北风",
"wind_strength_day": "\u003C3级",
"wind_strength_night": "\u003C3级",
"rainfall": 100,
"humidity": 68
},
{
"date": "9/6",
"date_desc": "星期六",
"weather_day": "多云",
"weather_night": "晴",
"weather_code_day": "01",
"weather_code_night": "00",
"temperature_high": 30,
"temperature_low": 19,
"wind_direction_day": "南风",
"wind_direction_night": "西南风",
"wind_strength_day": "\u003C3级",
"wind_strength_night": "\u003C3级",
"rainfall": 85.2,
"humidity": 36
},
{
"date": "9/7",
"date_desc": "星期日",
"weather_day": "多云",
"weather_night": "晴",
"weather_code_day": "01",
"weather_code_night": "00",
"temperature_high": 29,
"temperature_low": 20,
"wind_direction_day": "北风",
"wind_direction_night": "北风",
"wind_strength_day": "\u003C3级",
"wind_strength_night": "\u003C3级",
"rainfall": 87.3,
"humidity": 27
},
{
"date": "9/8",
"date_desc": "星期一",
"weather_day": "多云",
"weather_night": "多云",
"weather_code_day": "01",
"weather_code_night": "01",
"temperature_high": 28,
"temperature_low": 20,
"wind_direction_day": "南风",
"wind_direction_night": "南风",
"wind_strength_day": "\u003C3级",
"wind_strength_night": "\u003C3级",
"rainfall": 84.8,
"humidity": 41
}
]
}
}

140
frontend/60sapi/实用功能/实时天气/index.html
View File

@@ -1,140 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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="css/background.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>实时天气查询</h1>
</header>
<div class="search-section">
<div class="search-box">
<input type="text" id="cityInput" placeholder="请输入城市名称（如：北京）" value="北京">
<button id="searchBtn">查询天气</button>
</div>
</div>
<div class="loading" id="loading" style="display: none;">
<div class="spinner"></div>
<p>正在获取天气信息...</p>
</div>
<div class="weather-container" id="weatherContainer" style="display: none;">
<div class="location-info">
<h2 id="locationName"></h2>
<p id="locationDetail"></p>
</div>
<div class="current-weather">
<div class="weather-main">
<div class="temperature">
<span id="temperature"></span>
<span class="unit">°C</span>
</div>
<div class="weather-desc">
<p id="weatherCondition"></p>
<p id="feelsLike"></p>
</div>
</div>
<div class="weather-details">
<div class="detail-item">
<span class="label">湿度</span>
<span id="humidity"></span>
</div>
<div class="detail-item">
<span class="label">风向</span>
<span id="windDirection"></span>
</div>
<div class="detail-item">
<span class="label">风力</span>
<span id="windStrength"></span>
</div>
<div class="detail-item">
<span class="label">气压</span>
<span id="pressure"></span>
</div>
<div class="detail-item">
<span class="label">能见度</span>
<span id="visibility"></span>
</div>
<div class="detail-item">
<span class="label">空气质量</span>
<span id="aqi"></span>
</div>
</div>
</div>
<div class="life-index">
<h3>生活指数</h3>
<div class="index-grid">
<div class="index-item">
<div class="index-icon comfort">🌡️</div>
<div class="index-content">
<h4>舒适度</h4>
<p id="comfortLevel"></p>
<span id="comfortDesc"></span>
</div>
</div>
<div class="index-item">
<div class="index-icon clothing">👕</div>
<div class="index-content">
<h4>穿衣指数</h4>
<p id="clothingLevel"></p>
<span id="clothingDesc"></span>
</div>
</div>
<div class="index-item">
<div class="index-icon umbrella">☂️</div>
<div class="index-content">
<h4>雨伞指数</h4>
<p id="umbrellaLevel"></p>
<span id="umbrellaDesc"></span>
</div>
</div>
<div class="index-item">
<div class="index-icon uv">☀️</div>
<div class="index-content">
<h4>紫外线</h4>
<p id="uvLevel"></p>
<span id="uvDesc"></span>
</div>
</div>
<div class="index-item">
<div class="index-icon travel">🚗</div>
<div class="index-content">
<h4>出行指数</h4>
<p id="travelLevel"></p>
<span id="travelDesc"></span>
</div>
</div>
<div class="index-item">
<div class="index-icon sport">🏃</div>
<div class="index-content">
<h4>运动指数</h4>
<p id="sportLevel"></p>
<span id="sportDesc"></span>
</div>
</div>
</div>
</div>
<div class="update-time">
<p>更新时间：<span id="updateTime"></span></p>
</div>
</div>
<div class="error-message" id="errorMessage" style="display: none;">
<p>获取天气信息失败，请稍后重试</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

3
frontend/60sapi/实用功能/实时天气/接口集合.json
View File

@@ -1,3 +0,0 @@
[
"https://60s.api.shumengya.top"
]

68
frontend/60sapi/实用功能/实时天气/返回接口.json
View File

@@ -1,68 +0,0 @@
{
"code": 200,
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
"data": {
"location": {
"province": "北京",
"city": "北京",
"town": "北京",
"formatted": "北京",
"location_id": "101010100",
"detail_url": "http://www.weather.com.cn/weather/101010100.shtml",
"is_province": true,
"is_city": false,
"is_town": false,
"area_code": "10",
"zip_code": "100000"
},
"realtime": {
"weather": "小雨转多云",
"weather_desc": "未知",
"weather_code": "d7",
"temperature": 26,
"temperature_feels_like": 81.1,
"humidity": 78,
"wind_direction": "南风转北风",
"wind_strength": "\u003C3级",
"wind_speed": "5km/h",
"pressure": 1008,
"visibility": "8km",
"aqi": 37,
"pm25": 37,
"rainfall": 0,
"rainfall_24h": 0,
"updated": "2025-08-29 08:00:00",
"updated_at": "15:10",
"life_index": {
"comfort": {
"level": "舒适",
"desc": "白天温度宜人，风力不大。"
},
"clothing": {
"level": "舒适",
"desc": "建议穿长袖衬衫单裤等服装。"
},
"umbrella": {
"level": "带伞",
"desc": "有降水，带雨伞，短期外出可收起雨伞。"
},
"uv": {
"level": "最弱",
"desc": "辐射弱，涂擦SPF8-12防晒护肤品。"
},
"car_wash": {
"level": "不宜",
"desc": "有雨，雨水和泥水会弄脏爱车。"
},
"travel": {
"level": "适宜",
"desc": "较弱降水和微风将伴您共赴旅程。"
},
"sport": {
"level": "较不宜",
"desc": "有降水，推荐您在室内进行休闲运动。"
}
}
}
}
}

86
frontend/60sapi/实用功能/生成二维码/js/script.js
View File

@@ -16,8 +16,10 @@ class QRCodeGenerator {
// 加载API接口列表 // 加载API接口列表
async loadApiEndpoints() { async loadApiEndpoints() {
try { try {
const response = await fetch('./接口集合.json'); // 直接在代码中配置API接口，避免CORS问题
this.apiEndpoints = await response.json(); this.apiEndpoints = [
"https://60s.api.shumengya.top"
];
console.log('已加载API接口:', this.apiEndpoints); console.log('已加载API接口:', this.apiEndpoints);
} catch (error) { } catch (error) {
console.error('加载API接口失败:', error); console.error('加载API接口失败:', error);
@@ -32,16 +34,26 @@ class QRCodeGenerator {
const downloadBtn = document.querySelector('.download-btn'); const downloadBtn = document.querySelector('.download-btn');
const copyBtn = document.querySelector('.copy-btn'); const copyBtn = document.querySelector('.copy-btn');
const newBtn = document.querySelector('.new-btn'); const newBtn = document.querySelector('.new-btn');
form.addEventListener('submit', (e) => this.handleSubmit(e));
retryBtn.addEventListener('click', () => this.retryGeneration());
downloadBtn.addEventListener('click', () => this.downloadQRCode());
copyBtn.addEventListener('click', () => this.copyImageLink());
newBtn.addEventListener('click', () => this.resetForm());
// 实时字符计数
const textArea = document.getElementById('text'); const textArea = document.getElementById('text');
textArea.addEventListener('input', () => this.updateCharCount());
if (form) {
form.addEventListener('submit', (e) => this.handleSubmit(e));
}
if (retryBtn) {
retryBtn.addEventListener('click', () => this.retryGeneration());
}
if (downloadBtn) {
downloadBtn.addEventListener('click', () => this.downloadQRCode());
}
if (copyBtn) {
copyBtn.addEventListener('click', () => this.copyImageLink());
}
if (newBtn) {
newBtn.addEventListener('click', () => this.resetForm());
}
if (textArea) {
textArea.addEventListener('input', () => this.updateCharCount());
}
} }
// 设置表单验证 // 设置表单验证
@@ -162,7 +174,7 @@ class QRCodeGenerator {
// 添加查询参数 // 添加查询参数
Object.entries(params).forEach(([key, value]) => { Object.entries(params).forEach(([key, value]) => {
if (value) { if (value !== null && value !== undefined && value !== '') {
url.searchParams.append(key, value); url.searchParams.append(key, value);
} }
}); });
@@ -188,20 +200,44 @@ class QRCodeGenerator {
} }
// 根据返回格式处理 // 根据返回格式处理
if (params.encoding === 'image') { if (params.encoding === 'image' || !params.encoding) {
const blob = await response.blob(); // 默认返回图片格式
const imageUrl = URL.createObjectURL(blob); const contentType = response.headers.get('content-type');
return { if (contentType && contentType.startsWith('image/')) {
success: true, const blob = await response.blob();
data: { const imageUrl = URL.createObjectURL(blob);
imageUrl: imageUrl, return {
text: params.text, success: true,
size: params.size, data: {
level: params.level, imageUrl: imageUrl,
format: 'image' text: params.text,
size: params.size,
level: params.level,
format: 'image'
}
};
} else {
// 如果返回的不是图片，尝试解析JSON
const jsonData = await response.json();
if (jsonData.code === 0 && jsonData.data && jsonData.data.data_uri) {
return {
success: true,
data: {
imageUrl: jsonData.data.data_uri,
text: params.text,
size: params.size,
level: params.level,
format: 'json',
base64: jsonData.data.base64,
mimeType: jsonData.data.mime_type
}
};
} else {
throw new Error(jsonData.message || '生成失败');
} }
}; }
} else { } else {
// JSON或text格式
const jsonData = await response.json(); const jsonData = await response.json();
if (jsonData.code === 0 && jsonData.data) { if (jsonData.code === 0 && jsonData.data) {
return { return {
@@ -211,7 +247,7 @@ class QRCodeGenerator {
text: params.text, text: params.text,
size: params.size, size: params.size,
level: params.level, level: params.level,
format: 'json', format: params.encoding,
base64: jsonData.data.base64, base64: jsonData.data.base64,
mimeType: jsonData.data.mime_type mimeType: jsonData.data.mime_type
} }

10
frontend/60sapi/实用功能/生成二维码/返回接口.json
View File

@@ -1,10 +0,0 @@
{
"code": 0,
"message": "success",
"data": {
"base64": "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAACAASURBVHic7Z15fBTV...",
"data_uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAACAASURBVHic7Z15fBTV...",
"mime_type": "image/png",
"text": "https://example.com"
}
}

6
frontend/60sapi/实用功能/百度百科词条/js/script.js
View File

@@ -3,11 +3,7 @@ class BaikeApp {
constructor() { constructor() {
// API接口列表 // API接口列表
this.apiEndpoints = [ this.apiEndpoints = [
'https://60s-cf.viki.moe', 'https://60s.api.shumengya.top',
'https://60s.viki.moe',
'https://60s.b23.run',
'https://60s.114128.xyz',
'https://60s-cf.114128.xyz'
]; ];
this.currentApiIndex = 0; this.currentApiIndex = 0;

2
frontend/60sapi/实用功能/链接OG信息/js/script.js
View File

@@ -3,7 +3,7 @@
class OGAnalyzer { class OGAnalyzer {
constructor() { constructor() {
this.apiUrl = 'https://60s.viki.moe/v2/og'; this.apiUrl = 'https://60s.api.shumengya.top/v2/og';
this.isAnalyzing = false; this.isAnalyzing = false;
this.currentUrl = ''; this.currentUrl = '';
this.animationFrameId = null; this.animationFrameId = null;

2
frontend/60sapi/日更资讯/历史上的今天/js/script.js
View File

@@ -13,7 +13,7 @@ const API = {
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/today_in_history`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/today_in_history`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/today_in_history']; this.endpoints = ['https://60s.api.shumengya.top/v2/today_in_history'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

2
frontend/60sapi/日更资讯/必应每日壁纸/js/script.js
View File

@@ -15,7 +15,7 @@ const API = {
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/bing`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/bing`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/bing']; this.endpoints = ['https://60s.api.shumengya.top/v2/bing'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

6
frontend/60sapi/日更资讯/必应每日壁纸/接口集合.json
View File

@@ -1,7 +1,3 @@
[ [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top"
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
] ]

2
frontend/60sapi/日更资讯/每天60s读懂世界/js/script.js
View File

@@ -15,7 +15,7 @@ const API = {
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/60s`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/60s`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/60s']; this.endpoints = ['https://60s.api.shumengya.top/v2/60s'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

2
frontend/60sapi/日更资讯/每日国际汇率/js/script.js
View File

@@ -14,7 +14,7 @@ const API = {
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/exchange_rate`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/exchange_rate`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/exchange_rate']; this.endpoints = ['https://60s.api.shumengya.top/v2/exchange_rate'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL

534
frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css
View File

@@ -109,14 +109,20 @@ body {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
header { header, .header {
text-align: center; text-align: center;
margin-bottom: 28px; margin-bottom: 28px;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
header h1 { .header-icon {
font-size: 3rem;
margin-bottom: 10px;
display: block;
}
header h1, .title {
background: linear-gradient(135deg, #4096ff, #ff7a45); background: linear-gradient(135deg, #4096ff, #ff7a45);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
@@ -127,6 +133,82 @@ header h1 {
letter-spacing: -0.5px; letter-spacing: -0.5px;
} }
.subtitle {
color: #666;
font-size: 1.1rem;
margin-bottom: 20px;
font-weight: 400;
}
.tab-container {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn {
background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
border: none;
padding: 12px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: #666;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.tab-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tab-btn.active {
background: linear-gradient(135deg, #4096ff, #40a9ff);
color: white;
box-shadow: 0 4px 16px rgba(64, 150, 255, 0.3);
}
.tab-icon {
font-size: 1.1rem;
}
.refresh-btn {
background: linear-gradient(135deg, #52c41a, #73d13d);
border: none;
padding: 12px 24px;
border-radius: 25px;
color: white;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
margin-top: 15px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}
.refresh-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
}
.btn-icon {
font-size: 1.1rem;
}
.time-icon {
margin-right: 6px;
}
.update-time { .update-time {
color: #666; color: #666;
font-size: 0.9rem; font-size: 0.9rem;
@@ -215,6 +297,331 @@ header h1 {
padding: 40px; padding: 40px;
color: #666; color: #666;
font-size: 1.1rem; font-size: 1.1rem;
display: none;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.rainbow-spinner {
width: 50px;
height: 50px;
border: 4px solid transparent;
border-top: 4px solid #4096ff;
border-radius: 50%;
animation: spin 1s linear infinite;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff, #5f27cd);
background-size: 400% 400%;
animation: spin 1s linear infinite, rainbowGradient 3s ease infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.loading-emoji {
font-size: 2rem;
animation: bounce 1.5s ease-in-out infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.loading-dots {
display: flex;
gap: 4px;
}
.loading-dots span {
width: 8px;
height: 8px;
background: #4096ff;
border-radius: 50%;
animation: loadingDots 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes loadingDots {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.news-list {
margin-top: 20px;
}
/* 新闻项目卡片 - 移动端优先设计 */
.news-item {
background: white;
border-radius: 16px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
gap: 12px;
position: relative;
overflow: hidden;
}
.news-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-color: rgba(64, 169, 255, 0.2);
}
/* 排名容器 */
.news-rank-container {
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 2px;
}
.news-rank {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
color: #666;
font-weight: 600;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.news-rank.rank-1 {
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
color: white;
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}
.news-rank.rank-2 {
background: linear-gradient(135deg, #ff7a45, #ffa940);
color: white;
box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
}
.news-rank.rank-3 {
background: linear-gradient(135deg, #ffa940, #ffec3d);
color: #333;
box-shadow: 0 4px 12px rgba(255, 169, 64, 0.3);
}
.rank-number {
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
}
.rank-emoji {
font-size: 0.7rem;
line-height: 1;
margin-top: 1px;
}
/* 内容包装器 */
.news-content-wrapper {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* 标题 */
.news-title {
font-size: 1rem;
font-weight: 600;
color: #333;
line-height: 1.4;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: color 0.2s ease;
}
.news-title:hover {
color: #4096ff;
}
/* 元信息行 */
.news-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.news-author, .news-time {
display: flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 0.8rem;
flex: 1;
min-width: 0;
}
.meta-icon {
font-size: 0.9rem;
flex-shrink: 0;
}
.meta-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 统计信息行 */
.news-stats-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.news-score {
display: flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.heat-level {
font-size: 0.8rem;
}
.score-text {
font-size: 0.75rem;
}
.news-link {
display: flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #4096ff, #40a9ff);
color: white;
text-decoration: none;
padding: 6px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
flex-shrink: 0;
}
.news-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(64, 150, 255, 0.4);
text-decoration: none;
color: white;
}
.link-icon {
font-size: 0.8rem;
}
.link-text {
font-size: 0.75rem;
}
.error-message {
text-align: center;
padding: 40px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.error-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.error-icon {
font-size: 3rem;
}
.error-content h3 {
color: #ff4d4f;
margin: 0;
font-size: 1.3rem;
}
.error-content p {
color: #666;
margin: 0;
font-size: 1rem;
}
.retry-btn {
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
border: none;
padding: 12px 24px;
border-radius: 25px;
color: white;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}
.retry-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
} }
footer { footer {
@@ -226,7 +633,7 @@ footer {
font-size: 0.9rem; font-size: 0.9rem;
} }
/* 响应式设计 */ /* 响应式设计 - 移动端优化 */
@media (max-width: 1024px) and (min-width: 768px) { @media (max-width: 1024px) and (min-width: 768px) {
.container { .container {
max-width: 90%; max-width: 90%;
@@ -254,20 +661,40 @@ footer {
.container { .container {
max-width: 95%; max-width: 95%;
margin: 12px auto; margin: 12px auto;
padding: 16px; padding: 8px;
border-radius: 12px; border-radius: 12px;
} }
header { header, .header {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 16px; padding: 12px 0 16px 0;
} }
header h1 { header h1, .title {
font-size: 1.8rem; font-size: 1.6rem;
margin-bottom: 10px; margin-bottom: 10px;
} }
.subtitle {
font-size: 0.85rem;
}
.tab-container {
gap: 8px;
margin: 16px 0;
}
.tab-btn {
padding: 8px 12px;
font-size: 0.8rem;
min-width: auto;
}
.refresh-btn {
padding: 8px 10px;
font-size: 0.8rem;
}
.update-time { .update-time {
font-size: 0.85rem; font-size: 0.85rem;
padding: 6px 12px; padding: 6px 12px;
@@ -296,6 +723,52 @@ footer {
margin-bottom: 6px; margin-bottom: 6px;
} }
.news-item {
padding: 12px;
margin-bottom: 10px;
gap: 10px;
}
.news-rank {
width: 40px;
height: 40px;
}
.rank-number {
font-size: 0.8rem;
}
.rank-emoji {
font-size: 0.6rem;
}
.news-title {
font-size: 0.9rem;
line-height: 1.3;
}
.news-meta-row {
gap: 8px;
}
.news-author, .news-time {
font-size: 0.75rem;
}
.news-score {
padding: 3px 8px;
font-size: 0.7rem;
}
.news-link {
padding: 5px 10px;
font-size: 0.7rem;
}
.link-text {
font-size: 0.7rem;
}
footer { footer {
margin-top: 24px; margin-top: 24px;
padding-top: 16px; padding-top: 16px;
@@ -306,10 +779,10 @@ footer {
@media (max-width: 480px) { @media (max-width: 480px) {
.container { .container {
margin: 8px auto; margin: 8px auto;
padding: 14px; padding: 6px;
} }
header h1 { header h1, .title {
font-size: 1.6rem; font-size: 1.6rem;
} }
@@ -329,6 +802,47 @@ footer {
.hot-title { .hot-title {
font-size: 0.95rem; font-size: 0.95rem;
} }
.news-item {
padding: 10px;
gap: 8px;
}
.news-rank {
width: 36px;
height: 36px;
}
.rank-number {
font-size: 0.75rem;
}
.news-title {
font-size: 0.85rem;
}
.news-meta-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.news-stats-row {
gap: 8px;
}
.news-author, .news-time {
font-size: 0.7rem;
}
.news-score {
font-size: 0.65rem;
}
.news-link {
font-size: 0.65rem;
padding: 4px 8px;
}
} }
/* 减少动画以节省电池 */ /* 减少动画以节省电池 */

47
frontend/60sapi/热搜榜单/Hacker News 榜单/js/script.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top",
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
]; ];
// 当前使用的API索引 // 当前使用的API索引
@@ -118,7 +114,7 @@ function createNewsItem(item, rank) {
const newsItem = document.createElement('div'); const newsItem = document.createElement('div');
newsItem.className = 'news-item'; newsItem.className = 'news-item';
const rankClass = rank <= 5 ? 'news-rank top-5' : 'news-rank'; const rankClass = rank <= 3 ? `news-rank rank-${rank}` : 'news-rank';
const formattedScore = formatScore(item.score); const formattedScore = formatScore(item.score);
const formattedTime = formatTime(item.created); const formattedTime = formatTime(item.created);
@@ -127,8 +123,6 @@ function createNewsItem(item, rank) {
if (rank === 1) rankEmoji = '🏆'; if (rank === 1) rankEmoji = '🏆';
else if (rank === 2) rankEmoji = '🥈'; else if (rank === 2) rankEmoji = '🥈';
else if (rank === 3) rankEmoji = '🥉'; else if (rank === 3) rankEmoji = '🥉';
else if (rank <= 10) rankEmoji = '💎';
else rankEmoji = '⭐';
// 根据评分添加热度指示 // 根据评分添加热度指示
let heatLevel = ''; let heatLevel = '';
@@ -138,18 +132,35 @@ function createNewsItem(item, rank) {
else heatLevel = '💫'; else heatLevel = '💫';
newsItem.innerHTML = ` newsItem.innerHTML = `
<div class="news-header"> <div class="news-rank-container">
<div class="${rankClass}">${rank}</div> <div class="${rankClass}">
<div class="news-score">${heatLevel} ${formattedScore}</div> <span class="rank-number">${rank}</span>
<span class="rank-emoji">${rankEmoji}</span>
</div>
</div> </div>
<div class="news-title">${rankEmoji} ${escapeHtml(item.title)}</div> <div class="news-content-wrapper">
<div class="news-meta"> <h3 class="news-title">${escapeHtml(item.title)}</h3>
<div class="news-author">👤 ${escapeHtml(item.author)}</div> <div class="news-meta-row">
<div class="news-time">🕒 ${formattedTime}</div> <div class="news-author">
<span class="meta-icon">👤</span>
<span class="meta-text">${escapeHtml(item.author)}</span>
</div>
<div class="news-time">
<span class="meta-icon">🕒</span>
<span class="meta-text">${formattedTime}</span>
</div>
</div>
<div class="news-stats-row">
<div class="news-score">
<span class="heat-level">${heatLevel}</span>
<span class="score-text">${formattedScore} 分</span>
</div>
<a href="${item.link}" target="_blank" class="news-link">
<span class="link-icon">🚀</span>
<span class="link-text">阅读全文</span>
</a>
</div>
</div> </div>
<a href="${item.link}" target="_blank" class="news-link">
🚀 阅读全文
</a>
`; `;
return newsItem; return newsItem;

6
frontend/60sapi/热搜榜单/Hacker News 榜单/接口集合.json
View File

@@ -1,7 +1,3 @@
[ [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top"
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
] ]

6
frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s.viki.moe/v2/bili", "https://60s.api.shumengya.top/v2/bili"
"https://60s-cf.viki.moe/v2/bili",
"https://60s.b23.run/v2/bili",
"https://60s.114128.xyz/v2/bili",
"https://60s-cf.114128.xyz/v2/bili"
]; ];
// 当前使用的API索引 // 当前使用的API索引

6
frontend/60sapi/热搜榜单/头条热搜榜/js/main.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s.viki.moe/v2/toutiao", "https://60s.api.shumengya.top/v2/toutiao",
"https://60s-cf.viki.moe/v2/toutiao",
"https://60s.b23.run/v2/toutiao",
"https://60s.114128.xyz/v2/toutiao",
"https://60s-cf.114128.xyz/v2/toutiao"
]; ];
// 当前使用的API索引 // 当前使用的API索引

6
frontend/60sapi/热搜榜单/微博热搜榜/js/main.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s-cf.viki.moe/v2/weibo", "https://60s.api.shumengya.top/v2/weibo",
"https://60s.viki.moe/v2/weibo",
"https://60s.b23.run/v2/weibo",
"https://60s.114128.xyz/v2/weibo",
"https://60s-cf.114128.xyz/v2/weibo"
]; ];
// 当前使用的API索引 // 当前使用的API索引

344
frontend/60sapi/热搜榜单/抖音热搜榜/css/style.css
View File

@@ -137,92 +137,203 @@ header h1 {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
} }
/* 热搜列表 - 移动端优先设计 */
.hot-list { .hot-list {
list-style: none; list-style: none;
} }
.hot-item { .hot-item {
padding: 20px; background: white;
margin-bottom: 16px; border-radius: 16px;
border-radius: 12px; padding: 16px;
background-color: white; margin-bottom: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid rgba(0, 0, 0, 0.03); gap: 12px;
position: relative;
overflow: hidden;
} }
.hot-item:hover { .hot-item:hover {
transform: translateY(-3px); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
border-color: rgba(64, 169, 255, 0.3); border-color: rgba(64, 169, 255, 0.2);
}
/* 排名容器 */
.hot-rank-container {
flex-shrink: 0;
display: flex;
align-items: center;
} }
.hot-rank { .hot-rank {
font-size: 1.2rem;
font-weight: bold;
color: #4096ff;
margin-right: 18px;
min-width: 38px;
text-align: center;
background-color: rgba(64, 169, 255, 0.1);
border-radius: 50%;
width: 38px;
height: 38px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} width: 48px;
height: 48px;
.hot-rank.top-1 { border-radius: 12px;
background: linear-gradient(135deg, #ff4d4f, #ff7a45); background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
color: white; color: #666;
} font-weight: 600;
position: relative;
.hot-rank.top-2 {
background: linear-gradient(135deg, #ff7a45, #ffa940);
color: white;
}
.hot-rank.top-3 {
background: linear-gradient(135deg, #ffa940, #ffec3d);
color: white;
}
.hot-content {
flex: 1;
display: flex;
align-items: flex-start;
gap: 15px;
}
.hot-cover {
width: 120px;
height: 80px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.hot-info { .hot-rank.rank-1 {
flex: 1; background: linear-gradient(135deg, #ff4d4f, #ff7a45);
color: white;
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
} }
.hot-title { .hot-rank.rank-2 {
font-size: 1.15rem; background: linear-gradient(135deg, #ff7a45, #ffa940);
margin-bottom: 8px; color: white;
box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
}
.hot-rank.rank-3 {
background: linear-gradient(135deg, #ffa940, #ffec3d);
color: #333; color: #333;
text-decoration: none; box-shadow: 0 4px 12px rgba(255, 169, 64, 0.3);
display: block; }
line-height: 1.5;
font-weight: 500; .rank-number {
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
}
.rank-emoji {
font-size: 0.7rem;
line-height: 1;
margin-top: 1px;
}
/* 内容包装器 */
.hot-content-wrapper {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
/* 标题 */
.hot-title {
font-size: 1rem;
font-weight: 600;
color: #333;
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.hot-title:hover { .hot-title:hover {
color: #4096ff; color: #4096ff;
}
/* 底部行 */
.hot-bottom-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.hot-time {
display: flex;
align-items: center;
gap: 4px;
color: #666;
font-size: 0.8rem;
flex-shrink: 0;
}
.meta-icon {
font-size: 0.9rem;
flex-shrink: 0;
}
.meta-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hot-value {
display: flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.heat-level {
font-size: 0.8rem;
}
.value-text {
font-size: 0.75rem;
}
/* 图片样式 */
.hot-cover {
width: 80px;
height: 60px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.hot-link {
display: flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #4096ff, #40a9ff);
color: white;
text-decoration: none; text-decoration: none;
padding: 6px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
flex-shrink: 0;
}
.hot-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(64, 150, 255, 0.4);
text-decoration: none;
color: white;
}
.link-icon {
font-size: 0.8rem;
}
.link-text {
font-size: 0.75rem;
} }
.loading { .loading {
@@ -241,7 +352,7 @@ footer {
font-size: 0.9rem; font-size: 0.9rem;
} }
/* 响应式设计 */ /* 响应式设计 - 移动端优化 */
@media (max-width: 1024px) and (min-width: 768px) { @media (max-width: 1024px) and (min-width: 768px) {
.container { .container {
max-width: 90%; max-width: 90%;
@@ -254,6 +365,12 @@ footer {
.hot-item { .hot-item {
padding: 18px; padding: 18px;
gap: 14px;
}
.hot-rank {
width: 52px;
height: 52px;
} }
.hot-title { .hot-title {
@@ -262,20 +379,16 @@ footer {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
body {
background-color: #f8f9fa;
}
.container { .container {
max-width: 95%; max-width: 95%;
margin: 12px auto; margin: 12px auto;
padding: 16px; padding: 8px;
border-radius: 12px; border-radius: 12px;
} }
header { header {
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 16px; padding: 12px 0 16px 0;
} }
header h1 { header h1 {
@@ -289,35 +402,54 @@ footer {
} }
.hot-item { .hot-item {
padding: 16px; padding: 12px;
margin-bottom: 12px; margin-bottom: 10px;
border-radius: 10px; gap: 10px;
flex-direction: row;
align-items: flex-start;
} }
.hot-rank { .hot-rank {
font-size: 1.1rem; width: 40px;
margin-right: 14px; height: 40px;
min-width: 32px; }
width: 32px;
height: 32px; .rank-number {
margin-top: 2px; font-size: 0.8rem;
}
.rank-emoji {
font-size: 0.6rem;
} }
.hot-title { .hot-title {
font-size: 1rem; font-size: 0.9rem;
line-height: 1.5; line-height: 1.3;
margin-bottom: 6px; }
.hot-meta-row {
gap: 8px;
}
.hot-time {
font-size: 0.75rem;
}
.hot-value {
padding: 3px 8px;
font-size: 0.7rem;
} }
.hot-cover { .hot-cover {
width: 100px; width: 70px;
height: 70px; height: 50px;
} }
.hot-content { .hot-link {
gap: 10px; padding: 5px 10px;
font-size: 0.7rem;
}
.link-text {
font-size: 0.7rem;
} }
footer { footer {
@@ -330,7 +462,7 @@ footer {
@media (max-width: 480px) { @media (max-width: 480px) {
.container { .container {
margin: 8px auto; margin: 8px auto;
padding: 14px; padding: 6px;
} }
header h1 { header h1 {
@@ -338,20 +470,50 @@ footer {
} }
.hot-item { .hot-item {
padding: 14px; padding: 10px;
margin-bottom: 10px; margin-bottom: 8px;
gap: 8px;
} }
.hot-rank { .hot-rank {
font-size: 1rem; width: 36px;
margin-right: 12px; height: 36px;
min-width: 30px; }
width: 30px;
height: 30px; .rank-number {
font-size: 0.75rem;
} }
.hot-title { .hot-title {
font-size: 0.95rem; font-size: 0.85rem;
}
.hot-meta-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.hot-media-row {
gap: 8px;
}
.hot-time {
font-size: 0.7rem;
}
.hot-value {
font-size: 0.65rem;
}
.hot-cover {
width: 60px;
height: 45px;
}
.hot-link {
font-size: 0.65rem;
padding: 4px 8px;
} }
} }

52
frontend/60sapi/热搜榜单/抖音热搜榜/js/script.js
View File

@@ -3,11 +3,7 @@ const LOCAL_API_BASE = 'https://infogenie.api.shumengya.top/api/60s';
// API接口列表（备用） // API接口列表（备用）
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top",
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
]; ];
// 当前使用的API索引 // 当前使用的API索引
@@ -123,42 +119,50 @@ function createHotItem(item, rank) {
const hotItem = document.createElement('div'); const hotItem = document.createElement('div');
hotItem.className = 'hot-item'; hotItem.className = 'hot-item';
const rankClass = rank <= 3 ? 'hot-rank top-3' : 'hot-rank'; // 排名样式类
let rankClass = 'hot-rank';
if (rank === 1) rankClass += ' rank-1';
else if (rank === 2) rankClass += ' rank-2';
else if (rank === 3) rankClass += ' rank-3';
const formattedHotValue = formatHotValue(item.hot_value); const formattedHotValue = formatHotValue(item.hot_value);
const formattedTime = formatTime(item.event_time); const formattedTime = formatTime(item.event_time);
// 根据排名添加特殊标识 // 根据排名添加特殊标识
let rankEmoji = ''; let rankEmoji = '';
if (rank === 1) rankEmoji = '🥇'; if (rank === 1) rankEmoji = '👑';
else if (rank === 2) rankEmoji = '🥈'; else if (rank === 2) rankEmoji = '🥈';
else if (rank === 3) rankEmoji = '🥉'; else if (rank === 3) rankEmoji = '🥉';
else if (rank <= 10) rankEmoji = '🔥'; else if (rank <= 10) rankEmoji = '🔥';
else rankEmoji = '📈';
// 根据热度值添加火焰等级 // 根据热度值添加火焰等级
let fireLevel = ''; let fireLevel = '';
if (item.hot_value >= 11000000) fireLevel = '🔥🔥🔥🔥🔥🔥🔥🔥🔥'; if (item.hot_value >= 10000000) fireLevel = '🔥🔥🔥';
else if (item.hot_value >= 1000000) fireLevel = '🔥🔥🔥🔥🔥🔥🔥🔥';
else if (item.hot_value >= 9500000) fireLevel = '🔥🔥🔥🔥🔥🔥🔥';
else if (item.hot_value >= 9000000) fireLevel = '🔥🔥🔥🔥🔥🔥';
else if (item.hot_value >= 8000000) fireLevel = '🔥🔥🔥🔥🔥';
else if (item.hot_value >= 7000000) fireLevel = '🔥🔥🔥🔥';
else if (item.hot_value >= 6000000) fireLevel = '🔥🔥🔥';
else if (item.hot_value >= 5000000) fireLevel = '🔥🔥'; else if (item.hot_value >= 5000000) fireLevel = '🔥🔥';
else fireLevel = '🔥'; else fireLevel = '🔥';
hotItem.innerHTML = ` hotItem.innerHTML = `
<div class="hot-item-header"> <div class="hot-rank-container">
<div class="${rankClass}">${rank}</div> <div class="${rankClass}">
<div class="hot-title">${rankEmoji} ${escapeHtml(item.title)}</div> <div class="rank-number">${rank}</div>
<div class="rank-emoji">${rankEmoji}</div>
</div>
</div> </div>
<div class="hot-content"> <img src="${item.cover}" alt="${escapeHtml(item.title)}" class="hot-cover" onerror="handleImageError(this)">
<img src="${item.cover}" alt="${escapeHtml(item.title)}" class="hot-cover" onerror="handleImageError(this)"> <div class="hot-content-wrapper">
<div class="hot-info"> <div class="hot-title">${escapeHtml(item.title)}</div>
<div class="hot-value">${fireLevel} ${formattedHotValue}</div> <div class="hot-bottom-row">
<div class="hot-time"> ${formattedTime}</div> <div class="hot-time">
<span class="meta-icon">⏰</span>
<span class="meta-text">${formattedTime}</span>
</div>
<div class="hot-value">
<span class="heat-level">${fireLevel}</span>
<span class="value-text">${formattedHotValue}</span>
</div>
<a href="${item.link}" target="_blank" class="hot-link"> <a href="${item.link}" target="_blank" class="hot-link">
查看详情 <span class="link-icon">🎬</span>
<span class="link-text">观看视频</span>
</a> </a>
</div> </div>
</div> </div>

771
frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
View File

@@ -1,200 +1,232 @@
/* 背景样式 */ /* 现代化猫眼票房排行榜样式 */
.background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-color: #f8f9fa;
}
.modern-gradient { /* 全局重置和基础样式 */
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
135deg,
rgba(64, 169, 255, 0.4) 0%,
rgba(120, 192, 255, 0.3) 25%,
rgba(255, 175, 64, 0.2) 50%,
rgba(255, 140, 50, 0.3) 75%,
rgba(255, 122, 69, 0.4) 100%
);
animation: gradient-flow 20s ease-in-out infinite;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.modern-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 30% 70%,
rgba(64, 169, 255, 0.5) 0%,
transparent 50%
), radial-gradient(
circle at 70% 30%,
rgba(255, 140, 50, 0.4) 0%,
transparent 50%
);
animation: pulse-effect 15s ease-in-out infinite alternate;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
@keyframes gradient-flow {
0%, 100% {
transform: rotate(0deg) scale(1);
opacity: 0.8;
}
25% {
transform: rotate(90deg) scale(1.1);
opacity: 0.6;
}
50% {
transform: rotate(180deg) scale(0.9);
opacity: 0.9;
}
75% {
transform: rotate(270deg) scale(1.05);
opacity: 0.7;
}
}
@keyframes pulse-effect {
0% {
transform: scale(1) rotate(0deg);
opacity: 0.5;
}
50% {
transform: scale(1.2) rotate(180deg);
opacity: 0.8;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 0.6;
}
}
/* 主样式 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
:root {
/* 主色调 */
--primary-color: #667eea;
--primary-light: #764ba2;
--secondary-color: #f093fb;
--accent-color: #4facfe;
/* 中性色 */
--text-primary: #2d3748;
--text-secondary: #4a5568;
--text-muted: #718096;
--bg-primary: #ffffff;
--bg-secondary: #f7fafc;
--bg-tertiary: #edf2f7;
/* 状态色 */
--success-color: #48bb78;
--warning-color: #ed8936;
--error-color: #f56565;
/* 阴影 */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
/* 圆角 */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
/* 间距 */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
}
body { body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
color: #333; line-height: 1.6;
background-color: #f8f9fa; color: var(--text-primary);
position: relative; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 24px;
position: relative; position: relative;
z-index: 1; overflow-x: hidden;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
} }
header { /* 动态背景效果 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
z-index: -1;
animation: backgroundShift 20s ease-in-out infinite;
}
@keyframes backgroundShift {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.8;
}
50% {
transform: scale(1.1) rotate(180deg);
opacity: 0.6;
}
}
/* 主容器 */
.container {
max-width: 900px;
margin: var(--space-lg) auto;
padding: var(--space-xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 头部样式 */
.header {
text-align: center; text-align: center;
margin-bottom: 28px; margin-bottom: var(--space-2xl);
padding-bottom: 20px; padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 2px solid var(--bg-tertiary);
position: relative;
} }
header h1 { .header::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.header h1 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 14px; gap: var(--space-md);
font-size: 2.4rem; margin-bottom: var(--space-md);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 700; font-weight: 700;
letter-spacing: -0.5px; letter-spacing: -0.02em;
flex-wrap: wrap; flex-wrap: wrap;
} }
header h1 .icon { .header h1 .icon {
margin-right: 10px; font-size: 1.2em;
font-size: 2.6rem; animation: bounce 2s infinite;
animation: pulse 2s infinite ease-in-out; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
} }
header h1 .title-text { @keyframes bounce {
background: linear-gradient(135deg, #4096ff, #ff7a45); 0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
.header h1 .title-text {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent; color: transparent;
position: relative;
} }
header h1 .update-badge { .header h1 .update-badge {
font-size: 0.9rem; font-size: 0.4em;
background: linear-gradient(135deg, #ff7a45, #ff4d4f); background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
color: white; color: white;
padding: 4px 10px; padding: var(--space-xs) var(--space-md);
border-radius: 20px; border-radius: var(--radius-xl);
margin-left: 12px; font-weight: 600;
font-weight: 500; box-shadow: var(--shadow-md);
box-shadow: 0 2px 8px rgba(255, 122, 69, 0.3); animation: pulse 3s infinite;
animation: float 3s infinite ease-in-out; white-space: nowrap;
}
.header-desc {
color: #666;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.5px;
margin-top: 10px;
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { 0%, 100% {
transform: scale(1); transform: scale(1);
box-shadow: var(--shadow-md);
} }
50% { 50% {
transform: scale(1.1); transform: scale(1.05);
box-shadow: var(--shadow-lg);
} }
} }
@keyframes float { .header-desc {
0%, 100% { color: var(--text-secondary);
transform: translateY(0); font-size: 1.1rem;
} font-weight: 500;
50% { margin-top: var(--space-sm);
transform: translateY(-5px);
}
} }
.update-time { /* 加载状态 */
color: #666; .loading {
font-size: 0.9rem; text-align: center;
background-color: rgba(0, 0, 0, 0.03); padding: var(--space-2xl);
padding: 8px 16px; color: var(--text-secondary);
border-radius: 24px;
display: inline-block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
.movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
animation: fadeInUp 0.8s ease-out;
} }
@keyframes fadeInUp { .spinner {
width: 40px;
height: 40px;
margin: 0 auto var(--space-md);
border: 3px solid var(--bg-tertiary);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 内容区域 */
.content {
animation: fadeIn 0.6s ease-out 0.2s both;
}
@keyframes fadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
@@ -205,301 +237,346 @@ header h1 .update-badge {
} }
} }
.movie-item { .ranking-title {
padding: 20px; font-size: 1.5rem;
border-radius: 12px; font-weight: 600;
background-color: white; color: var(--text-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); margin-bottom: var(--space-lg);
transition: all 0.3s ease; text-align: center;
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.03);
overflow: hidden;
position: relative; position: relative;
} }
.movie-item:hover { /* 电影列表 */
transform: translateY(-5px); .movie-list {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); display: flex;
border-color: rgba(64, 169, 255, 0.3); flex-direction: column;
gap: var(--space-md);
} }
.movie-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--bg-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.movie-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.02) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.movie-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: rgba(102, 126, 234, 0.2);
}
.movie-item:hover::before {
opacity: 1;
}
/* 特殊排名样式 */
.movie-item.top-1 { .movie-item.top-1 {
background: linear-gradient(to bottom right, rgba(255, 215, 0, 0.1), white); background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, var(--bg-primary) 100%);
border-color: rgba(255, 215, 0, 0.3); border-color: rgba(255, 215, 0, 0.3);
} }
.movie-item.top-2 { .movie-item.top-2 {
background: linear-gradient(to bottom right, rgba(192, 192, 192, 0.1), white); background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, var(--bg-primary) 100%);
border-color: rgba(192, 192, 192, 0.3); border-color: rgba(192, 192, 192, 0.3);
} }
.movie-item.top-3 { .movie-item.top-3 {
background: linear-gradient(to bottom right, rgba(205, 127, 50, 0.1), white); background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, var(--bg-primary) 100%);
border-color: rgba(205, 127, 50, 0.3); border-color: rgba(205, 127, 50, 0.3);
} }
.hot-item { /* 排名徽章 */
padding: 20px; .movie-rank {
margin-bottom: 16px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
display: flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.hot-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
border-color: rgba(64, 169, 255, 0.3);
}
.rank-badge {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.2rem;
font-weight: bold;
color: #4096ff;
min-width: 38px;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 38px;
height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); width: 50px;
z-index: 2; height: 50px;
border-radius: var(--radius-md);
font-size: 1.2rem;
font-weight: 700;
flex-shrink: 0;
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative;
} }
.movie-item:hover .rank-badge { .movie-item:hover .movie-rank {
transform: scale(1.1); transform: scale(1.1);
} }
.rank-badge.gold { .movie-rank.gold {
background: linear-gradient(135deg, #ffd700, #ffb700); background: linear-gradient(135deg, #ffd700, #ffb700);
color: white; color: white;
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
} }
.rank-badge.silver { .movie-rank.silver {
background: linear-gradient(135deg, #c0c0c0, #a0a0a0); background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
color: white; color: white;
box-shadow: 0 2px 10px rgba(192, 192, 192, 0.4); box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4);
} }
.rank-badge.bronze { .movie-rank.bronze {
background: linear-gradient(135deg, #cd7f32, #b06728); background: linear-gradient(135deg, #cd7f32, #b06728);
color: white; color: white;
box-shadow: 0 2px 10px rgba(205, 127, 50, 0.4); box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4);
} }
.rank-badge.regular { .movie-rank.regular {
background: linear-gradient(135deg, #f0f0f0, #e0e0e0); background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
color: #666;
}
.hot-rank.top-1 {
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
color: white; color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
} }
.hot-rank.top-2 { /* 电影内容 */
background: linear-gradient(135deg, #ff7a45, #ffa940); .movie-content {
color: white;
}
.hot-rank.top-3 {
background: linear-gradient(135deg, #ffa940, #ffec3d);
color: white;
}
.movie-info {
padding: 25px 0 5px;
flex: 1; flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-sm);
min-width: 0;
} }
.movie-name { .movie-title {
font-size: 1.15rem; font-size: 1.1rem;
margin-bottom: 8px;
color: #333;
font-weight: 600; font-weight: 600;
color: var(--text-primary);
line-height: 1.4; line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.movie-detail { .movie-meta {
color: #666;
font-size: 0.9rem;
margin-bottom: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
} }
.movie-detail .label { .movie-year {
color: #999; color: var(--text-muted);
margin-right: 5px; font-size: 0.85rem;
background: var(--bg-tertiary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-weight: 500;
} }
.movie-boxoffice { .movie-boxoffice {
font-weight: 600; font-weight: 700;
color: #ff7a45; color: var(--warning-color);
font-size: 1.1rem; font-size: 1rem;
margin-top: 10px; white-space: nowrap;
} }
.movie-boxoffice .currency { /* 更新时间 */
font-size: 0.85rem; .update-time {
color: #999;
margin-right: 2px;
}
.loading {
text-align: center; text-align: center;
padding: 40px; margin-top: var(--space-lg);
color: #666; padding: var(--space-md);
font-size: 1.1rem; background: var(--bg-secondary);
} border-radius: var(--radius-md);
color: var(--text-secondary);
footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
color: #666;
font-size: 0.9rem; font-size: 0.9rem;
border: 1px solid var(--bg-tertiary);
}
/* 错误状态 */
.error {
text-align: center;
padding: var(--space-2xl);
color: var(--error-color);
}
.error h3 {
font-size: 1.2rem;
margin-bottom: var(--space-md);
}
.error p {
margin-bottom: var(--space-sm);
color: var(--text-secondary);
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 1024px) and (min-width: 768px) {
.container {
max-width: 90%;
padding: 20px;
}
header h1 {
font-size: 2.2rem;
}
.hot-item {
padding: 18px;
}
.hot-title {
font-size: 1.1rem;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
body {
background-color: #f8f9fa;
}
.container { .container {
max-width: 95%; margin: var(--space-md);
margin: 12px auto; padding: var(--space-lg);
padding: 16px; border-radius: var(--radius-lg);
border-radius: 12px;
} }
header { .header {
margin-bottom: 20px; margin-bottom: var(--space-lg);
padding-bottom: 16px; padding-bottom: var(--space-md);
} }
header h1 { .header h1 {
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 10px; gap: var(--space-sm);
} }
.update-time { .header h1 .update-badge {
font-size: 0.85rem; font-size: 0.35em;
padding: 6px 12px; padding: 2px var(--space-sm);
} }
.hot-item { .movie-item {
padding: 16px; padding: var(--space-md);
margin-bottom: 12px; gap: var(--space-sm);
border-radius: 10px;
flex-direction: row;
align-items: flex-start;
} }
.hot-rank { .movie-rank {
font-size: 1.1rem; width: 42px;
margin-right: 14px; height: 42px;
min-width: 32px;
width: 32px;
height: 32px;
margin-top: 2px;
}
.hot-title {
font-size: 1rem; font-size: 1rem;
line-height: 1.5;
margin-bottom: 6px;
} }
footer { .movie-title {
margin-top: 24px; font-size: 1rem;
padding-top: 16px; }
font-size: 0.85rem;
.movie-meta {
gap: var(--space-sm);
}
.movie-year {
font-size: 0.8rem;
}
.movie-boxoffice {
font-size: 0.9rem;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.container { .container {
margin: 8px auto; margin: var(--space-sm);
padding: 14px; padding: var(--space-md);
} }
header h1 { .header h1 {
font-size: 1.6rem; font-size: 1.6rem;
flex-direction: column;
gap: var(--space-xs);
} }
.hot-item { .movie-list {
padding: 14px; gap: var(--space-sm);
margin-bottom: 10px;
} }
.hot-rank { .movie-item {
font-size: 1rem; padding: var(--space-sm);
margin-right: 12px;
min-width: 30px;
width: 30px;
height: 30px;
} }
.hot-title { .movie-rank {
width: 38px;
height: 38px;
font-size: 0.9rem;
}
.movie-title {
font-size: 0.95rem; font-size: 0.95rem;
} }
.movie-meta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
} }
/* 减少动画以节省电池 */ /* 减少动画以节省电池 */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.modern-gradient, *,
.modern-gradient::before { *::before,
animation: none; *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
} }
.modern-gradient { body::before {
background: linear-gradient( animation: none;
135deg, }
rgba(64, 169, 255, 0.3) 0%, }
rgba(255, 175, 64, 0.2) 50%,
rgba(255, 122, 69, 0.25) 100% /* 深色模式支持 */
); @media (prefers-color-scheme: dark) {
:root {
--text-primary: #f7fafc;
--text-secondary: #e2e8f0;
--text-muted: #a0aec0;
--bg-primary: #2d3748;
--bg-secondary: #4a5568;
--bg-tertiary: #718096;
}
body {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}
.container {
background: rgba(45, 55, 72, 0.95);
border-color: rgba(255, 255, 255, 0.1);
}
.movie-item {
background: var(--bg-primary);
border-color: rgba(255, 255, 255, 0.1);
}
.movie-item:hover {
border-color: rgba(102, 126, 234, 0.4);
}
}
/* 打印样式 */
@media print {
body {
background: white;
color: black;
}
body::before {
display: none;
}
.container {
background: white;
box-shadow: none;
border: 1px solid #ccc;
}
.movie-item {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.header h1 .update-badge {
background: #666;
} }
} }

22
frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
View File

@@ -15,7 +15,7 @@ const API = {
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/maoyan`); this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/maoyan`);
} catch (e) { } catch (e) {
// 如果无法加载接口集合，使用默认接口 // 如果无法加载接口集合，使用默认接口
this.endpoints = ['https://60s.viki.moe/v2/maoyan']; this.endpoints = ['https://60s.api.shumengya.top/v2/maoyan'];
} }
}, },
// 获取当前接口URL // 获取当前接口URL
@@ -199,22 +199,24 @@ function renderMovieItem(item) {
// 美化排名显示 // 美化排名显示
let rankDisplay; let rankDisplay;
if (rank === 1) { if (rank === 1) {
rankDisplay = '🏆 1'; rankDisplay = '🏆';
} else if (rank === 2) { } else if (rank === 2) {
rankDisplay = '🥈 2'; rankDisplay = '🥈';
} else if (rank === 3) { } else if (rank === 3) {
rankDisplay = '🥉 3'; rankDisplay = '🥉';
} else { } else {
rankDisplay = `NO.${rank}`; rankDisplay = rank;
} }
return ` return `
<div class="movie-item ${cls}"> <div class="movie-item ${cls}">
<div class="rank-badge ${badgeCls}">${rankDisplay}</div> <div class="movie-rank ${badgeCls}">${rankDisplay}</div>
<div class="movie-info"> <div class="movie-content">
<div class="movie-name">${escapeHtml(item.movie_name)}</div> <div class="movie-title">${escapeHtml(item.movie_name)}</div>
<div class="movie-detail"><span class="label">上映:</span> ${escapeHtml(item.release_year || '未知')}</div> <div class="movie-meta">
<div class="movie-boxoffice"><span class="currency">¥</span> ${boxOffice}</div> <span class="movie-year">${escapeHtml(item.release_year || '未知')}</span>
<span class="movie-boxoffice">¥${boxOffice}</span>
</div>
</div> </div>
</div>`; </div>`;
} }

6
frontend/60sapi/热搜榜单/知乎热门话题/js/main.js
View File

@@ -1,10 +1,6 @@
// API接口列表 // API接口列表
const API_ENDPOINTS = [ const API_ENDPOINTS = [
"https://60s.viki.moe/v2/zhihu", "https://60s.api.shumengya.top/v2/zhihu",
"https://60s-cf.viki.moe/v2/zhihu",
"https://60s.b23.run/v2/zhihu",
"https://60s.114128.xyz/v2/zhihu",
"https://60s-cf.114128.xyz/v2/zhihu"
]; ];
// 当前使用的API索引 // 当前使用的API索引

6
frontend/60sapi/热搜榜单/知乎热门话题/接口集合.json
View File

@@ -1,7 +1,3 @@
[ [
"https://60s-cf.viki.moe", "https://60s.api.shumengya.top"
"https://60s.viki.moe",
"https://60s.b23.run",
"https://60s.114128.xyz",
"https://60s-cf.114128.xyz"
] ]

35
frontend/aimodelapp/AI写诗小助手/env.js Normal file
View File

@@ -0,0 +1,35 @@
// AI写诗小助手配置文件
const CONFIG = {
// GitHub API 配置
GITHUB_TOKEN: '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',
endpoint: 'https://models.github.ai/inference/chat/completions',
MODEL_NAME: 'openai/gpt-4o-mini',
// 专业的古诗生成提示词
createPoemPrompt: (theme) => {
return `你是一位精通中国古典诗词的大师，请根据用户提供的主题创作一首优美的古诗。
要求：
1. 严格遵循中国古诗的格律和韵律
2. 可以是五言绝句、七言绝句、五言律诗或七言律诗
3. 注重意境的营造，体现中国传统文化的美感
4. 用词典雅，富有诗意
5. 根据主题选择合适的风格（豪放、婉约、田园、边塞等）
6. 确保押韵和平仄协调
7. 请先给诗歌起一个优美的标题，然后换行写出诗歌内容
8. 格式：标题\n诗歌正文
9. 注意排版对齐，标题居中，诗歌正文左对齐
10. 诗歌内容必须是中文
主题：${theme}
请创作一首古诗：`;
}
};
// 导出配置
if (typeof module !== 'undefined' && module.exports) {
module.exports = CONFIG;
} else {
window.CONFIG = CONFIG;
}

34
frontend/aimodelapp/AI写诗小助手/index.html
View File

@@ -227,34 +227,16 @@
</div> </div>
</div> </div>
<script src="env.js"></script>
<script> <script>
// GitHub API 配置 // 从配置文件导入设置
const GITHUB_TOKEN = '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'; // 配置在 env.js 文件中定义
const endpoint = 'https://models.github.ai/inference/chat/completions';
const generateBtn = document.getElementById('generateBtn'); const generateBtn = document.getElementById('generateBtn');
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
const poemOutput = document.getElementById('poemOutput'); const poemOutput = document.getElementById('poemOutput');
// 专业的古诗生成提示词
const createPoemPrompt = (theme) => {
return `你是一位精通中国古典诗词的大师，请根据用户提供的主题创作一首优美的古诗。
要求：
1. 严格遵循中国古诗的格律和韵律
2. 可以是五言绝句、七言绝句、五言律诗或七言律诗
3. 注重意境的营造，体现中国传统文化的美感
4. 用词典雅，富有诗意
5. 根据主题选择合适的风格（豪放、婉约、田园、边塞等）
6. 确保押韵和平仄协调
7. 请先给诗歌起一个优美的标题，然后换行写出诗歌内容
8. 格式：标题\n诗歌正文
9. 注意排版对齐，标题居中，诗歌正文左对齐
10. 诗歌内容必须是中文
主题：${theme}
请创作一首古诗：`;
};
generateBtn.addEventListener('click', async () => { generateBtn.addEventListener('click', async () => {
const theme = document.getElementById('theme').value.trim(); const theme = document.getElementById('theme').value.trim();
@@ -277,21 +259,21 @@
} }
const requestBody = { const requestBody = {
model: "openai/gpt-4o-mini", model: CONFIG.MODEL_NAME,
messages: [{ messages: [{
role: "user", role: "user",
content: createPoemPrompt(theme) content: CONFIG.createPoemPrompt(theme)
}], }],
temperature: 0.8, temperature: 0.8,
max_tokens: 500 max_tokens: 500
}; };
try { try {
const response = await fetch(endpoint, { const response = await fetch(CONFIG.endpoint, {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/vnd.github+json', 'Accept': 'application/vnd.github+json',
'Authorization': `Bearer ${GITHUB_TOKEN}`, 'Authorization': `Bearer ${CONFIG.GITHUB_TOKEN}`,
'X-GitHub-Api-Version': '2022-11-28', 'X-GitHub-Api-Version': '2022-11-28',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },

68
frontend/aimodelapp/AI变量命名助手/env.js Normal file
View File

@@ -0,0 +1,68 @@
// AI变量命名助手配置文件
const CONFIG = {
// GitHub Models API 配置
GITHUB_TOKEN: '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',
API_URL: 'https://models.github.ai/inference/chat/completions',
MODEL_NAME: 'openai/gpt-4o-mini',
// AI提示词模板
createNamingPrompt: (description) => {
return `你是一个专业的变量命名助手。请根据以下描述为变量生成合适的名称：
描述：${description}
请为每种命名规范生成3个变量名建议：
1. camelCase (驼峰命名法)
2. PascalCase (帕斯卡命名法)
3. snake_case (下划线命名法)
4. kebab-case (短横线命名法)
5. CONSTANT_CASE (常量命名法)
要求：
- 变量名要准确反映功能和用途
- 严格遵循各自的命名规范
- 避免使用缩写，除非是广泛认知的缩写
- 名称要简洁但具有描述性
- 考虑代码的可读性和维护性
请按以下JSON格式返回：
{
"suggestions": {
"camelCase": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"PascalCase": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"snake_case": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"kebab-case": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"CONSTANT_CASE": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
]
}
}
只返回JSON格式的结果，不要包含其他文字。`;
}
};
// 导出配置
if (typeof module !== 'undefined' && module.exports) {
module.exports = CONFIG;
} else {
window.CONFIG = CONFIG;
}

1
frontend/aimodelapp/AI变量命名助手/index.html
View File

@@ -37,6 +37,7 @@
</div> </div>
</div> </div>
<script src="env.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

66
frontend/aimodelapp/AI变量命名助手/script.js
View File

@@ -1,7 +1,5 @@
// GitHub Models API 配置 // 从配置文件导入设置
const GITHUB_TOKEN = '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'; // 配置在 env.js 文件中定义
const API_URL = 'https://models.github.ai/inference/chat/completions';
const MODEL_NAME = 'openai/gpt-4o-mini';
// DOM 元素 // DOM 元素
const descriptionInput = document.getElementById('description'); const descriptionInput = document.getElementById('description');
@@ -37,68 +35,16 @@ const namingConventions = {
} }
}; };
// 创建AI提示词
function createNamingPrompt(description) {
return `你是一个专业的变量命名助手。请根据以下描述为变量生成合适的名称：
描述：${description}
请为每种命名规范生成3个变量名建议：
1. camelCase (驼峰命名法)
2. PascalCase (帕斯卡命名法)
3. snake_case (下划线命名法)
4. kebab-case (短横线命名法)
5. CONSTANT_CASE (常量命名法)
要求：
- 变量名要准确反映功能和用途
- 严格遵循各自的命名规范
- 避免使用缩写，除非是广泛认知的缩写
- 名称要简洁但具有描述性
- 考虑代码的可读性和维护性
请按以下JSON格式返回：
{
"suggestions": {
"camelCase": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"PascalCase": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"snake_case": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"kebab-case": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
],
"CONSTANT_CASE": [
{"name": "变量名1", "description": "解释说明1"},
{"name": "变量名2", "description": "解释说明2"},
{"name": "变量名3", "description": "解释说明3"}
]
}
}
只返回JSON格式的结果，不要包含其他文字。`;
}
// 调用GitHub Models API // 调用GitHub Models API
async function callGitHubModelsAPI(prompt) { async function callGitHubModelsAPI(prompt) {
try { try {
const response = await fetch(API_URL, { const response = await fetch(CONFIG.API_URL, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${GITHUB_TOKEN}` 'Authorization': `Bearer ${CONFIG.GITHUB_TOKEN}`
}, },
body: JSON.stringify({ body: JSON.stringify({
messages: [ messages: [
@@ -107,7 +53,7 @@ async function callGitHubModelsAPI(prompt) {
content: prompt content: prompt
} }
], ],
model: MODEL_NAME, model: CONFIG.MODEL_NAME,
temperature: 0.7, temperature: 0.7,
max_tokens: 1000 max_tokens: 1000
}) })
@@ -270,7 +216,7 @@ async function generateSuggestions() {
suggestionsContainer.innerHTML = ''; suggestionsContainer.innerHTML = '';
try { try {
const prompt = createNamingPrompt(description); const prompt = CONFIG.createNamingPrompt(description);
const response = await callGitHubModelsAPI(prompt); const response = await callGitHubModelsAPI(prompt);
const suggestions = parseAIResponse(response); const suggestions = parseAIResponse(response);

47
frontend/aimodelapp/AI姓名评测/env.js Normal file
View File

@@ -0,0 +1,47 @@
// AI姓名评测配置文件
const CONFIG = {
// GitHub API 配置
GITHUB_TOKEN: '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',
endpoint: 'https://models.github.ai/inference/chat/completions',
model: 'deepseek/DeepSeek-V3-0324',
// 专业的姓名分析提示词
createNameAnalysisPrompt: (name) => {
return `你是一位专业的姓名学专家和语言学家，请对输入的姓名进行全面分析。请直接输出分析结果，不要包含任何思考过程或<think>标签。
姓名：${name}
请按照以下格式严格输出分析结果：
【稀有度评分】
评分：X%
评价：[对稀有度的详细说明，包括姓氏和名字的常见程度分析]
【音韵评价】
评分：X%
评价：[对音韵美感的分析，包括声调搭配、读音流畅度、音律和谐度等]
【含义解读】
[详细分析姓名的寓意内涵，包括：
1. 姓氏的历史渊源和文化背景
2. 名字各字的含义和象征
3. 整体姓名的寓意组合
4. 可能体现的父母期望或文化内涵
5. 与传统文化、诗词典故的关联等]
要求：
1. 评分必须是1-100的整数百分比，要有明显区分度，避免雷同
2. 分析要专业、客观、有依据，评分要根据实际情况有所差异
3. 含义解读要详细深入，至少150字
4. 严格按照上述格式输出，不要添加思考过程、<think>标签或其他内容
5. 如果是生僻字或罕见姓名，要特别说明
6. 直接输出最终结果，不要显示推理过程`;
}
};
// 导出配置
if (typeof module !== 'undefined' && module.exports) {
module.exports = CONFIG;
} else {
window.CONFIG = CONFIG;
}

1
frontend/aimodelapp/AI姓名评测/index.html
View File

@@ -51,6 +51,7 @@
</div> </div>
</div> </div>
<script src="env.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

45
frontend/aimodelapp/AI姓名评测/script.js
View File

@@ -1,7 +1,5 @@
// GitHub API 配置 // 从配置文件导入设置
const GITHUB_TOKEN = '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'; // 配置在 env.js 文件中定义
const endpoint = 'https://models.github.ai/inference/chat/completions';
const model = 'deepseek/DeepSeek-V3-0324';
// DOM 元素 // DOM 元素
const nameInput = document.getElementById('nameInput'); const nameInput = document.getElementById('nameInput');
@@ -13,38 +11,7 @@ const phoneticScore = document.getElementById('phoneticScore');
const phoneticDesc = document.getElementById('phoneticDesc'); const phoneticDesc = document.getElementById('phoneticDesc');
const meaningAnalysis = document.getElementById('meaningAnalysis'); const meaningAnalysis = document.getElementById('meaningAnalysis');
// 专业的姓名分析提示词
const createNameAnalysisPrompt = (name) => {
return `你是一位专业的姓名学专家和语言学家，请对输入的姓名进行全面分析。请直接输出分析结果，不要包含任何思考过程或<think>标签。
姓名：${name}
请按照以下格式严格输出分析结果：
【稀有度评分】
评分：X%
评价：[对稀有度的详细说明，包括姓氏和名字的常见程度分析]
【音韵评价】
评分：X%
评价：[对音韵美感的分析，包括声调搭配、读音流畅度、音律和谐度等]
【含义解读】
[详细分析姓名的寓意内涵，包括：
1. 姓氏的历史渊源和文化背景
2. 名字各字的含义和象征
3. 整体姓名的寓意组合
4. 可能体现的父母期望或文化内涵
5. 与传统文化、诗词典故的关联等]
要求：
1. 评分必须是1-100的整数百分比，要有明显区分度，避免雷同
2. 分析要专业、客观、有依据，评分要根据实际情况有所差异
3. 含义解读要详细深入，至少150字
4. 严格按照上述格式输出，不要添加思考过程、<think>标签或其他内容
5. 如果是生僻字或罕见姓名，要特别说明
6. 直接输出最终结果，不要显示推理过程`;
};
// 解析AI返回的分析结果 // 解析AI返回的分析结果
function parseAnalysisResult(content) { function parseAnalysisResult(content) {
@@ -221,21 +188,21 @@ async function analyzeName() {
} }
const requestBody = { const requestBody = {
model: model, model: CONFIG.model,
messages: [{ messages: [{
role: "user", role: "user",
content: createNameAnalysisPrompt(name) content: CONFIG.createNameAnalysisPrompt(name)
}], }],
temperature: 0.7, temperature: 0.7,
max_tokens: 1000 max_tokens: 1000
}; };
try { try {
const response = await fetch(endpoint, { const response = await fetch(CONFIG.endpoint, {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/vnd.github+json', 'Accept': 'application/vnd.github+json',
'Authorization': `Bearer ${GITHUB_TOKEN}`, 'Authorization': `Bearer ${CONFIG.GITHUB_TOKEN}`,
'X-GitHub-Api-Version': '2022-11-28', 'X-GitHub-Api-Version': '2022-11-28',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },

0
frontend/assets/App Logo 设计 (2).png → frontend/assets/logo2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

1
frontend/react-app/.env.production
View File

@@ -1,2 +1 @@
# 生产环境API配置
REACT_APP_API_URL=https://infogenie.api.shumengya.top REACT_APP_API_URL=https://infogenie.api.shumengya.top

1
frontend/react-app/package.json
View File

@@ -6,6 +6,7 @@
"author": "神奇万事通", "author": "神奇万事通",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"homepage": "/",
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",

1
frontend/react-app/public/_redirects Normal file
View File

@@ -0,0 +1 @@
/* /index.html 200

2
frontend/react-app/public/manifest.json
View File

@@ -19,7 +19,7 @@
"sizes": "512x512" "sizes": "512x512"
} }
], ],
"start_url": ".", "start_url": "/",
"display": "standalone", "display": "standalone",
"theme_color": "#667eea", "theme_color": "#667eea",
"background_color": "#ffffff", "background_color": "#ffffff",

4
frontend/react-app/src/App.js vendored
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import styled from 'styled-components'; import styled from 'styled-components';
@@ -48,6 +48,8 @@ function App() {
<Route path="/60sapi" element={<Api60sPage />} /> <Route path="/60sapi" element={<Api60sPage />} />
<Route path="/smallgame" element={<SmallGamePage />} /> <Route path="/smallgame" element={<SmallGamePage />} />
<Route path="/aimodel" element={<AiModelPage />} /> <Route path="/aimodel" element={<AiModelPage />} />
{/* 通配符路由 - 所有未匹配的路径都重定向到首页 */}
<Route path="*" element={<Navigate to="/" replace />} />
</Routes> </Routes>
</MainContent> </MainContent>
<Navigation /> <Navigation />

4
frontend/react-app/src/components/Footer.js vendored
View File

@@ -95,8 +95,8 @@ const Footer = () => {
</FooterInfo> </FooterInfo>
<FooterLinks> <FooterLinks>
<FooterLink href="/60sapi">📡聚合应用</FooterLink> <FooterLink href="/60sapi">📡API聚合应用</FooterLink>
<FooterLink href="/smallgame">🎮小游戏</FooterLink> <FooterLink href="/smallgame">🎮玩玩小游戏</FooterLink>
<FooterLink href="/aimodel">🤖AI工具</FooterLink> <FooterLink href="/aimodel">🤖AI工具</FooterLink>
</FooterLinks> </FooterLinks>

6
frontend/react-app/src/components/Navigation.js vendored
View File

@@ -79,17 +79,17 @@ const Navigation = () => {
{ {
path: '/60sapi', path: '/60sapi',
icon: FiActivity, icon: FiActivity,
text: '60s API' text: 'API聚合应用'
}, },
{ {
path: '/smallgame', path: '/smallgame',
icon: FiGrid, icon: FiGrid,
text: '小游戏' text: '玩玩小游戏'
}, },
{ {
path: '/aimodel', path: '/aimodel',
icon: FiCpu, icon: FiCpu,
text: 'AI模型' text: 'AI工具'
} }
]; ];

5
frontend/react-app/src/env.backup Normal file
View File

@@ -0,0 +1,5 @@
# 生产环境API配置
REACT_APP_API_URL=https://infogenie.api.shumengya.top
# 生产环境API配置
REACT_APP_API_URL=http://127.0.0.1:5002

39
frontend/react-app/src/pages/HomePage.js vendored
View File

@@ -181,43 +181,35 @@ const HomePage = () => {
{ {
path: '/60sapi', path: '/60sapi',
icon: FiActivity, icon: FiActivity,
title: '60s API', title: 'API聚合应用',
description: '实时获取各种热门数据和资讯信息', description: '实时获取各种热门数据,资讯信息和实用工具',
features: [ features: [
'抖音热搜榜单', '娱乐消遣板块',
'微博热搜话题', '实用功能板块',
'猫眼票房排行', '日更咨询板块',
'每日60秒读懂世界', '热搜榜单板块',
'必应每日壁纸',
'实时天气信息'
] ]
}, },
{ {
path: '/smallgame', path: '/smallgame',
icon: FiGrid, icon: FiGrid,
title: '小游戏', title: '玩玩小游戏',
description: '轻松有趣的休闲小游戏合集', description: '轻松有趣的休闲小游戏合集',
features: [ features: [
'经典益智游戏', '2048',
'休闲娱乐游戏', '俄罗斯方块',
'技能挑战游戏', '别踩白方块',
'即点即玩',
'无需下载',
'移动端优化'
] ]
}, },
{ {
path: '/aimodel', path: '/aimodel',
icon: FiCpu, icon: FiCpu,
title: 'AI模型', title: 'AI工具',
description: '智能AI工具和模型应用', description: '智能AI工具和模型应用',
features: [ features: [
'AI对话助手', 'AI写诗达人',
'智能文本生成', 'AI变量命名小助手',
'图像识别分析', 'AI姓名评测',
'数据智能处理',
'个性化推荐',
'需要登录使用'
] ]
} }
]; ];
@@ -234,7 +226,8 @@ const HomePage = () => {
<HeroSubtitle> <HeroSubtitle>
🎨 一个多功能的聚合软件应用 💬 🎨 一个多功能的聚合软件应用 💬
<br /> <br />
提供实时数据、娱乐游戏、AI工具等丰富功能 提供各种API聚合应用、娱乐小游戏、AI大模型工具等丰富功能，目标是用一个应用解决用户的各种需求。
模仿微信小程序那样，用户可以在一个应用中完成多个功能，而不需要下载多个APP
</HeroSubtitle> </HeroSubtitle>
<HeroButton to="/60sapi"> <HeroButton to="/60sapi">
<FiTrendingUp /> <FiTrendingUp />