feat: update video content and improve grid layout

- Add new video thumbnails for music, game, tech, and art categories
- Update video data with more realistic content
- Adjust grid layout dimensions for better responsiveness
- Simplify category buttons in the UI
- Remove unused maxresdefault.jpg cover image

css/style.css

@@ -304,7 +304,7 @@ body {
 /* 视频网格 */
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
     gap: 24px;
     margin-bottom: 48px;
 }
@@ -474,7 +474,7 @@ body {
 
 .shorts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 16px;
 }
 

index.html

@@ -172,13 +172,10 @@
                     <button class="category-btn active">All</button>
                     <button class="category-btn">Music</button>
                     <button class="category-btn">Game</button>
-                    <button class="category-btn">Live</button>
+                    <button class="category-btn">Technology</button>
-                    <button class="category-btn">Album</button>
-                    <button class="category-btn">Animation</button>
                     <button class="category-btn">Art</button>
                     <button class="category-btn">Recently Uploaded</button>
                     <button class="category-btn">Watched</button>
-                    <button class="category-btn">New</button>
                 </div>
                 
                 <!-- 横屏视频 -->

js/script.js

@@ -37,7 +37,7 @@ let videos = [
     "id": 4,
     "title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
     "channel": "KitKit Lu",
-    "views": "1,856,164",
+    "views": "1,856,264",
     "uploadDate": "5 months ago",
     "duration": "2:39",
     "thumbnail": "img/cover/music-04.jpg",
@@ -90,191 +90,411 @@ let videos = [
   },
   {
     "id": 9,
-    "title": "React vs Vue vs Angular",
+    "title": "ヨルシカ - 春泥棒（OFFICIAL VIDEO）",
-    "channel": "前端开发",
+    "channel": "ヨルシカ / n-buna Official",
-    "views": "1,876,543",
+    "views": "123,456,789",
-    "uploadDate": "3天前",
+    "uploadDate": "5 years ago",
-    "duration": "19:45",
+    "duration": "4:17",
-    "thumbnail": "https://picsum.photos/id/9/640/360",
+    "thumbnail": "img/cover/music-09.jpg",
-    "category": "live",
+    "category": "music",
-    "type": "live"
+    "type": "video"
   },
   {
     "id": 10,
-    "title": "机器学习入门到精通",
+    "title": "YOASOBI「アイドル」Official Music Video",
-    "channel": "AI 研究",
+    "channel": "YOASOBI Official",
-    "views": "2,345,678",
+    "views": "456,789,123",
-    "uploadDate": "5天前",
+    "uploadDate": "2 years ago",
-    "duration": "35:22",
+    "duration": "3:33",
-    "thumbnail": "https://picsum.photos/id/10/640/360",
+    "thumbnail": "img/cover/music-10.jpg",
-    "category": "AI",
+    "category": "music",
     "type": "video"
   },
   {
     "id": 11,
-    "title": "编程技巧分享",
+    "title": "花譜 - 不可解",
-    "channel": "编程大师",
+    "channel": "花譜 -KAF-",
-    "views": "456,789",
+    "views": "12,345,678",
-    "uploadDate": "1天前",
+    "uploadDate": "3 years ago",
-    "duration": "01:23",
+    "duration": "4:05",
-    "thumbnail": "https://picsum.photos/id/11/360/640",
+    "thumbnail": "img/cover/music-11.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 12,
-    "title": "JavaScript 小技巧",
+    "title": "ZUTOMAYO - STUDY ME",
-    "channel": "前端开发",
+    "channel": "ZUTOMAYO",
-    "views": "789,012",
+    "views": "23,456,789",
-    "uploadDate": "2天前",
+    "uploadDate": "1 year ago",
-    "duration": "00:58",
+    "duration": "3:45",
-    "thumbnail": "https://picsum.photos/id/12/360/640",
+    "thumbnail": "img/cover/music-12.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 13,
-    "title": "Python 一行代码",
+    "title": "Eve - 廻廻奇譚",
-    "channel": "数据科学",
+    "channel": "Eve",
-    "views": "567,890",
+    "views": "89,123,456",
-    "uploadDate": "3天前",
+    "uploadDate": "4 years ago",
-    "duration": "01:15",
+    "duration": "3:55",
-    "thumbnail": "https://picsum.photos/id/13/360/640",
+    "thumbnail": "img/cover/music-13.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 14,
-    "title": "前端开发日常",
+    "title": "ClariS - コネクト",
-    "channel": "前端开发",
+    "channel": "ClariS Official",
-    "views": "987,654",
+    "views": "45,678,901",
-    "uploadDate": "1天前",
+    "uploadDate": "10 years ago",
-    "duration": "01:32",
+    "duration": "4:30",
-    "thumbnail": "https://picsum.photos/id/14/360/640",
+    "thumbnail": "img/cover/music-14.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 15,
-    "title": "AI 生成艺术",
+    "title": "米津玄師  Kenshi Yonezu  - Lemon",
-    "channel": "AI 研究",
+    "channel": "Kenshi Yonezu  米津玄師",
-    "views": "1,234,567",
+    "views": "96,539,145",
-    "uploadDate": "2天前",
+    "uploadDate": "7 years ago",
-    "duration": "01:45",
+    "duration": "4:35",
-    "thumbnail": "https://picsum.photos/id/15/360/640",
+    "thumbnail": "img/cover/music-15.jpg",
-    "category": "AI",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 16,
-    "title": "数据可视化技巧",
+    "title": "【初音ミク】 夜明けと蛍 【オリジナル】",
-    "channel": "数据科学",
+    "channel": "ヨルシカ / n-buna Official",
-    "views": "654,321",
+    "views": "27,749,534",
-    "uploadDate": "4天前",
+    "uploadDate": "8 years ago",
-    "duration": "01:05",
+    "duration": "5:10",
-    "thumbnail": "https://picsum.photos/id/16/360/640",
+    "thumbnail": "img/cover/music-16.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 17,
-    "title": "编程面试题",
+    "title": "Empty old City - Buffer",
-    "channel": "编程大师",
+    "channel": "Empty old city",
-    "views": "876,543",
+    "views": "838,946",
-    "uploadDate": "3天前",
+    "uploadDate": "1 year ago",
-    "duration": "01:20",
+    "duration": "3:18",
-    "thumbnail": "https://picsum.photos/id/17/360/640",
+    "thumbnail": "img/cover/music-17.jpg",
-    "category": "编程",
+    "category": "music",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 18,
-    "title": "Web 设计趋势",
+    "title": "I built Git for Minecraft for a hackathon and won",
-    "channel": "前端开发",
+    "channel": "MathRayyan",
-    "views": "765,432",
+    "views": "288,346",
-    "uploadDate": "5天前",
+    "uploadDate": "12 days ago",
-    "duration": "01:10",
+    "duration": "5:13",
-    "thumbnail": "https://picsum.photos/id/18/360/640",
+    "thumbnail": "img/cover/game-18.jpg",
-    "category": "设计",
+    "category": "game",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 19,
-    "title": "机器学习模型训练",
+    "title": "怎麼讓遊戲越來越真？PBR貼圖是怎麼做到的？",
-    "channel": "AI 研究",
+    "channel": "孫拓海Taku",
-    "views": "1,098,765",
+    "views": "25,364",
-    "uploadDate": "2天前",
+    "uploadDate": "3 weeks ago",
-    "duration": "01:35",
+    "duration": "13:14",
-    "thumbnail": "https://picsum.photos/id/19/360/640",
+    "thumbnail": "img/cover/game-19.jpg",
-    "category": "AI",
+    "category": "game",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 20,
-    "title": "Python 库推荐",
+    "title": "「空あくあ!」當さくな說出這句台詞時 全場都淚崩了....【結城さくな】【Vtuber中文/翻譯/精華】",
-    "channel": "数据科学",
+    "channel": "Dar烤肉!",
-    "views": "543,210",
+    "views": "116,498",
-    "uploadDate": "1天前",
+    "uploadDate": "7 days ago",
-    "duration": "01:08",
+    "duration": "8:35",
-    "thumbnail": "https://picsum.photos/id/20/360/640",
+    "thumbnail": "img/cover/game-20.jpg",
-    "category": "编程",
+    "category": "game",
-    "type": "short"
+    "type": "video"
   },
   {
     "id": 21,
-    "title": "2024年前端开发趋势",
+    "title": "「明日方舟：终末地性能分析：二游画质巅峰？榨干手机！",
-    "channel": "前端开发",
+    "channel": "极客湾Geekerwan",
-    "views": "1,345,678",
+    "views": "51,649",
-    "uploadDate": "1周前",
+    "uploadDate": "10 days ago",
-    "duration": "18:32",
+    "duration": "22:13",
-    "thumbnail": "https://picsum.photos/id/21/640/360",
+    "thumbnail": "img/cover/tech-21.jpg",
-    "category": "编程",
+    "category": "tech",
     "type": "video"
   },
   {
     "id": 22,
-    "title": "数据结构与算法基础",
+    "title": "What GPU is the BEST for Linux Gaming?",
-    "channel": "编程大师",
+    "channel": "Linus Tech Tips",
-    "views": "987,654",
+    "views": "96,751",
-    "uploadDate": "3天前",
+    "uploadDate": "7 days ago",
-    "duration": "25:45",
+    "duration": "10:55",
-    "thumbnail": "https://picsum.photos/id/22/640/360",
+    "thumbnail": "img/cover/tech-22.jpg",
-    "category": "编程",
+    "category": "tech",
     "type": "video"
   },
   {
     "id": 23,
-    "title": "人工智能的未来发展",
+    "title": "How Hard Is It to Build Your First PC?",
-    "channel": "AI 研究",
+    "channel": "PLACITECH",
-    "views": "2,123,456",
+    "views": "4,351",
-    "uploadDate": "5天前",
+    "uploadDate": "2 months ago",
-    "duration": "30:15",
+    "duration": "12:47",
-    "thumbnail": "https://picsum.photos/id/23/640/360",
+    "thumbnail": "img/cover/tech-23.jpg",
-    "category": "AI",
+    "category": "tech",
     "type": "video"
   },
   {
     "id": 24,
-    "title": "Python Web 开发实战",
+    "title": "回顾我们最中意的 2025 年产品发布 - 谷歌开发者新闻（年终特辑）",
-    "channel": "数据科学",
+    "channel": "Google for Developers",
-    "views": "765,432",
+    "views": "3,475",
-    "uploadDate": "2周前",
+    "uploadDate": "1 month ago",
-    "duration": "22:33",
+    "duration": "6:39",
-    "thumbnail": "https://picsum.photos/id/24/640/360",
+    "thumbnail": "img/cover/tech-24.jpg",
-    "category": "编程",
+    "category": "tech",
     "type": "video"
   },
   {
     "id": 25,
-    "title": "CSS 高级技巧",
+    "title": "Commodore 128 Alternate Universe",
-    "channel": "前端开发",
+    "channel": "The 8-Bit Guy",
-    "views": "876,543",
+    "views": "17,498",
-    "uploadDate": "1天前",
+    "uploadDate": "4 months ago",
-    "duration": "15:22",
+    "duration": "8:35",
-    "thumbnail": "https://picsum.photos/id/25/640/360",
+    "thumbnail": "img/cover/tech-25.jpg",
-    "category": "编程",
+    "category": "tech",
     "type": "video"
-  }
+  },
+  {
+    "id": 25,
+    "title": "Commodore 128 Alternate Universe",
+    "channel": "The 8-Bit Guy",
+    "views": "17,498",
+    "uploadDate": "4 months ago",
+    "duration": "8:35",
+    "thumbnail": "img/cover/tech-25.jpg",
+    "category": "tech",
+    "type": "video"
+  },
+  {
+    "id": 25,
+    "title": "Commodore 128 Alternate Universe",
+    "channel": "The 8-Bit Guy",
+    "views": "17,498",
+    "uploadDate": "4 months ago",
+    "duration": "8:35",
+    "thumbnail": "img/cover/tech-25.jpg",
+    "category": "tech",
+    "type": "video"
+  },
+  {
+    "id": 26,
+    "title": "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
+    "channel": "AlanBeckerTutorials",
+    "views": "193,762",
+    "uploadDate": "7 years ago",
+    "duration": "14:52",
+    "thumbnail": "img/cover/art-26.jpg",
+    "category": "art",
+    "type": "video"
+  },
+  {
+    "id": 27,
+    "title": "Animation vs. Game Design",
+    "channel": "Alan Backer",
+    "views": "694,264",
+    "uploadDate": "2 months ago",
+    "duration": "3:12",
+    "thumbnail": "img/cover/art-27.jpg",
+    "category": "art",
+    "type": "video"
+  },
+  {
+    "id": 28,
+    "title": "The Far Lands - Animation vs. Minecraft Shorts Ep 38",
+    "channel": "Alan Backer",
+    "views": "975,192",
+    "uploadDate": "1 month ago",
+    "duration": "9:10",
+    "thumbnail": "img/cover/art-28.jpg",
+    "category": "art",
+    "type": "video"
+  },
+  {
+    "id": 29,
+    "title": "【Official MV】ray 超かぐや姫！Version／かぐや (cv.夏吉ゆうこ) ＆ 月見ヤチヨ (cv.早見沙織) from #超かぐや姫 ！【新作アニメーション】",
+    "channel": "",
+    "views": "78,192",
+    "uploadDate": "5 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-29.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 30,
+    "title": "ドッペルゲンガー feat.初音ミク#vocaloid #初音ミク",
+    "channel": "",
+    "views": "2,359",
+    "uploadDate": "3 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-30.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 31,
+    "title": "Melt CPK! Remix — English Subtitled Version",
+    "channel": "",
+    "views": "2,264",
+    "uploadDate": "3 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-31.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 32,
+    "title": "【Suite History】花譜×#KTちゃん「ギミギミ逃避行feat. #KTちゃん(Prod. peko)」 #花譜 #KTちゃん #組曲 #shorts",
+    "channel": "",
+    "views": "5,430",
+    "uploadDate": "2 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-32.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 33,
+    "title": "ヨルシカ - プレイシック　#ヨルシカ #プレイシック #二人称  #yorushika #playsick #secondperson",
+    "channel": "",
+    "views": "39,254",
+    "uploadDate": "10 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-33.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 34,
+    "title": "#ヨルシカ #live #前世 #yorushika",
+    "channel": "",
+    "views": "36,181",
+    "uploadDate": "1 month ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-34.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 35,
+    "title": "【歌ってみた】蜜月アン・ドゥ・トロワ covered by ヰ世界情緒 #shorts",
+    "channel": "",
+    "views": "2,163",
+    "uploadDate": "6 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-35.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 36,
+    "title": "Thank you 2025🩵Have a wonderful new year! #YOASOBI_2025",
+    "channel": "",
+    "views": "36,165",
+    "uploadDate": "20 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-36.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 37,
+    "title": "初めてラブソングを書きました。新曲「ハートマーク feat.川谷絵音」#礼衣 #ハートマーク",
+    "channel": "",
+    "views": "2,609",
+    "uploadDate": "3 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/music-37.jpg",
+    "category": "music",
+    "type": "short"
+  },
+  {
+    "id": 38,
+    "title": "Would you play this at the school talent show for $500? #osu #osugame",
+    "channel": "",
+    "views": "133,658",
+    "uploadDate": "2 months ago",
+    "duration": "",
+    "thumbnail": "img/cover/game-38.jpg",
+    "category": "game",
+    "type": "short"
+  },
+  {
+    "id": 39,
+    "title": "May your holidays be filled with great vibes, full combos, and lots of epic tracks! 🎵",
+    "channel": "",
+    "views": "1,658",
+    "uploadDate": "1 months ago",
+    "duration": "",
+    "thumbnail": "img/cover/game-39.jpg",
+    "category": "game",
+    "type": "short"
+  },
+  {
+    "id": 40,
+    "title": "PANDORA PARADOXXX RE:MASTER alternative spin method #maimai #maimaiでらっくす #maimai_dx",
+    "channel": "",
+    "views": "25,365",
+    "uploadDate": "12 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/game-40.jpg",
+    "category": "game",
+    "type": "short"
+  },
+  {
+    "id": 41,
+    "title": "Arch Linux VS Debian in 1 Min #linux #arch #debian",
+    "channel": "",
+    "views": "3,565",
+    "uploadDate": "11 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/tech-41.jpg",
+    "category": "tech",
+    "type": "short"
+  },
+  {
+    "id": 42,
+    "title": "#linux #homelab #opensource #tech #debian",
+    "channel": "",
+    "views": "7,925",
+    "uploadDate": "10 days ago",
+    "duration": "",
+    "thumbnail": "img/cover/tech-42.jpg",
+    "category": "tech",
+    "type": "short"
+  },
+  {
+    "id": 43,
+    "title": "The one key keyboard #tech",
+    "channel": "",
+    "views": "4,571",
+    "uploadDate": "1 month ago",
+    "duration": "",
+    "thumbnail": "img/cover/tech-43.jpg",
+    "category": "tech",
+    "type": "short"
+  },
 ];
 let currentCategory = 'All';
 
