继续更新

InfoGenie-frontend/public/60sapi/热搜榜单/Hacker News 榜单/css/background.css

@@ -2,42 +2,32 @@
 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%
+        #e8f5e8 0%, 
+        #f1f8e9 25%, 
+        #dcedc8 50%, 
+        #c8e6c8 75%, 
+        #e8f5e8 100%
     );
-    background-size: 400% 400%;
-    animation: rainbowGradient 15s ease infinite;
+    background-size: 200% 200%;
+    animation: gentleGradient 20s ease infinite;
     background-attachment: fixed;
     min-height: 100vh;
     position: relative;
 }
 
-@keyframes rainbowGradient {
+@keyframes gentleGradient {
     0% {
         background-position: 0% 50%;
     }
-    25% {
-        background-position: 100% 50%;
-    }
     50% {
-        background-position: 100% 100%;
-    }
-    75% {
-        background-position: 0% 100%;
+        background-position: 100% 50%;
     }
     100% {
         background-position: 0% 50%;
     }
 }
 
-/* 彩虹装饰层 */
+/* 淡雅绿色装饰层 */
 body::before {
     content: '';
     position: fixed;
@@ -46,17 +36,15 @@ body::before {
     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%);
+        radial-gradient(circle at 20% 20%, rgba(129, 199, 132, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(165, 214, 167, 0.06) 0%, transparent 50%),
+        radial-gradient(circle at 40% 80%, rgba(200, 230, 201, 0.05) 0%, transparent 40%),
+        radial-gradient(circle at 60% 20%, rgba(220, 237, 200, 0.04) 0%, transparent 40%);
     pointer-events: none;
     z-index: -1;
-    animation: float 20s ease-in-out infinite alternate;
 }
 
-/* 彩虹粒子效果 */
+/* 淡雅绿色点缀 */
 body::after {
     content: '';
     position: fixed;
@@ -65,42 +53,13 @@ body::after {
     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;
+        radial-gradient(circle at 15% 15%, rgba(129, 199, 132, 0.3) 1px, transparent 1px),
+        radial-gradient(circle at 45% 25%, rgba(165, 214, 167, 0.25) 1px, transparent 1px),
+        radial-gradient(circle at 75% 35%, rgba(200, 230, 201, 0.2) 1px, transparent 1px),
+        radial-gradient(circle at 25% 65%, rgba(220, 237, 200, 0.15) 1px, transparent 1px),
+        radial-gradient(circle at 85% 75%, rgba(129, 199, 132, 0.2) 1px, transparent 1px);
+    background-size: 300px 300px, 400px 400px, 350px 350px, 450px 450px, 380px 380px;
     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);
-    }
+    opacity: 0.4;
 }

InfoGenie-frontend/public/60sapi/热搜榜单/Hacker News 榜单/css/style.css

@@ -18,11 +18,11 @@
     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%
+        rgba(129, 199, 132, 0.4) 0%,
+        rgba(165, 214, 167, 0.3) 25%,
+        rgba(200, 230, 201, 0.2) 50%,
+        rgba(220, 237, 200, 0.3) 75%,
+        rgba(232, 245, 233, 0.4) 100%
     );
     animation: gradient-flow 20s ease-in-out infinite;
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
@@ -37,11 +37,11 @@
     height: 100%;
     background: radial-gradient(
         circle at 30% 70%,
-        rgba(64, 169, 255, 0.5) 0%,
+        rgba(129, 199, 132, 0.5) 0%,
         transparent 50%
     ), radial-gradient(
         circle at 70% 30%,
-        rgba(255, 140, 50, 0.4) 0%,
+        rgba(165, 214, 167, 0.4) 0%,
         transparent 50%
     );
     animation: pulse-effect 15s ease-in-out infinite alternate;
