refactor: translate comments and improve code readability

Update comments from Chinese to English for better international collaboration Standardize comment style across HTML, CSS and JavaScript files Remove unnecessary comments about global variables
feat(ui): add smooth collapse animation for subscriptions list
2026-02-02 01:17:55 +08:00 · 2026-02-02 01:13:06 +08:00
3 changed files with 41 additions and 30 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -13,7 +13,7 @@ body {
    color: #ffffff;
 }

-/* 主容器 */
+/* Main container */
 .youtube-container {
    display: flex;
    flex-direction: column;
@@ -21,7 +21,7 @@ body {
    overflow: hidden;
 }

-/* 顶栏样式 */
+/* Header styles */
 .header {
    display: flex;
    align-items: center;
@@ -157,14 +157,14 @@ body {
    font-size: 20px;
 }

-/* 主内容区 */
+/* Main content area */
 .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
 }

-/* 侧边栏样式 */
+/* Sidebar styles */
 .sidebar {
    width: 240px;
    background-color: #000000;
@@ -200,6 +200,10 @@ body {
    text-transform: uppercase;
 }

+.nav-section-title i {
+    transition: transform 0.3s ease;
+}
+
 .nav-btn {
    display: flex;
    align-items: center;
@@ -231,6 +235,16 @@ body {

 .subscriptions-list {
    padding: 0 12px;
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+}
+
+.subscriptions-list.collapsed {
+    max-height: 0;
+    opacity: 0;
+    padding: 0 12px;
 }

 .subscription-item {
@@ -273,7 +287,7 @@ body {
    border-top: 1px solid #303030;
 }

-/* 视频内容区 */
+/* Video content area */
 .video-content {
    flex: 1;
    overflow-y: auto;
@@ -281,7 +295,7 @@ body {
    background-color: #121212;
 }

-/* 板块按钮 */
+/* Category buttons */
 .category-buttons {
    display: flex;
    gap: 12px;
@@ -311,7 +325,7 @@ body {
    border-color: #ffffff;
 }

-/* 视频网格 */
+/* Video grid */
 .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
@@ -319,7 +333,7 @@ body {
    margin-bottom: 48px;
 }

-/* 视频卡片 */
+/* Video card */
 .video-card {
    background-color: #202020;
    border-radius: 12px;
@@ -498,7 +512,7 @@ body {
    gap: 20px;
 }

-/* Shorts 卡片 */
+/* Shorts card */
 .shorts-card {
    position: relative;
    width: 100%;
@@ -559,7 +573,7 @@ body {
    margin-right: 4px;
 }

-/* 搜索结果弹窗 */
+/* Search results popup */
 .search-results {
    position: fixed;
    top: 56px;
@@ -645,7 +659,7 @@ body {
    color: #ffffff;
 }

-/* 响应式设计 */
+/* Responsive design */
@media (max-width: 1600px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
@@ -713,7 +727,7 @@ body {
    }
 }

-/* 滚动条样式 - Webkit浏览器 */
+/* Scrollbar styles - Webkit browsers */
 ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
    <div class="youtube-container">
-        <!-- 顶栏 -->
+        <!-- Top bar -->
        <header class="header">
            <div class="header-left">
                <button class="menu-btn">
@@ -46,9 +46,8 @@
            </div>
        </header>
        
-        <!-- 主内容区 -->
        <main class="main-content">
-            <!-- 侧边栏 -->
+            <!-- Sidebar -->
            <aside class="sidebar">
                <nav class="sidebar-nav">
                    <div class="nav-section">
@@ -68,7 +67,7 @@
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <div class="subscriptions-list">
-                            <!-- 订阅内容将通过 JS 动态生成 -->
+                            <!-- Subscription items will be dynamically generated via JS -->
                        </div>
                    </div>
                    
@@ -178,25 +177,24 @@
                    <button class="category-btn">Watched</button>
                </div>
                
-                <!-- 横屏视频 -->
+                <!-- Horizontal video grid -->
                <div class="video-grid">
-                    <!-- 视频卡片将通过 JS 动态生成 -->
+                    <!-- Video cards will be dynamically generated via JS -->
                </div>
                
                <!-- Shorts -->
                <div class="shorts-section">
                    <h3>Shorts</h3>
                    <div class="shorts-grid">
-                        <!-- Shorts 卡片将通过 JS 动态生成 -->
+                        <!-- Shorts cards will be dynamically generated via JS -->
                    </div>
                </div>
            </div>
        </main>
        
-        <!-- 搜索结果弹窗 -->
        <div class="search-results" style="display: none;">
            <div class="search-results-content">
-                <!-- 搜索结果将通过 JS 动态生成 -->
+                <!-- Search results will be dynamically generated via JS -->
            </div>
        </div>
    </div>
--- a/js/script.js
+++ b/js/script.js
@@ -1,4 +1,3 @@
-// 全局变量
 let videos = [
  {
    "id": 1,
@@ -476,7 +475,7 @@ let videos = [
 ];
 let currentCategory = 'All';

-// DOM 元素
+// DOM elements
 const searchInput = document.querySelector('.search-input');
 const searchBtn = document.querySelector('.search-btn');
 const searchResults = document.querySelector('.search-results');
@@ -505,13 +504,13 @@ function renderVideos() {
    videoGrid.innerHTML = '';
    shortsGrid.innerHTML = '';
    
-    // 渲染长视频
+    // Render long videos
    videosOnly.forEach(video => {
        const videoCard = createVideoCard(video);
        videoGrid.appendChild(videoCard);
    });
    
-    // 渲染短视频
+    // Render shorts videos
    shortsOnly.forEach(video => {
        const shortsCard = createShortsCard(video);
        shortsGrid.appendChild(shortsCard);
@@ -778,12 +777,12 @@ function bindEvents() { // Bind events to the DOM elements
        const subscriptionsList = document.querySelector('.subscriptions-list');
        const chevron = subscriptionTitle.querySelector('i');
        
-        if (subscriptionsList.style.display === 'none') {
-            subscriptionsList.style.display = 'block';
-            chevron.style.transform = 'rotate(0deg)';
-        } else {
-            subscriptionsList.style.display = 'none';
+        subscriptionsList.classList.toggle('collapsed');
+        
+        if (subscriptionsList.classList.contains('collapsed')) {
            chevron.style.transform = 'rotate(-90deg)';
+        } else {
+            chevron.style.transform = 'rotate(0deg)';
        }
    });
 }