热搜榜单

2025-09-02 21:00:13 +08:00
parent e1f8885c6c
commit 3333f6c485
41 changed files with 1846 additions and 85 deletions
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
@@ -0,0 +1,106 @@
+/* 彩虹背景相关样式 */
+body {
+    background: linear-gradient(
+        135deg, 
+        #ff6b6b 0%, 
+        #4ecdc4 12.5%, 
+        #45b7d1 25%, 
+        #96ceb4 37.5%, 
+        #feca57 50%, 
+        #ff9ff3 62.5%, 
+        #54a0ff 75%, 
+        #5f27cd 87.5%, 
+        #00d2d3 100%
+    );
+    background-size: 400% 400%;
+    animation: rainbowGradient 15s ease infinite;
+    background-attachment: fixed;
+    min-height: 100vh;
+    position: relative;
+}
+
+@keyframes rainbowGradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    25% {
+        background-position: 100% 50%;
+    }
+    50% {
+        background-position: 100% 100%;
+    }
+    75% {
+        background-position: 0% 100%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+/* 彩虹装饰层 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 20%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(69, 183, 209, 0.12) 0%, transparent 40%),
+        radial-gradient(circle at 60% 20%, rgba(150, 206, 180, 0.12) 0%, transparent 40%),
+        radial-gradient(circle at 80% 40%, rgba(254, 202, 87, 0.1) 0%, transparent 35%);
+    pointer-events: none;
+    z-index: -1;
+    animation: float 20s ease-in-out infinite alternate;
+}
+
+/* 彩虹粒子效果 */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 10% 10%, rgba(255, 107, 107, 0.8) 2px, transparent 2px),
+        radial-gradient(circle at 30% 20%, rgba(78, 205, 196, 0.8) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 50% 30%, rgba(69, 183, 209, 0.8) 1px, transparent 1px),
+        radial-gradient(circle at 70% 40%, rgba(150, 206, 180, 0.8) 2px, transparent 2px),
+        radial-gradient(circle at 90% 50%, rgba(254, 202, 87, 0.8) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 20% 60%, rgba(255, 159, 243, 0.8) 1px, transparent 1px),
+        radial-gradient(circle at 40% 70%, rgba(84, 160, 255, 0.8) 2px, transparent 2px),
+        radial-gradient(circle at 60% 80%, rgba(95, 39, 205, 0.8) 1.5px, transparent 1.5px),
+        radial-gradient(circle at 80% 90%, rgba(0, 210, 211, 0.8) 1px, transparent 1px);
+    background-size: 200px 200px, 250px 250px, 180px 180px, 300px 300px, 220px 220px, 160px 160px, 280px 280px, 240px 240px, 200px 200px;
+    animation: sparkle 25s linear infinite;
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0.6;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    100% {
+        transform: translateY(-15px) rotate(2deg);
+    }
+}
+
+@keyframes sparkle {
+    0%, 100% {
+        transform: translateX(0) translateY(0) scale(1);
+    }
+    25% {
+        transform: translateX(-10px) translateY(-5px) scale(1.1);
+    }
+    50% {
+        transform: translateX(10px) translateY(-10px) scale(0.9);
+    }
+    75% {
+        transform: translateX(-5px) translateY(-15px) scale(1.05);
+    }
+}
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🔥 HackerNews 热门榜单</title>
+    <link rel="stylesheet" href="css/background.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="header-icon">🌈</div>
+            <h1 class="title">🔥 HackerNews 热门榜单 💻</h1>
+            <p class="subtitle">全球技术社区 · 实时热门话题</p>
+            
+            <div class="tab-container">
+                <button class="tab-btn active" data-type="top">
+                    <span class="tab-icon">🏆</span>
+                    热门榜
+                </button>
+                <button class="tab-btn" data-type="new">
+                    <span class="tab-icon">🆕</span>
+                    最新榜
+                </button>
+                <button class="tab-btn" data-type="best">
+                    <span class="tab-icon">⭐</span>
+                    最佳榜
+                </button>
+            </div>
+            
+            <div class="update-time">
+                <span class="time-icon">⏰</span>
+                <span id="updateTime">加载中...</span>
+            </div>
+            
+            <button id="refreshBtn" class="refresh-btn">
+                <span class="btn-icon">🔄</span>
+                刷新数据
+            </button>
+        </header>
+
+        <div class="loading" id="loading">
+            <div class="loading-content">
+                <div class="rainbow-spinner"></div>
+                <div class="loading-text">
+                    <span class="loading-emoji">🚀</span>
+                    <p>正在获取最新榜单...</p>
+                    <div class="loading-dots">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="news-list" id="newsList">
+            <!-- 新闻列表将动态生成 -->
+        </div>
+
+        <div class="error-message" id="errorMessage" style="display: none;">
+            <div class="error-content">
+                <div class="error-icon">💥</div>
+                <h3>加载失败了</h3>
+                <p>网络连接出现问题，请稍后重试</p>
+                <button onclick="loadNewsList()" class="retry-btn">
+                    <span>🔄</span>
+                    重新加载
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
@@ -0,0 +1,338 @@
+// API接口列表
+const API_ENDPOINTS = [
+    "https://60s-cf.viki.moe",
+    "https://60s.viki.moe", 
+    "https://60s.b23.run",
+    "https://60s.114128.xyz",
+    "https://60s-cf.114128.xyz"
+];
+
+// 当前使用的API索引
+let currentApiIndex = 0;
+let currentType = 'top';
+
+// DOM元素
+const loadingElement = document.getElementById('loading');
+const newsListElement = document.getElementById('newsList');
+const errorMessageElement = document.getElementById('errorMessage');
+const updateTimeElement = document.getElementById('updateTime');
+const refreshBtn = document.getElementById('refreshBtn');
+const tabBtns = document.querySelectorAll('.tab-btn');
+
+// 页面加载完成后自动加载数据
+document.addEventListener('DOMContentLoaded', function() {
+    loadNewsList();
+    initTabEvents();
+});
+
+// 初始化标签事件
+function initTabEvents() {
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            const type = this.getAttribute('data-type');
+            if (type !== currentType) {
+                currentType = type;
+                updateActiveTab(this);
+                loadNewsList();
+            }
+        });
+    });
+}
+
+// 更新活跃标签
+function updateActiveTab(activeBtn) {
+    tabBtns.forEach(btn => btn.classList.remove('active'));
+    activeBtn.classList.add('active');
+}
+
+// 刷新按钮点击事件
+refreshBtn.addEventListener('click', function() {
+    loadNewsList();
+});
+
+// 加载新闻列表
+async function loadNewsList() {
+    showLoading();
+    hideError();
+    
+    try {
+        const data = await fetchData();
+        displayNewsList(data.data);
+        updateRefreshTime();
+    } catch (error) {
+        console.error('加载失败:', error);
+        showError();
+    }
+    
+    hideLoading();
+}
+
+// 获取数据
+async function fetchData() {
+    for (let i = 0; i < API_ENDPOINTS.length; i++) {
+        const apiUrl = API_ENDPOINTS[currentApiIndex];
+        
+        try {
+            const response = await fetch(`${apiUrl}/v2/hacker-news/${currentType}`, {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json',
+                },
+                timeout: 10000
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.code === 200 && data.data) {
+                return data;
+            } else {
+                throw new Error('数据格式错误');
+            }
+        } catch (error) {
+            console.error(`API ${apiUrl} 请求失败:`, error);
+            currentApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
+            
+            if (i === API_ENDPOINTS.length - 1) {
+                throw new Error('所有API接口都无法访问');
+            }
+        }
+    }
+}
+
+// 显示新闻列表
+function displayNewsList(newsData) {
+    newsListElement.innerHTML = '';
+    
+    newsData.forEach((item, index) => {
+        const newsItem = createNewsItem(item, index + 1);
+        newsListElement.appendChild(newsItem);
+    });
+}
+
+// 创建新闻项目
+function createNewsItem(item, rank) {
+    const newsItem = document.createElement('div');
+    newsItem.className = 'news-item';
+    
+    const rankClass = rank <= 5 ? 'news-rank top-5' : 'news-rank';
+    const formattedScore = formatScore(item.score);
+    const formattedTime = formatTime(item.created);
+    
+    // 根据排名添加特殊标识
+    let rankEmoji = '';
+    if (rank === 1) rankEmoji = '🏆';
+    else if (rank === 2) rankEmoji = '🥈';
+    else if (rank === 3) rankEmoji = '🥉';
+    else if (rank <= 10) rankEmoji = '💎';
+    else rankEmoji = '⭐';
+    
+    // 根据评分添加热度指示
+    let heatLevel = '';
+    if (item.score >= 1000) heatLevel = '🔥🔥🔥';
+    else if (item.score >= 500) heatLevel = '🔥🔥';
+    else if (item.score >= 100) heatLevel = '🔥';
+    else heatLevel = '💫';
+    
+    newsItem.innerHTML = `
+        <div class="news-header">
+            <div class="${rankClass}">${rank}</div>
+            <div class="news-score">${heatLevel} ${formattedScore}</div>
+        </div>
+        <div class="news-title">${rankEmoji} ${escapeHtml(item.title)}</div>
+        <div class="news-meta">
+            <div class="news-author">👤 ${escapeHtml(item.author)}</div>
+            <div class="news-time">🕒 ${formattedTime}</div>
+        </div>
+        <a href="${item.link}" target="_blank" class="news-link">
+            🚀 阅读全文
+        </a>
+    `;
+    
+    return newsItem;
+}
+
+// 格式化评分
+function formatScore(score) {
+    if (score >= 1000) {
+        return (score / 1000).toFixed(1) + 'K';
+    } else {
+        return score.toString();
+    }
+}
+
+// 格式化时间
+function formatTime(timeStr) {
+    try {
+        const date = new Date(timeStr);
+        const now = new Date();
+        const diff = now - date;
+        const minutes = Math.floor(diff / (1000 * 60));
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        
+        if (days > 0) {
+            return `${days}天前`;
+        } else if (hours > 0) {
+            return `${hours}小时前`;
+        } else if (minutes > 0) {
+            return `${minutes}分钟前`;
+        } else {
+            return '刚刚';
+        }
+    } catch (error) {
+        return timeStr;
+    }
+}
+
+// HTML转义
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// 更新刷新时间
+function updateRefreshTime() {
+    const now = new Date();
+    const timeStr = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+    updateTimeElement.textContent = `最后更新: ${timeStr}`;
+    
+    // 添加成功提示
+    showSuccessMessage('🌈 数据已更新');
+}
+
+// 显示成功消息
+function showSuccessMessage(message) {
+    // 移除之前的提示
+    const existingToast = document.querySelector('.success-toast');
+    if (existingToast) {
+        existingToast.remove();
+    }
+    
+    const toast = document.createElement('div');
+    toast.className = 'success-toast';
+    toast.textContent = message;
+    toast.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
+        color: white;
+        padding: 12px 20px;
+        border-radius: 25px;
+        box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
+        z-index: 1000;
+        font-weight: 600;
+        font-size: 0.9em;
+        animation: rainbowToastSlide 0.5s ease-out;
+        backdrop-filter: blur(10px);
+    `;
+    
+    document.body.appendChild(toast);
+    
+    // 3秒后自动移除
+    setTimeout(() => {
+        toast.style.animation = 'rainbowToastSlideOut 0.5s ease-in forwards';
+        setTimeout(() => toast.remove(), 500);
+    }, 3000);
+}
+
+// 显示加载状态
+function showLoading() {
+    loadingElement.style.display = 'block';
+    newsListElement.style.display = 'none';
+}
+
+// 隐藏加载状态
+function hideLoading() {
+    loadingElement.style.display = 'none';
+    newsListElement.style.display = 'block';
+}
+
+// 显示错误信息
+function showError() {
+    errorMessageElement.style.display = 'block';
+    newsListElement.style.display = 'none';
+}
+
+// 隐藏错误信息
+function hideError() {
+    errorMessageElement.style.display = 'none';
+}
+
+// 添加CSS动画到页面
+if (!document.querySelector('#toast-styles')) {
+    const style = document.createElement('style');
+    style.id = 'toast-styles';
+    style.textContent = `
+        @keyframes rainbowToastSlide {
+            from {
+                opacity: 0;
+                transform: translateX(100px) scale(0.8);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0) scale(1);
+            }
+        }
+        
+        @keyframes rainbowToastSlideOut {
+            from {
+                opacity: 1;
+                transform: translateX(0) scale(1);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(100px) scale(0.8);
+            }
+        }
+        
+        .success-toast {
+            background-size: 200% 200%;
+            animation: rainbowToastSlide 0.5s ease-out, toastRainbow 2s ease-in-out infinite !important;
+        }
+        
+        @keyframes toastRainbow {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+// 自动刷新 (每5分钟)
+setInterval(function() {
+    loadNewsList();
+}, 5 * 60 * 1000);
+
+// 键盘快捷键支持
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'r' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        loadNewsList();
+    }
+    
+    // 数字键切换标签
+    if (e.key >= '1' && e.key <= '3') {
+        e.preventDefault();
+        const typeMap = { '1': 'top', '2': 'new', '3': 'best' };
+        const targetType = typeMap[e.key];
+        const targetBtn = document.querySelector(`[data-type="${targetType}"]`);
+        if (targetBtn && targetType !== currentType) {
+            currentType = targetType;
+            updateActiveTab(targetBtn);
+            loadNewsList();
+        }
+    }
+});
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
@@ -0,0 +1,7 @@
+[
+    "https://60s-cf.viki.moe",
+    "https://60s.viki.moe",
+    "https://60s.b23.run",
+    "https://60s.114128.xyz",
+    "https://60s-cf.114128.xyz"
+]
--- a/frontend/60sapi/热搜榜单/Hacker
+++ b/frontend/60sapi/热搜榜单/Hacker
@@ -0,0 +1,87 @@
+{
+  "code": 200,
+  "message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
+  "data": [
+    {
+      "id": 45087396,
+      "title": "We should have the ability to run any code we want on hardware we own",
+      "link": "https://hugotunius.se/2025/08/31/what-every-argument-about-sideloading-gets-wrong.html",
+      "score": 995,
+      "author": "K0nserv",
+      "created": "2025-08-31 21:46:26",
+      "created_at": 1756676786000
+    },
+    {
+      "id": 45053029,
+      "title": "Why countries trade with each other while fighting",
+      "link": "https://news.mit.edu/2025/why-countries-trade-each-other-while-fighting-mariya-grinberg-book-0828",
+      "score": 32,
+      "author": "LorenDB",
+      "created": "2025-08-28 14:58:28",
+      "created_at": 1756393108000
+    },
+    {
+      "id": 45086020,
+      "title": "Eternal Struggle",
+      "link": "https://yoavg.github.io/eternal/",
+      "score": 481,
+      "author": "yurivish",
+      "created": "2025-08-31 19:04:03",
+      "created_at": 1756667043000
+    },
+    {
+      "id": 45052960,
+      "title": "C++: Strongly Happens Before?",
+      "link": "https://nekrozqliphort.github.io/posts/happens-b4/",
+      "score": 16,
+      "author": "signa11",
+      "created": "2025-08-28 14:54:37",
+      "created_at": 1756392877000
+    },
+    {
+      "id": 45087971,
+      "title": "Nintendo Switch 2 Dock USB-C Compatibility",
+      "link": "https://www.lttlabs.com/blog/2025/08/30/nintendo-switch-2-dock",
+      "score": 192,
+      "author": "croes",
+      "created": "2025-08-31 23:21:46",
+      "created_at": 1756682506000
+    },
+    {
+      "id": 45082731,
+      "title": "“This telegram must be closely paraphrased before being communicated to anyone”",
+      "link": "https://history.stackexchange.com/questions/79371/this-telegram-must-be-closely-paraphrased-before-being-communicated-to-anyone",
+      "score": 645,
+      "author": "azeemba",
+      "created": "2025-08-31 12:39:47",
+      "created_at": 1756643987000
+    },
+    {
+      "id": 45089256,
+      "title": "What Is Complexity in Chess?",
+      "link": "https://lichess.org/@/Toadofsky/blog/what-is-complexity/pKo1swFh",
+      "score": 41,
+      "author": "fzliu",
+      "created": "2025-09-01 03:45:33",
+      "created_at": 1756698333000
+    },
+    {
+      "id": 45087815,
+      "title": "Lewis and Clark marked their trail with laxatives",
+      "link": "https://offbeatoregon.com/2501d1006d_biliousPills-686.077.html",
+      "score": 141,
+      "author": "toomuchtodo",
+      "created": "2025-08-31 22:54:26",
+      "created_at": 1756680866000
+    },
+    {
+      "id": 45083952,
+      "title": "Jujutsu for everyone",
+      "link": "https://jj-for-everyone.github.io/",
+      "score": 363,
+      "author": "Bogdanp",
+      "created": "2025-08-31 15:31:04",
+      "created_at": 1756654264000
+    }
+  ]
+}