NanamiSchool/YouTube-Revived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: translate comments and improve code readability

Browse Source 
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
This commit is contained in:
NanamiAdmin
2026-02-02 01:17:55 +08:00
parent c709429cd2
commit b3a5aa3446
3 changed files with 22 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@@ -13,7 +13,7 @@ body {
color: #ffffff; color: #ffffff;
} }
/* 主容器 */ /* Main container */
.youtube-container { .youtube-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -21,7 +21,7 @@ body {
overflow: hidden; overflow: hidden;
} }
/* 顶栏样式 */ /* Header styles */
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -157,14 +157,14 @@ body {
font-size: 20px; font-size: 20px;
} }
/* 主内容区 */ /* Main content area */
.main-content { .main-content {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
/* 侧边栏样式 */ /* Sidebar styles */
.sidebar { .sidebar {
width: 240px; width: 240px;
background-color: #000000; background-color: #000000;
@@ -287,7 +287,7 @@ body {
border-top: 1px solid #303030; border-top: 1px solid #303030;
} }
/* 视频内容区 */ /* Video content area */
.video-content { .video-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@@ -295,7 +295,7 @@ body {
background-color: #121212; background-color: #121212;
} }
/* 板块按钮 */ /* Category buttons */
.category-buttons { .category-buttons {
display: flex; display: flex;
gap: 12px; gap: 12px;
@@ -325,7 +325,7 @@ body {
border-color: #ffffff; border-color: #ffffff;
} }
/* 视频网格 */ /* Video grid */
.video-grid { .video-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(550px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
@@ -333,7 +333,7 @@ body {
margin-bottom: 48px; margin-bottom: 48px;
} }
/* 视频卡片 */ /* Video card */
.video-card { .video-card {
background-color: #202020; background-color: #202020;
border-radius: 12px; border-radius: 12px;
@@ -512,7 +512,7 @@ body {
gap: 20px; gap: 20px;
} }
/* Shorts 卡片 */ /* Shorts card */
.shorts-card { .shorts-card {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -573,7 +573,7 @@ body {
margin-right: 4px; margin-right: 4px;
} }
/* 搜索结果弹窗 */ /* Search results popup */
.search-results { .search-results {
position: fixed; position: fixed;
top: 56px; top: 56px;
@@ -659,7 +659,7 @@ body {
color: #ffffff; color: #ffffff;
} }
/* 响应式设计 */ /* Responsive design */
@media (max-width: 1600px) { @media (max-width: 1600px) {
.video-grid { .video-grid {
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
@@ -727,7 +727,7 @@ body {
} }
} }
/* 滚动条样式 - Webkit浏览器 */ /* Scrollbar styles - Webkit browsers */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;

16
index.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div class="youtube-container"> <div class="youtube-container">
<!-- 顶栏 --> <!-- Top bar -->
<header class="header"> <header class="header">
<div class="header-left"> <div class="header-left">
<button class="menu-btn"> <button class="menu-btn">
@@ -46,9 +46,8 @@
</div> </div>
</header> </header>
<!-- 主内容区 -->
<main class="main-content"> <main class="main-content">
<!-- 侧边栏 --> <!-- Sidebar -->
<aside class="sidebar"> <aside class="sidebar">
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<div class="nav-section"> <div class="nav-section">
@@ -68,7 +67,7 @@
<i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i>
</div> </div>
<div class="subscriptions-list"> <div class="subscriptions-list">
<!-- 订阅内容将通过 JS 动态生成 --> <!-- Subscription items will be dynamically generated via JS -->
</div> </div>
</div> </div>
@@ -178,25 +177,24 @@
<button class="category-btn">Watched</button> <button class="category-btn">Watched</button>
</div> </div>
<!-- 横屏视频 --> <!-- Horizontal video grid -->
<div class="video-grid"> <div class="video-grid">
<!-- 视频卡片将通过 JS 动态生成 --> <!-- Video cards will be dynamically generated via JS -->
</div> </div>
<!-- Shorts --> <!-- Shorts -->
<div class="shorts-section"> <div class="shorts-section">
<h3>Shorts</h3> <h3>Shorts</h3>
<div class="shorts-grid"> <div class="shorts-grid">
<!-- Shorts 卡片将通过 JS 动态生成 --> <!-- Shorts cards will be dynamically generated via JS -->
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<!-- 搜索结果弹窗 -->
<div class="search-results" style="display: none;"> <div class="search-results" style="display: none;">
<div class="search-results-content"> <div class="search-results-content">
<!-- 搜索结果将通过 JS 动态生成 --> <!-- Search results will be dynamically generated via JS -->
</div> </div>
</div> </div>
</div> </div>

7
js/script.js
View File

@@ -1,4 +1,3 @@
// 全局变量
let videos = [ let videos = [
{ {
"id": 1, "id": 1,
@@ -476,7 +475,7 @@ let videos = [
]; ];
let currentCategory = 'All'; let currentCategory = 'All';
// DOM 元素 // DOM elements
const searchInput = document.querySelector('.search-input'); const searchInput = document.querySelector('.search-input');
const searchBtn = document.querySelector('.search-btn'); const searchBtn = document.querySelector('.search-btn');
const searchResults = document.querySelector('.search-results'); const searchResults = document.querySelector('.search-results');
@@ -505,13 +504,13 @@ function renderVideos() {
videoGrid.innerHTML = ''; videoGrid.innerHTML = '';
shortsGrid.innerHTML = ''; shortsGrid.innerHTML = '';
// 渲染长视频 // Render long videos
videosOnly.forEach(video => { videosOnly.forEach(video => {
const videoCard = createVideoCard(video); const videoCard = createVideoCard(video);
videoGrid.appendChild(videoCard); videoGrid.appendChild(videoCard);
}); });
// 渲染短视频 // Render shorts videos
shortsOnly.forEach(video => { shortsOnly.forEach(video => {
const shortsCard = createShortsCard(video); const shortsCard = createShortsCard(video);
shortsGrid.appendChild(shortsCard); shortsGrid.appendChild(shortsCard);