@@ -288,31 +508,18 @@ const shortsGrid = document.querySelector('.shorts-grid');
 const categoryBtns = document.querySelectorAll('.category-btn');
 const subscriptionsList = document.querySelector('.subscriptions-list');
 
-// 初始化
 async function init() {
-    // 加载视频数据
     await loadVideos();
-    
-    // 渲染视频
     renderVideos();
-    
-    // 渲染 Shorts
     renderShorts();
-    
-    // 渲染订阅内容
     renderSubscriptions();
-    
-    // 绑定事件
     bindEvents();
 }
 
-// 加载视频数据
 async function loadVideos() {
-    // 数据已在全局变量中定义，直接返回
+    return Promise.resolve(); // Already defined in global scope
-    return Promise.resolve();
 }
 
-// 渲染视频
 function renderVideos() {
     const filteredVideos = filterVideosByCategory(currentCategory);
     
@@ -326,7 +533,6 @@ function renderVideos() {
     });
 }
 
-// 渲染 Shorts
 function renderShorts() {
     const filteredVideos = filterVideosByCategory(currentCategory);
     
@@ -340,23 +546,18 @@ function renderShorts() {
     });
 }
 
-// 根据分类过滤视频
 function filterVideosByCategory(category) {
-    if (category === '全部') {
+    if (category === 'All') {
         return videos;
     }
     
-    // 简单的分类映射
     const categoryMap = {
         'Music': ['music'],
         'Game': ['game'],
-        'Live': ['live'],
+        'Technology': ['tech'],
-        'Album': ['album'],
-        'Animation': ['animation'],
         'Art': ['art'],
         'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
-        'Watched': [],
+        'Watched': []
-        'New': videos
     };
     
     if (categoryMap[category]) {
@@ -370,7 +571,6 @@ function filterVideosByCategory(category) {
     return videos;
 }
 
-// 创建视频卡片
 function createVideoCard(video) {
     const card = document.createElement('div');
     card.className = 'video-card';
@@ -436,7 +636,6 @@ function createVideoCard(video) {
         </div>
     `;
     
-    // 绑定菜单事件
     const menuToggle = card.querySelector('.menu-toggle');
     const menuDropdown = card.querySelector('.menu-dropdown');
     
@@ -445,15 +644,13 @@ function createVideoCard(video) {
         menuDropdown.classList.toggle('show');
     });
     
-    // 点击其他地方关闭菜单
+    document.addEventListener('click', () => { // Close the menu when clicking outside
-    document.addEventListener('click', () => {
         menuDropdown.classList.remove('show');
     });
     
     return card;
 }
 
-// 创建 Shorts 卡片
 function createShortsCard(video) {
     const card = document.createElement('div');
     card.className = 'shorts-card';
@@ -474,8 +671,7 @@ function createShortsCard(video) {
     return card;
 }
 
-// 渲染订阅内容
+function renderSubscriptions() { // Render the subscriptions list
-function renderSubscriptions() {
     const subscriptions = [
         { name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
         { name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
@@ -504,9 +700,7 @@ function renderSubscriptions() {
         subscriptionsList.appendChild(item);
     });
 }
-
+function performSearch(query) { // Perform the search and render the results
-// 执行搜索
-function performSearch(query) {
     if (!query.trim()) {
         searchResults.style.display = 'none';
         return;
@@ -520,7 +714,7 @@ function performSearch(query) {
     renderSearchResults(results, query);
 }
 
-// 渲染搜索结果
+// Render the search results
 function renderSearchResults(results, query) {
     searchResultsContent.innerHTML = '';
     
@@ -534,7 +728,7 @@ function renderSearchResults(results, query) {
         const item = document.createElement('div');
         item.className = 'search-result-item';
         
-        // 高亮关键词
+        // Highlight the search keywords in the title and channel name
         const highlightedTitle = video.title.replace(new RegExp(`(${query})`, 'gi'), '<span class="highlight">$1</span>');
         const highlightedChannel = video.channel.replace(new RegExp(`(${query})`, 'gi'), '<span class="highlight">$1</span>');
         
@@ -555,9 +749,9 @@ function renderSearchResults(results, query) {
     searchResults.style.display = 'block';
 }
 
-// 绑定事件
+// Bind events to the DOM elements
-function bindEvents() {
+function bindEvents() { // Bind events to the DOM elements
-    // 搜索事件
+    // Search event
     searchInput.addEventListener('input', (e) => {
         performSearch(e.target.value);
     });
@@ -566,38 +760,40 @@ function bindEvents() {
         performSearch(searchInput.value);
     });
     
-    // 点击其他地方关闭搜索结果
+    // Close the search results when clicking outside
     document.addEventListener('click', (e) => {
         if (!e.target.closest('.search-container') && !e.target.closest('.search-results')) {
             searchResults.style.display = 'none';
         }
     });
     
-    // 分类按钮事件
+    // Category buttons event   
     categoryBtns.forEach(btn => {
         btn.addEventListener('click', () => {
-            // 移除所有活动状态
+            // Remove all active states
             categoryBtns.forEach(b => b.classList.remove('active'));
-            // 添加当前活动状态
+            // Add current active state
             btn.classList.add('active');
-            // 更新当前分类
+            // Update current category
             currentCategory = btn.textContent;
-            // 重新渲染视频
+            // Re-render videos and shorts
             renderVideos();
             renderShorts();
         });
     });
     
-    // 侧边栏导航按钮事件
+    // Sidebar navigation buttons event
     const navBtns = document.querySelectorAll('.nav-btn');
     navBtns.forEach(btn => {
         btn.addEventListener('click', () => {
+            // Remove all active states
             navBtns.forEach(b => b.classList.remove('active'));
+            // Add current active state
             btn.classList.add('active');
         });
     });
     
-    // 订阅板块展开/收起
+    // Subscription section expand/collapse event
     const subscriptionTitle = document.querySelector('.nav-section-title');
     subscriptionTitle.addEventListener('click', () => {
         const subscriptionsList = document.querySelector('.subscriptions-list');
@@ -613,5 +809,5 @@ function bindEvents() {
     });
 }
 
-// 页面加载完成后初始化
+// Page load event: initialize the application
 window.addEventListener('DOMContentLoaded', init);