Skip to content

Commit eb22f3f

Browse files
begin0808begin0808
committed
feat: add Light/Dark mode toggle, new Year and Audio/Video tabs, and clean up footer
1 parent 41a90b3 commit eb22f3f

5 files changed

Lines changed: 717 additions & 164 deletions

File tree

‎index.html‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,29 @@
2020

2121
<div class="container">
2222
<header class="app-header">
23-
<div class="logo-area">
24-
<svg class="github-icon animate-pulse" viewBox="0 0 16 16" version="1.1" width="32" height="32" aria-hidden="true">
25-
<path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.35 3.12.88.01.47.01.84.01.93 0 .22-.15.47-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
26-
</svg>
27-
<span class="logo-text">GitTrend.tw</span>
23+
<div class="header-top">
24+
<div class="logo-area">
25+
<svg class="github-icon animate-pulse" viewBox="0 0 16 16" version="1.1" width="32" height="32" aria-hidden="true">
26+
<path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.35 3.12.88.01.47.01.84.01.93 0 .22-.15.47-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
27+
</svg>
28+
<span class="logo-text">GitTrend.tw</span>
29+
</div>
30+
<button id="theme-toggle" class="theme-toggle-btn" aria-label="切換深淺色主題" title="切換深淺色主題">
31+
<svg class="theme-icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
32+
<circle cx="12" cy="12" r="5"></circle>
33+
<line x1="12" y1="1" x2="12" y2="3"></line>
34+
<line x1="12" y1="21" x2="12" y2="23"></line>
35+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
36+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
37+
<line x1="1" y1="12" x2="3" y2="12"></line>
38+
<line x1="21" y1="12" x2="23" y2="12"></line>
39+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
40+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
41+
</svg>
42+
<svg class="theme-icon moon-icon hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
43+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
44+
</svg>
45+
</button>
2846
</div>
2947
<h1>GitHub 熱門開源專案時間線</h1>
3048
<p class="subtitle">每週六定期更新，使用 AI 繁體中文深度精煉，發掘最近崛起的最強開源能量</p>
@@ -49,6 +67,14 @@ <h1>GitHub 熱門開源專案時間線</h1>
4967
<span class="tab-btn-title">最近三個月</span>
5068
<span class="tab-btn-sub">Quarterly Top</span>
5169
</button>
70+
<button class="tab-btn" data-period="year" id="tab-year">
71+
<span class="tab-btn-title">最近一年</span>
72+
<span class="tab-btn-sub">Annual Top</span>
73+
</button>
74+
<button class="tab-btn" data-period="audio_video" id="tab-audio-video">
75+
<span class="tab-btn-title">影音與聲音 AI</span>
76+
<span class="tab-btn-sub">Audio & Video AI</span>
77+
</button>
5278
</nav>
5379

5480
<!-- Main Content Grid -->
@@ -68,11 +94,6 @@ <h1>GitHub 熱門開源專案時間線</h1>
6894
<!-- Footer -->
6995
<footer class="app-footer">
7096
<p>© 2026 Studio0808 智造實驗室. All rights reserved. Powered by GitTrend.tw</p>
71-
<p class="github-link-wrap">
72-
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
73-
GitHub Pages 託管專案
74-
</a>
75-
</p>
7697
</footer>
7798
</div>
7899

