refactor: replace followed youtubers
feat: switch site style to dark mode
This commit is contained in:
121
css/style.css
121
css/style.css
@@ -7,8 +7,8 @@
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', Arial, sans-serif;
|
||||
background-color: #f1f1f1;
|
||||
color: #333;
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
@@ -26,8 +26,8 @@ body {
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background-color: #202020;
|
||||
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;
|
||||
border: 1px solid #d3d3d3;
|
||||
background-color: #303030;
|
||||
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;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
background-color: #202020;
|
||||
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;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: #303030;
|
||||
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;
|
||||
color: white;
|
||||
border-color: #333;
|
||||
background-color: #ffffff;
|
||||
color: #121212;
|
||||
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;
|
||||
}
|
||||
|
||||
.video-stats {
|
||||
display: flex;
|
||||
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;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: #202020;
|
||||
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;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
background-color: #202020;
|
||||
border-bottom: 1px solid #303030;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
|
||||
BIN
img/avatar/aqu3ra.png
Normal file
BIN
img/avatar/aqu3ra.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/avatar/cpk.png
Normal file
BIN
img/avatar/cpk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
img/avatar/isekaijoucho.jpg
Normal file
BIN
img/avatar/isekaijoucho.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
img/avatar/kaf.png
Normal file
BIN
img/avatar/kaf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
img/avatar/mygo.png
Normal file
BIN
img/avatar/mygo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
img/avatar/rei.jpg
Normal file
BIN
img/avatar/rei.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
BIN
img/avatar/ryo.jpg
Normal file
BIN
img/avatar/ryo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
img/avatar/tayori.jpg
Normal file
BIN
img/avatar/tayori.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
img/avatar/ztmy.jpg
Normal file
BIN
img/avatar/ztmy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB |
BIN
img/cover/maxresdefault.jpg
Normal file
BIN
img/cover/maxresdefault.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
62
index.html
62
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">音乐</button>
|
||||
<button class="category-btn">游戏</button>
|
||||
<button class="category-btn">直播</button>
|
||||
<button class="category-btn">合辑</button>
|
||||
<button class="category-btn">动画</button>
|
||||
<button class="category-btn">手工艺品</button>
|
||||
<button class="category-btn">最近上传</button>
|
||||
<button class="category-btn">已观看</button>
|
||||
<button class="category-btn">发现新视频</button>
|
||||
<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">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>
|
||||
|
||||
<!-- 横屏视频 -->
|
||||
|
||||
344
js/script.js
344
js/script.js
@@ -1,6 +1,282 @@
|
||||
// 全局变量
|
||||
let videos = [];
|
||||
let currentCategory = '全部';
|
||||
let videos = [
|
||||
{
|
||||
"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');
|
||||
videos = await response.json();
|
||||
} catch (error) {
|
||||
console.error('加载视频数据失败:', error);
|
||||
// 使用默认数据
|
||||
videos = [];
|
||||
}
|
||||
// 数据已在全局变量中定义，直接返回
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
// 渲染视频
|
||||
@@ -78,15 +348,15 @@ function filterVideosByCategory(category) {
|
||||
|
||||
// 简单的分类映射
|
||||
const categoryMap = {
|
||||
'音乐': ['音乐'],
|
||||
'游戏': ['游戏'],
|
||||
'直播': ['直播'],
|
||||
'合辑': ['合辑'],
|
||||
'动画': ['动画'],
|
||||
'手工艺品': ['手工艺品'],
|
||||
'最近上传': videos.filter(v => v.uploadDate.includes('天前')),
|
||||
'已观看': [],
|
||||
'发现新视频': videos
|
||||
'Music': ['music'],
|
||||
'Game': ['game'],
|
||||
'Live': ['live'],
|
||||
'Album': ['album'],
|
||||
'Animation': ['animation'],
|
||||
'Art': ['art'],
|
||||
'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
|
||||
'Watched': [],
|
||||
'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: '前端开发', avatar: 'https://picsum.photos/id/101/48/48' },
|
||||
{ name: '数据科学', avatar: 'https://picsum.photos/id/102/48/48' },
|
||||
{ name: 'AI 研究', avatar: 'https://picsum.photos/id/103/48/48' },
|
||||
{ name: '设计达人', avatar: 'https://picsum.photos/id/104/48/48' }
|
||||
{ name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
|
||||
{ name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
|
||||
{ name: 'ヰ世界情緒', avatar: 'img/avatar/isekaijoucho.jpg' },
|
||||
{ name: 'MyGo!!!!!', avatar: 'img/avatar/mygo.png' },
|
||||
{ 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>
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user