@@ -123,7 +123,7 @@ header, .header {
 }
 
 header h1, .title {
-    background: linear-gradient(135deg, #4096ff, #ff7a45);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
@@ -170,9 +170,9 @@ header h1, .title {
 }
 
 .tab-btn.active {
-    background: linear-gradient(135deg, #4096ff, #40a9ff);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     color: white;
-    box-shadow: 0 4px 16px rgba(64, 150, 255, 0.3);
+    box-shadow: 0 4px 16px rgba(102, 187, 106, 0.3);
 }
 
 .tab-icon {
@@ -180,7 +180,7 @@ header h1, .title {
 }
 
 .refresh-btn {
-    background: linear-gradient(135deg, #52c41a, #73d13d);
+    background: linear-gradient(135deg, #81c784, #a5d6a7);
     border: none;
     padding: 12px 24px;
     border-radius: 25px;
@@ -193,12 +193,12 @@ header h1, .title {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+    box-shadow: 0 4px 12px rgba(129, 199, 132, 0.3);
 }
 
 .refresh-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
+    box-shadow: 0 6px 16px rgba(129, 199, 132, 0.4);
 }
 
 .btn-icon {
@@ -238,17 +238,17 @@ header h1, .title {
 .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);
+    border-color: rgba(129, 199, 132, 0.3);
 }
 
 .hot-rank {
     font-size: 1.2rem;
     font-weight: bold;
-    color: #4096ff;
+    color: #66bb6a;
     margin-right: 18px;
     min-width: 38px;
     text-align: center;
-    background-color: rgba(64, 169, 255, 0.1);
+    background-color: rgba(129, 199, 132, 0.1);
     border-radius: 50%;
     width: 38px;
     height: 38px;
@@ -258,18 +258,18 @@ header h1, .title {
 }
 
 .hot-rank.top-1 {
-    background: linear-gradient(135deg, #ff4d4f, #ff7a45);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     color: white;
 }
 
 .hot-rank.top-2 {
-    background: linear-gradient(135deg, #ff7a45, #ffa940);
+    background: linear-gradient(135deg, #81c784, #a5d6a7);
     color: white;
 }
 
 .hot-rank.top-3 {
-    background: linear-gradient(135deg, #ffa940, #ffec3d);
-    color: white;
+    background: linear-gradient(135deg, #a5d6a7, #c8e6c9);
+    color: #333;
 }
 
 .hot-content {
@@ -288,7 +288,7 @@ header h1, .title {
 }
 
 .hot-title:hover {
-    color: #4096ff;
+    color: #66bb6a;
     text-decoration: none;
 }
 
@@ -310,13 +310,10 @@ header h1, .title {
 .rainbow-spinner {
     width: 50px;
     height: 50px;
-    border: 4px solid transparent;
-    border-top: 4px solid #4096ff;
+    border: 4px solid rgba(129, 199, 132, 0.2);
+    border-top: 4px solid #81c784;
     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 {
@@ -356,7 +353,7 @@ header h1, .title {
 .loading-dots span {
     width: 8px;
     height: 8px;
-    background: #4096ff;
+    background: #81c784;
     border-radius: 50%;
     animation: loadingDots 1.4s ease-in-out infinite both;
 }
@@ -396,7 +393,7 @@ header h1, .title {
 .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);
+    border-color: rgba(129, 199, 132, 0.3);
 }
 
 /* 排名容器 */
@@ -423,21 +420,21 @@ header h1, .title {
 }
 
 .news-rank.rank-1 {
-    background: linear-gradient(135deg, #ff4d4f, #ff7a45);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     color: white;
-    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
+    box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
 }
 
 .news-rank.rank-2 {
-    background: linear-gradient(135deg, #ff7a45, #ffa940);
+    background: linear-gradient(135deg, #81c784, #a5d6a7);
     color: white;
-    box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
+    box-shadow: 0 4px 12px rgba(129, 199, 132, 0.3);
 }
 
 .news-rank.rank-3 {
-    background: linear-gradient(135deg, #ffa940, #ffec3d);
+    background: linear-gradient(135deg, #a5d6a7, #c8e6c9);
     color: #333;
-    box-shadow: 0 4px 12px rgba(255, 169, 64, 0.3);
+    box-shadow: 0 4px 12px rgba(165, 214, 167, 0.3);
 }
 
 .rank-number {
@@ -478,7 +475,7 @@ header h1, .title {
 }
 
 .news-title:hover {
-    color: #4096ff;
+    color: #66bb6a;
 }
 
 /* 元信息行 */
@@ -524,7 +521,7 @@ header h1, .title {
     display: flex;
     align-items: center;
     gap: 4px;
-    background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
+    background: linear-gradient(135deg, #81c784, #a5d6a7);
     color: white;
     padding: 4px 10px;
     border-radius: 12px;
@@ -545,7 +542,7 @@ header h1, .title {
     display: flex;
     align-items: center;
     gap: 4px;
-    background: linear-gradient(135deg, #4096ff, #40a9ff);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     color: white;
     text-decoration: none;
     padding: 6px 12px;
@@ -553,13 +550,13 @@ header h1, .title {
     font-size: 0.75rem;
     font-weight: 600;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
+    box-shadow: 0 2px 6px rgba(102, 187, 106, 0.3);
     flex-shrink: 0;
 }
 
 .news-link:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 10px rgba(64, 150, 255, 0.4);
+    box-shadow: 0 4px 10px rgba(102, 187, 106, 0.4);
     text-decoration: none;
     color: white;
 }
@@ -592,7 +589,7 @@ header h1, .title {
 }
 
 .error-content h3 {
-    color: #ff4d4f;
+    color: #66bb6a;
     margin: 0;
     font-size: 1.3rem;
 }
@@ -604,7 +601,7 @@ header h1, .title {
 }
 
 .retry-btn {
-    background: linear-gradient(135deg, #ff4d4f, #ff7a45);
+    background: linear-gradient(135deg, #66bb6a, #81c784);
     border: none;
     padding: 12px 24px;
     border-radius: 25px;
@@ -616,12 +613,12 @@ header h1, .title {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
+    box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
 }
 
 .retry-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
+    box-shadow: 0 6px 16px rgba(102, 187, 106, 0.4);
 }
 
 footer {
@@ -855,9 +852,9 @@ footer {
     .modern-gradient {
         background: linear-gradient(
             135deg,
-            rgba(64, 169, 255, 0.3) 0%,
-            rgba(255, 175, 64, 0.2) 50%,
-            rgba(255, 122, 69, 0.25) 100%
+            rgba(129, 199, 132, 0.3) 0%,
+            rgba(200, 230, 201, 0.2) 50%,
+            rgba(232, 245, 233, 0.25) 100%
         );
     }
 }

InfoGenie-frontend/public/60sapi/热搜榜单/Hacker News 榜单/index.html

@@ -3,39 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🔥 HackerNews 热门榜单</title>
+    <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>
+            <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>
@@ -44,7 +38,6 @@
             <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>
@@ -61,11 +54,9 @@
 
         <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>

InfoGenie-frontend/public/60sapi/热搜榜单/Hacker News 榜单/js/script.js

@@ -118,35 +118,26 @@ function createNewsItem(item, 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 = '🥉';
-    
     // 根据评分添加热度指示
     let heatLevel = '';
-    if (item.score >= 1000) heatLevel = '🔥🔥🔥';
-    else if (item.score >= 500) heatLevel = '🔥🔥';
-    else if (item.score >= 100) heatLevel = '🔥';
-    else heatLevel = '💫';
+    if (item.score >= 1000) heatLevel = 'HOT';
+    else if (item.score >= 500) heatLevel = 'WARM';
+    else if (item.score >= 100) heatLevel = 'COOL';
+    else heatLevel = 'NEW';
     
     newsItem.innerHTML = `
         <div class="news-rank-container">
             <div class="${rankClass}">
                 <span class="rank-number">${rank}</span>
-                <span class="rank-emoji">${rankEmoji}</span>
             </div>
         </div>
         <div class="news-content-wrapper">
             <h3 class="news-title">${escapeHtml(item.title)}</h3>
             <div class="news-meta-row">
                 <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>
@@ -156,7 +147,6 @@ function createNewsItem(item, rank) {
                     <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>