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

Compare commits

base: NanamiSchool:62d3b28f2d7dbc14c5d41f524ebc2abad05a43b2
Branches Tags
NanamiSchool:main
..
compare: NanamiSchool:b3a5aa3446d063ff97d329b668a295d5c60ec0f2
Branches Tags
NanamiSchool:main

2 Commits
62d3b28f2d ... b3a5aa3446

Author SHA1 Message Date
NanamiAdmin
b3a5aa3446 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
 2026-02-02 01:17:55 +08:00
NanamiAdmin
c709429cd2 feat(ui): add smooth collapse animation for subscriptions list 
Replace display toggle with CSS transitions for subscriptions list collapse
 2026-02-02 01:13:06 +08:00
3 changed files with 41 additions and 30 deletions
Expand all files Collapse all files

38
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;
@@ -200,6 +200,10 @@ body {
text-transform: uppercase; text-transform: uppercase;
} }
.nav-section-title i {
transition: transform 0.3s ease;
}
.nav-btn { .nav-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -231,6 +235,16 @@ body {
.subscriptions-list { .subscriptions-list {
padding: 0 12px; 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 { .subscription-item {
@@ -273,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;
@@ -281,7 +295,7 @@ body {
background-color: #121212; background-color: #121212;
} }
/* 板块按钮 */ /* Category buttons */
.category-buttons { .category-buttons {
display: flex; display: flex;
gap: 12px; gap: 12px;
@@ -311,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));
@@ -319,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;
@@ -498,7 +512,7 @@ body {
gap: 20px; gap: 20px;
} }
/* Shorts 卡片 */ /* Shorts card */
.shorts-card { .shorts-card {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -559,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;
@@ -645,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));
@@ -713,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>

17
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);
@@ -778,12 +777,12 @@ function bindEvents() { // Bind events to the DOM elements
const subscriptionsList = document.querySelector('.subscriptions-list'); const subscriptionsList = document.querySelector('.subscriptions-list');
const chevron = subscriptionTitle.querySelector('i'); const chevron = subscriptionTitle.querySelector('i');
if (subscriptionsList.style.display === 'none') { subscriptionsList.classList.toggle('collapsed');
subscriptionsList.style.display = 'block';
chevron.style.transform = 'rotate(0deg)'; if (subscriptionsList.classList.contains('collapsed')) {
} else {
subscriptionsList.style.display = 'none';
chevron.style.transform = 'rotate(-90deg)'; chevron.style.transform = 'rotate(-90deg)';
} else {
chevron.style.transform = 'rotate(0deg)';
} }
}); });
} }