refactor: replace followed youtubers

feat:       switch site style to dark mode

css/style.css

@@ -7,8 +7,8 @@
 
 body {
     font-family: 'Roboto', Arial, sans-serif;
-    background-color: #f1f1f1;
+    background-color: #121212;
-    color: #333;
+    color: #ffffff;
 }
 
 /* 主容器 */
@@ -26,8 +26,8 @@ body {
     justify-content: space-between;
     padding: 0 16px;
     height: 56px;
-    background-color: white;
+    background-color: #202020;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid #303030;
     position: sticky;
     top: 0;
     z-index: 100;
@@ -45,7 +45,7 @@ body {
     padding: 8px;
     margin-right: 16px;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
 }
 
 .youtube-logo img {
@@ -70,11 +70,13 @@ body {
     flex: 1;
     height: 40px;
     padding: 0 16px;
-    border: 1px solid #d3d3d3;
+    border: 1px solid #404040;
     border-radius: 20px 0 0 20px;
     font-size: 16px;
     outline: none;
     transition: all 0.3s ease;
+    background-color: #121212;
+    color: #ffffff;
 }
 
 .search-input:focus {
@@ -85,16 +87,16 @@ body {
 .search-btn {
     height: 40px;
     padding: 0 20px;
-    background-color: #f8f8f8;
+    background-color: #303030;
-    border: 1px solid #d3d3d3;
+    border: 1px solid #404040;
     border-left: none;
     border-radius: 0 20px 20px 0;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
 }
 
 .search-btn:hover {
-    background-color: #f0f0f0;
+    background-color: #404040;
 }
 
 .voice-search-btn {
@@ -102,14 +104,14 @@ body {
     height: 40px;
     width: 40px;
     border-radius: 50%;
-    background-color: #f8f8f8;
+    background-color: #303030;
     border: none;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
 }
 
 .voice-search-btn:hover {
-    background-color: #f0f0f0;
+    background-color: #404040;
 }
 
 .header-right {
@@ -125,7 +127,7 @@ body {
     padding: 8px 16px;
     margin-right: 16px;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
     font-size: 14px;
 }
 
@@ -140,7 +142,7 @@ body {
     padding: 8px;
     margin-right: 16px;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
     font-size: 20px;
 }
 
@@ -149,7 +151,7 @@ body {
     border: none;
     padding: 8px;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
     font-size: 20px;
 }
 
@@ -163,8 +165,8 @@ body {
 /* 侧边栏样式 */
 .sidebar {
     width: 240px;
-    background-color: white;
+    background-color: #202020;
-    border-right: 1px solid #e0e0e0;
+    border-right: 1px solid #303030;
     overflow-y: auto;
     flex-shrink: 0;
 }
@@ -198,16 +200,16 @@ body {
     text-align: left;
     cursor: pointer;
     font-size: 14px;
-    color: #333;
+    color: #ffffff;
     transition: background-color 0.2s ease;
 }
 
 .nav-btn:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .nav-btn.active {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0.15);
     font-weight: 500;
 }
 
@@ -231,7 +233,7 @@ body {
 }
 
 .subscription-item:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .subscription-avatar {
@@ -243,22 +245,16 @@ body {
     overflow: hidden;
 }
 
-.subscription-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
 .subscription-name {
     font-size: 14px;
-    color: #333;
+    color: #ffffff;
 }
 
 .sidebar-footer {
     padding: 16px 24px;
     font-size: 12px;
     color: #909090;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid #303030;
 }
 
 /* 视频内容区 */
@@ -266,7 +262,7 @@ body {
     flex: 1;
     overflow-y: auto;
     padding: 24px;
-    background-color: #f9f9f9;
+    background-color: #121212;
 }
 
 /* 板块按钮 */
@@ -279,23 +275,24 @@ body {
 
 .category-btn {
     padding: 8px 16px;
-    background-color: white;
+    background-color: #303030;
-    border: 1px solid #e0e0e0;
+    border: 1px solid #404040;
     border-radius: 20px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 500;
+    color: #ffffff;
     transition: all 0.2s ease;
 }
 
 .category-btn:hover {
-    background-color: #f1f1f1;
+    background-color: #404040;
 }
 
 .category-btn.active {
-    background-color: #333;
+    background-color: #ffffff;
-    color: white;
+    color: #121212;
-    border-color: #333;
+    border-color: #ffffff;
 }
 
 /* 视频网格 */
@@ -308,7 +305,7 @@ body {
 
 /* 视频卡片 */
 .video-card {
-    background-color: white;
+    background-color: #202020;
     border-radius: 12px;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     cursor: pointer;
@@ -327,14 +324,14 @@ body {
 
 .video-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .video-thumbnail {
     position: relative;
     width: 100%;
     padding-top: 56.25%; /* 16:9 比例 */
-    background-color: #f1f1f1;
+    background-color: #303030;
 }
 
 .video-thumbnail img {
@@ -382,11 +379,12 @@ body {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: #ffffff;
 }
 
 .video-meta {
     font-size: 12px;
-    color: #606060;
+    color: #909090;
     line-height: 1.4;
 }
 
@@ -395,10 +393,7 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     margin-bottom: 4px;
-}
+  display: flex;
-
-.video-stats {
-    display: flex;
     gap: 8px;
 }
 
@@ -411,7 +406,7 @@ body {
     border: none;
     padding: 8px;
     cursor: pointer;
-    color: #606060;
+    color: #909090;
     font-size: 16px;
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -425,10 +420,10 @@ body {
     position: absolute;
     top: 100%;
     right: 0;
-    background-color: white;
+    background-color: #202020;
-    border: 1px solid #e0e0e0;
+    border: 1px solid #303030;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     padding: 8px 0;
     min-width: 200px;
     z-index: 1000;
@@ -445,17 +440,18 @@ body {
     padding: 8px 16px;
     cursor: pointer;
     font-size: 14px;
+    color: #ffffff;
     transition: background-color 0.2s ease;
 }
 
 .menu-item:hover {
-    background-color: #f1f1f1;
+    background-color: #303030;
 }
 
 .menu-item i {
     margin-right: 12px;
     font-size: 16px;
-    color: #606060;
+    color: #909090;
 }
 
 /* Shorts 部分 */
@@ -467,6 +463,7 @@ body {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 16px;
+    color: #ffffff;
 }
 
 .shorts-grid {
@@ -480,7 +477,7 @@ body {
     position: relative;
     width: 100%;
     padding-top: 177.78%; /* 9:16 比例 */
-    background-color: #f1f1f1;
+    background-color: #303030;
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
@@ -489,7 +486,7 @@ body {
 
 .shorts-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .shorts-thumbnail {
@@ -542,9 +539,9 @@ body {
     top: 56px;
     left: 0;
     right: 0;
-    background-color: white;
+    background-color: #202020;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid #303030;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 99;
     max-height: 80vh;
     overflow-y: auto;
@@ -565,7 +562,7 @@ body {
 }
 
 .search-result-item:hover {
-    background-color: #f1f1f1;
+    background-color: #303030;
 }
 
 .search-result-thumbnail {
@@ -573,7 +570,7 @@ body {
     height: 68px;
     border-radius: 8px;
     margin-right: 16px;
-    background-color: #f1f1f1;
+    background-color: #303030;
     flex-shrink: 0;
 }
 
@@ -600,22 +597,24 @@ body {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: normal;
+    color: #ffffff;
 }
 
 .search-result-channel {
     font-size: 12px;
-    color: #606060;
+    color: #909090;
     margin-bottom: 2px;
 }
 
 .search-result-stats {
     font-size: 12px;
-    color: #606060;
+    color: #909090;
 }
 
 .highlight {
-    background-color: #fff3cd;
+    background-color: #3d3d29;
     font-weight: 500;
+    color: #ffffff;
 }
 
 /* 响应式设计 */

index.html

@@ -22,7 +22,7 @@
             
             <div class="header-center">
                 <div class="search-container">
-                    <input type="text" class="search-input" placeholder="搜索">
+                    <input type="text" class="search-input" placeholder="Search">
                     <button class="search-btn">
                         <i class="fas fa-search"></i>
                     </button>
@@ -35,7 +35,7 @@
             <div class="header-right">
                 <button class="create-btn">
                     <i class="fas fa-plus"></i>
-                    <span>创建</span>
+                    <span>Create</span>
                 </button>
                 <button class="notification-btn">
                     <i class="fas fa-bell"></i>
@@ -54,17 +54,17 @@
                     <div class="nav-section">
                         <button class="nav-btn active">
                             <i class="fas fa-home"></i>
-                            <span>首页</span>
+                            <span>Home</span>
                         </button>
                         <button class="nav-btn">
-                            <i class="fas fa-play"></i>
+                            <i class="fas fa-play-circle"></i>
                             <span>Shorts</span>
                         </button>
                     </div>
                     
                     <div class="nav-section">
                         <div class="nav-section-title">
-                            <span>订阅</span>
+                            <span>Subscriptions</span>
                             <i class="fas fa-chevron-right"></i>
                         </div>
                         <div class="subscriptions-list">
@@ -74,51 +74,51 @@
                     
                     <div class="nav-section">
                         <div class="nav-section-title">
-                            <span>我</span>
+                            <span>My YouTube</span>
                         </div>
                         <button class="nav-btn">
                             <i class="fas fa-history"></i>
-                            <span>历史记录</span>
+                            <span>History</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-list"></i>
-                            <span>播放列表</span>
+                            <span>Playlists</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-clock"></i>
-                            <span>稍后再看</span>
+                            <span>Later</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-thumbs-up"></i>
-                            <span>赞过的视频</span>
+                            <span>Liked Videos</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-video"></i>
-                            <span>我的视频</span>
+                            <span>My Videos</span>
                         </button>
                     </div>
                     
                     <div class="nav-section">
                         <div class="nav-section-title">
-                            <span>探索</span>
+                            <span>Explore</span>
                         </div>
                         <button class="nav-btn">
                             <i class="fas fa-music"></i>
-                            <span>音乐</span>
+                            <span>Music</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-film"></i>
-                            <span>电影</span>
+                            <span>Films</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-video"></i>
-                            <span>直播</span>
+                            <span>Live</span>
                         </button>
                     </div>
                     
                     <div class="nav-section">
                         <div class="nav-section-title">
-                            <span>更多 YouTube 产品与功能</span>
+                            <span>More YouTube Products & Features</span>
                         </div>
                         <button class="nav-btn">
                             <i class="fas fa-crown"></i>
@@ -126,7 +126,7 @@
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-store"></i>
-                            <span>YouTube 工作室</span>
+                            <span>YouTube Studio</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-music"></i>
@@ -141,19 +141,19 @@
                     <div class="nav-section">
                         <button class="nav-btn">
                             <i class="fas fa-cog"></i>
-                            <span>设置</span>
+                            <span>Settings</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-flag"></i>
-                            <span>举报记录</span>
+                            <span>Report History</span>
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-question-circle"></i>
-                            <span>帮助</span>
+                            <span>Help</span>   
                         </button>
                         <button class="nav-btn">
                             <i class="fas fa-comment"></i>
-                            <span>发送反馈</span>
+                            <span>Send Feedback</span>
                         </button>
                     </div>
                 </nav>
@@ -169,16 +169,16 @@
             <div class="video-content">
                 <!-- 板块按钮 -->
                 <div class="category-buttons">
-                    <button class="category-btn active">全部</button>
+                    <button class="category-btn active">All</button>
-                    <button class="category-btn">音乐</button>
+                    <button class="category-btn">Music</button>
-                    <button class="category-btn">游戏</button>
+                    <button class="category-btn">Game</button>
-                    <button class="category-btn">直播</button>
+                    <button class="category-btn">Live</button>
-                    <button class="category-btn">合辑</button>
+                    <button class="category-btn">Album</button>
-                    <button class="category-btn">动画</button>
+                    <button class="category-btn">Animation</button>
-                    <button class="category-btn">手工艺品</button>
+                    <button class="category-btn">Art</button>
-                    <button class="category-btn">最近上传</button>
+                    <button class="category-btn">Recently Uploaded</button>
-                    <button class="category-btn">已观看</button>
+                    <button class="category-btn">Watched</button>
-                    <button class="category-btn">发现新视频</button>
+                    <button class="category-btn">New</button>
                 </div>
                 
                 <!-- 横屏视频 -->

js/script.js

@@ -1,6 +1,282 @@
 // 全局变量
-let videos = [];
+let videos = [
-let currentCategory = '全部';
+  {
+    "id": 1,
+    "title": "透明なパレット (self cover)",
+    "channel": "Aqu3ra",
+    "views": "576,197",
+    "uploadDate": "1 months ago",
+    "duration": "3:03",
+    "thumbnail": "img/cover/music-01.jpg",
+    "category": "music",
+    "type": "video"
+  },
+  {
+    "id": 2,
+    "title": "【歌ってみた】Duvet / covered by ヰ世界情緒",
+    "channel": "ヰ世界情緒 -Isekaijoucho-",
+    "views": "721,627",
+    "uploadDate": "5 days ago",
+    "duration": "3:32",
+    "thumbnail": "img/cover/music-02.jpg",
+    "category": "music",
+    "type": "video"
+  },
+  {
+    "id": 3,
+    "title": "ヨルシカ　『 晴る 』　－文化祭2025－",
+    "channel": "countben",
+    "views": "142,561",
+    "uploadDate": "2 months ago",
+    "duration": "4:46",
+    "thumbnail": "img/cover/music-03.jpg",
+    "category": "music",
+    "type": "video"
+  },
+  {
+    "id": 4,
+    "title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
+    "channel": "KitKit Lu",
+    "views": "1,856,164",
+    "uploadDate": "5 months ago",
+    "duration": "2:39",
+    "thumbnail": "img/cover/music-04.jpg",
+    "category": "music",
+    "type": "video"
+  },
+  {
+    "id": 5,
+    "title": "I Can't Wait feat. GUMI",
+    "channel": "d0tc0mmie",
+    "views": "315,293",
+    "uploadDate": "1 month ago",
+    "duration": "1:35",
+    "thumbnail": "img/cover/music-05.jpg",
+    "category": "music",
+    "type": "video"
+  },
+  {
+    "id": 6,
+    "title": "MiSiDE: ZERO Update – Full Gameplay + Ending (Showcase)",
+    "channel": "RUSH PLAY",
+    "views": "900,156",
+    "uploadDate": "4 weeks ago",
+    "duration": "24:39",
+    "thumbnail": "img/cover/game-06.jpg",
+    "category": "game",
+    "type": "video"
+  },
+  {
+    "id": 7,
+    "title": "Minecraftの効果音でサイエンス",
+    "channel": "gmailアカウント",
+    "views": "651,192",
+    "uploadDate": "11 months ago",
+    "duration": "1:05",
+    "thumbnail": "img/cover/game-07.jpg",
+    "category": "game",
+    "type": "video"
+  },
+  {
+    "id": 8,
+    "title": "osu! NEEDS to Take Notes... (00PARTS World's 1st Clear)",
+    "channel": "bmc",
+    "views": "892,163",
+    "uploadDate": "1 month ago",
+    "duration": "8:21",
+    "thumbnail": "img/cover/game-08.jpg",
+    "category": "game",
+    "type": "video"
+  },
+  {
+    "id": 9,
+    "title": "React vs Vue vs Angular",
+    "channel": "前端开发",
+    "views": "1,876,543",
+    "uploadDate": "3天前",
+    "duration": "19:45",
+    "thumbnail": "https://picsum.photos/id/9/640/360",
+    "category": "live",
+    "type": "live"
+  },
+  {
+    "id": 10,
+    "title": "机器学习入门到精通",
+    "channel": "AI 研究",
+    "views": "2,345,678",
+    "uploadDate": "5天前",
+    "duration": "35:22",
+    "thumbnail": "https://picsum.photos/id/10/640/360",
+    "category": "AI",
+    "type": "video"
+  },
+  {
+    "id": 11,
+    "title": "编程技巧分享",
+    "channel": "编程大师",
+    "views": "456,789",
+    "uploadDate": "1天前",
+    "duration": "01:23",
+    "thumbnail": "https://picsum.photos/id/11/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 12,
+    "title": "JavaScript 小技巧",
+    "channel": "前端开发",
+    "views": "789,012",
+    "uploadDate": "2天前",
+    "duration": "00:58",
+    "thumbnail": "https://picsum.photos/id/12/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 13,
+    "title": "Python 一行代码",
+    "channel": "数据科学",
+    "views": "567,890",
+    "uploadDate": "3天前",
+    "duration": "01:15",
+    "thumbnail": "https://picsum.photos/id/13/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 14,
+    "title": "前端开发日常",
+    "channel": "前端开发",
+    "views": "987,654",
+    "uploadDate": "1天前",
+    "duration": "01:32",
+    "thumbnail": "https://picsum.photos/id/14/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 15,
+    "title": "AI 生成艺术",
+    "channel": "AI 研究",
+    "views": "1,234,567",
+    "uploadDate": "2天前",
+    "duration": "01:45",
+    "thumbnail": "https://picsum.photos/id/15/360/640",
+    "category": "AI",
+    "type": "short"
+  },
+  {
+    "id": 16,
+    "title": "数据可视化技巧",
+    "channel": "数据科学",
+    "views": "654,321",
+    "uploadDate": "4天前",
+    "duration": "01:05",
+    "thumbnail": "https://picsum.photos/id/16/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 17,
+    "title": "编程面试题",
+    "channel": "编程大师",
+    "views": "876,543",
+    "uploadDate": "3天前",
+    "duration": "01:20",
+    "thumbnail": "https://picsum.photos/id/17/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 18,
+    "title": "Web 设计趋势",
+    "channel": "前端开发",
+    "views": "765,432",
+    "uploadDate": "5天前",
+    "duration": "01:10",
+    "thumbnail": "https://picsum.photos/id/18/360/640",
+    "category": "设计",
+    "type": "short"
+  },
+  {
+    "id": 19,
+    "title": "机器学习模型训练",
+    "channel": "AI 研究",
+    "views": "1,098,765",
+    "uploadDate": "2天前",
+    "duration": "01:35",
+    "thumbnail": "https://picsum.photos/id/19/360/640",
+    "category": "AI",
+    "type": "short"
+  },
+  {
+    "id": 20,
+    "title": "Python 库推荐",
+    "channel": "数据科学",
+    "views": "543,210",
+    "uploadDate": "1天前",
+    "duration": "01:08",
+    "thumbnail": "https://picsum.photos/id/20/360/640",
+    "category": "编程",
+    "type": "short"
+  },
+  {
+    "id": 21,
+    "title": "2024年前端开发趋势",
+    "channel": "前端开发",
+    "views": "1,345,678",
+    "uploadDate": "1周前",
+    "duration": "18:32",
+    "thumbnail": "https://picsum.photos/id/21/640/360",
+    "category": "编程",
+    "type": "video"
+  },
+  {
+    "id": 22,
+    "title": "数据结构与算法基础",
+    "channel": "编程大师",
+    "views": "987,654",
+    "uploadDate": "3天前",
+    "duration": "25:45",
+    "thumbnail": "https://picsum.photos/id/22/640/360",
+    "category": "编程",
+    "type": "video"
+  },
+  {
+    "id": 23,
+    "title": "人工智能的未来发展",
+    "channel": "AI 研究",
+    "views": "2,123,456",
+    "uploadDate": "5天前",
+    "duration": "30:15",
+    "thumbnail": "https://picsum.photos/id/23/640/360",
+    "category": "AI",
+    "type": "video"
+  },
+  {
+    "id": 24,
+    "title": "Python Web 开发实战",
+    "channel": "数据科学",
+    "views": "765,432",
+    "uploadDate": "2周前",
+    "duration": "22:33",
+    "thumbnail": "https://picsum.photos/id/24/640/360",
+    "category": "编程",
+    "type": "video"
+  },
+  {
+    "id": 25,
+    "title": "CSS 高级技巧",
+    "channel": "前端开发",
+    "views": "876,543",
+    "uploadDate": "1天前",
+    "duration": "15:22",
+    "thumbnail": "https://picsum.photos/id/25/640/360",
+    "category": "编程",
+    "type": "video"
+  }
+];
+let currentCategory = 'All';
 
 // DOM 元素
 const searchInput = document.querySelector('.search-input');
@@ -32,14 +308,8 @@ async function init() {
 
 // 加载视频数据
 async function loadVideos() {
-    try {
+    // 数据已在全局变量中定义，直接返回
-        const response = await fetch('src/media.json');
+    return Promise.resolve();
-        videos = await response.json();
-    } catch (error) {
-        console.error('加载视频数据失败:', error);
-        // 使用默认数据
-        videos = [];
-    }
 }
 
 // 渲染视频
@@ -78,15 +348,15 @@ function filterVideosByCategory(category) {
     
     // 简单的分类映射
     const categoryMap = {
-        '音乐': ['音乐'],
+        'Music': ['music'],
-        '游戏': ['游戏'],
+        'Game': ['game'],
-        '直播': ['直播'],
+        'Live': ['live'],
-        '合辑': ['合辑'],
+        'Album': ['album'],
-        '动画': ['动画'],
+        'Animation': ['animation'],
-        '手工艺品': ['手工艺品'],
+        'Art': ['art'],
-        '最近上传': videos.filter(v => v.uploadDate.includes('天前')),
+        'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
-        '已观看': [],
+        'Watched': [],
-        '发现新视频': videos
+        'New': videos
     };
     
     if (categoryMap[category]) {
@@ -119,7 +389,7 @@ function createVideoCard(video) {
                 <div class="video-meta">
                     <div class="video-channel">${video.channel}</div>
                     <div class="video-stats">
-                        <span>${video.views} 次观看</span>
+                        <span>${video.views} views</span>
                         <span>${video.uploadDate}</span>
                     </div>
                 </div>
@@ -131,35 +401,35 @@ function createVideoCard(video) {
                 <div class="menu-dropdown">
                     <div class="menu-item">
                         <i class="fas fa-plus"></i>
-                        <span>添加到待播列表</span>
+                        <span>Add to Watch Later</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-clock"></i>
-                        <span>保存到"稍后再看"</span>
+                        <span>Save to "Watch Later"</span>  
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-list"></i>
-                        <span>保存到播放列表</span>
+                        <span>Save to Playlist</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-download"></i>
-                        <span>下载</span>
+                        <span>Download</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-share"></i>
-                        <span>分享</span>
+                        <span>Share</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-thumbs-down"></i>
-                        <span>不感兴趣</span>
+                        <span>Not Interested</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-ban"></i>
-                        <span>不推荐此频道</span>
+                        <span>Report Channel</span>
                     </div>
                     <div class="menu-item">
                         <i class="fas fa-flag"></i>
-                        <span>举报</span>
+                        <span>Report Video</span>
                     </div>
                 </div>
             </div>
@@ -207,11 +477,15 @@ function createShortsCard(video) {
 // 渲染订阅内容
 function renderSubscriptions() {
     const subscriptions = [
-        { name: '编程大师', avatar: 'https://picsum.photos/id/100/48/48' },
+        { name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
-        { name: '前端开发', avatar: 'https://picsum.photos/id/101/48/48' },
+        { name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
-        { name: '数据科学', avatar: 'https://picsum.photos/id/102/48/48' },
+        { name: 'ヰ世界情緒', avatar: 'img/avatar/isekaijoucho.jpg' },
-        { name: 'AI 研究', avatar: 'https://picsum.photos/id/103/48/48' },
+        { name: 'MyGo!!!!!', avatar: 'img/avatar/mygo.png' },
-        { name: '设计达人', avatar: 'https://picsum.photos/id/104/48/48' }
+        { name: 'ZUTOMAYO', avatar: 'img/avatar/ztmy.jpg' },
+        { name: 'Aqu3ra', avatar: 'img/avatar/aqu3ra.png' },
+        { name: '『超かぐや姫 ! 』公式', avatar: 'img/avatar/cpk.png' },
+        { name: '礼衣 / Rei', avatar: 'img/avatar/rei.jpg' },
+        { name: 'tayori', avatar: 'img/avatar/tayori.jpg' }
     ];
     
     subscriptionsList.innerHTML = '';
@@ -251,7 +525,7 @@ function renderSearchResults(results, query) {
     searchResultsContent.innerHTML = '';
     
     if (results.length === 0) {
-        searchResultsContent.innerHTML = '<p>没有找到相关视频</p>';
+        searchResultsContent.innerHTML = '<p>No videos found related to your search.</p>';
         searchResults.style.display = 'block';
         return;
     }
@@ -271,7 +545,7 @@ function renderSearchResults(results, query) {
             <div class="search-result-details">
                 <h4 class="search-result-title">${highlightedTitle}</h4>
                 <div class="search-result-channel">${highlightedChannel}</div>
-                <div class="search-result-stats">${video.views} 次观看 · ${video.uploadDate}</div>
+                <div class="search-result-stats">${video.views} views · ${video.uploadDate}</div>
             </div>
         `;