‎scripts/fetch-data.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,7 @@ function getDateStringAgo(days) {
4444
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
4545

4646
// 1. 抓取 GitHub 熱門專案
47-
async function fetchTopGithubProjects(daysAgo) {
48-
const dateStr = getDateStringAgo(daysAgo);
49-
const query = `created:>=${dateStr}`;
47+
async function fetchTopGithubProjects(query) {
5048
const url = `https://api.github.com/search/repositories?q=${encodeURIComponent(query)}&sort=stars&order=desc&per_page=12`;
5149

5250
const headers = {
@@ -56,9 +54,9 @@ async function fetchTopGithubProjects(daysAgo) {
5654

5755
if (GITHUB_TOKEN) {
5856
headers['Authorization'] = `token ${GITHUB_TOKEN}`;
59-
console.log(`使用 GitHub Token 進行 API 請求 (${daysAgo} 天內)`);
57+
console.log(`使用 GitHub Token 進行 API 請求 (查詢條件: ${query})`);
6058
} else {
61-
console.log(`未使用 Token 進行 GitHub API 請求 (${daysAgo} 天內)，可能會面臨 API 限流。`);
59+
console.log(`未使用 Token 進行 GitHub API 請求 (查詢條件: ${query})，可能會面臨 API 限流。`);
6260
}
6361

6462
const response = await fetch(url, { headers });
@@ -196,9 +194,11 @@ async function main() {
196194
console.log('開始執行 GitHub 熱門專案資料更新任務...');
197195

198196
const periods = [
199-
{ key: 'week', days: 7, label: '最近一週' },
200-
{ key: 'month', days: 30, label: '最近一個月' },
201-
{ key: 'three_months', days: 90, label: '最近三個月' }
197+
{ key: 'week', query: `created:>=${getDateStringAgo(7)}`, label: '最近一週' },
198+
{ key: 'month', query: `created:>=${getDateStringAgo(30)}`, label: '最近一個月' },
199+
{ key: 'three_months', query: `created:>=${getDateStringAgo(90)}`, label: '最近三個月' },
200+
{ key: 'year', query: `created:>=${getDateStringAgo(365)}`, label: '最近一年' },
201+
{ key: 'audio_video', query: `created:>=${getDateStringAgo(90)} (audio OR video OR voice OR speech OR cloning)`, label: '影音與聲音 AI' }
202202
];
203203

204204
const resultData = {
@@ -209,7 +209,7 @@ async function main() {
209209
for (const period of periods) {
210210
console.log(`\n--- 正在抓取「${period.label}」熱門專案 ---`);
211211
try {
212-
const rawRepos = await fetchTopGithubProjects(period.days);
212+
const rawRepos = await fetchTopGithubProjects(period.query);
213213
console.log(`成功獲取 ${rawRepos.length} 個專案，開始進行批次 AI 翻譯與摘要...`);
214214

215215
const processedRepos = [];

‎src/css/style.css‎

Lines changed: 106 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@
2020
--shadow-glow: 0 10px 30px -10px rgba(6, 182, 212, 0.15), 0 0 1px 1px rgba(6, 182, 212, 0.2);
2121
}
2222

23+
body.light-theme {
24+
--bg-color: #f8fafc; /* 淺灰色科技感背景 */
25+
--text-primary: #0f172a; /* 深藍黑色主標題 */
26+
--text-secondary: #475569; /* 次要文字 */
27+
--text-muted: #64748b; /* 輔助文字 */
28+
--card-bg: rgba(255, 255, 255, 0.7); /* 半透明亮色毛玻璃卡片 */
29+
--card-hover-bg: rgba(255, 255, 255, 0.9);
30+
--card-border: rgba(15, 23, 42, 0.08);
31+
--card-border-hover: rgba(6, 182, 212, 0.5);
32+
--shadow-glow: 0 10px 30px -10px rgba(6, 182, 212, 0.1), 0 0 1px 1px rgba(6, 182, 212, 0.15);
33+
}
34+
2335
/* Reset & Base Styles */
2436
* {
2537
margin: 0;
@@ -35,6 +47,30 @@ body {
3547
overflow-x: hidden;
3648
position: relative;
3749
line-height: 1.6;
50+
transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
51+
}
52+
53+
body.light-theme h1 {
54+
background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
55+
-webkit-background-clip: text;
56+
-webkit-text-fill-color: transparent;
57+
}
58+
59+
body.light-theme .bg-glow {
60+
opacity: 0.08;
61+
}
62+
63+
body.light-theme .tab-navigation {
64+
background: rgba(255, 255, 255, 0.65);
65+
box-shadow: 0 4px 20px -5px rgba(15, 23, 42, 0.05);
66+
}
67+
68+
body.light-theme .tab-btn:hover {
69+
background: rgba(15, 23, 42, 0.03);
70+
}
71+
72+
body.light-theme .original-desc {
73+
background: rgba(15, 23, 42, 0.03);
3874
}
3975

4076
/* Ambient Glow Backgrounds */
@@ -76,16 +112,62 @@ body {
76112
position: relative;
77113
}
78114

115+
.header-top {
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
position: relative;
120+
width: 100%;
121+
margin-bottom: 1.5rem;
122+
}
123+
79124
.logo-area {
80125
display: inline-flex;
81126
align-items: center;
82127
gap: 0.5rem;
83-
margin-bottom: 1rem;
84128
padding: 0.5rem 1rem;
85129
background: rgba(255, 255, 255, 0.03);
86130
border: 1px solid var(--card-border);
87131
border-radius: 9999px;
88132
backdrop-filter: blur(10px);
133+
transition: var(--transition-smooth);
134+
}
135+
136+
.theme-toggle-btn {
137+
position: absolute;
138+
right: 0;
139+
top: 50%;
140+
transform: translateY(-50%);
141+
background: rgba(255, 255, 255, 0.03);
142+
border: 1px solid var(--card-border);
143+
border-radius: 50%;
144+
width: 42px;
145+
height: 42px;
146+
display: flex;
147+
align-items: center;
148+
justify-content: center;
149+
color: var(--text-secondary);
150+
cursor: pointer;
151+
transition: var(--transition-smooth);
152+
backdrop-filter: blur(10px);
153+
outline: none;
154+
}
155+
156+
.theme-toggle-btn:hover {
157+
color: var(--text-primary);
158+
background: rgba(255, 255, 255, 0.08);
159+
border-color: var(--card-border-hover);
160+
transform: translateY(-50%) rotate(15deg);
161+
}
162+
163+
.theme-toggle-btn svg {
164+
width: 20px;
165+
height: 20px;
166+
transition: transform 0.3s ease;
167+
}
168+
169+
.theme-toggle-btn:active svg {
170+
transform: scale(0.8);
89171
}
90172

91173
.logo-text {
@@ -142,6 +224,12 @@ h1 {
142224
border-radius: 16px;
143225
align-self: center;
144226
backdrop-filter: blur(10px);
227+
scrollbar-width: none; /* Firefox */
228+
transition: var(--transition-smooth);
229+
}
230+
231+
.tab-navigation::-webkit-scrollbar {
232+
display: none; /* Safari and Chrome */
145233
}
146234

147235
.tab-btn {
@@ -158,6 +246,7 @@ h1 {
158246
transition: var(--transition-smooth);
159247
outline: none;
160248
min-width: 140px;
249+
flex-shrink: 0; /* Prevent button from shrinking */
161250
}
162251

163252
.tab-btn:hover {
@@ -389,9 +478,9 @@ h1 {
389478
}
390479

391480
.summary-content {
392-
font-size: 1.05rem;
481+
font-size: 1.1rem;
393482
color: var(--text-primary);
394-
line-height: 1.7;
483+
line-height: 1.75;
395484
}
396485

397486
/* Expandable Original Description Details */
@@ -502,6 +591,20 @@ h1 {
502591
font-size: 2rem;
503592
}
504593

594+
.header-top {
595+
flex-direction: column;
596+
gap: 1rem;
597+
}
598+
599+
.theme-toggle-btn {
600+
position: static;
601+
transform: none;
602+
}
603+
604+
.theme-toggle-btn:hover {
605+
transform: rotate(15deg);
606+
}
607+
505608
.tab-navigation {
506609
width: 100%;
507610
overflow-x: auto;

0 commit comments

Comments
 (0)