diff --git a/css/style.css b/css/style.css
index 74c8b9b..f1f1230 100644
--- a/css/style.css
+++ b/css/style.css
@@ -304,7 +304,7 @@ body {
/* 视频网格 */
.video-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 24px;
margin-bottom: 48px;
}
@@ -474,7 +474,7 @@ body {
.shorts-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
}
diff --git a/img/cover/art-26.jpg b/img/cover/art-26.jpg
new file mode 100644
index 0000000..d40ae96
Binary files /dev/null and b/img/cover/art-26.jpg differ
diff --git a/img/cover/art-27.jpg b/img/cover/art-27.jpg
new file mode 100644
index 0000000..48af0f5
Binary files /dev/null and b/img/cover/art-27.jpg differ
diff --git a/img/cover/art-28.jpg b/img/cover/art-28.jpg
new file mode 100644
index 0000000..3bdacaa
Binary files /dev/null and b/img/cover/art-28.jpg differ
diff --git a/img/cover/game-18.jpg b/img/cover/game-18.jpg
new file mode 100644
index 0000000..d9e58e7
Binary files /dev/null and b/img/cover/game-18.jpg differ
diff --git a/img/cover/game-19.jpg b/img/cover/game-19.jpg
new file mode 100644
index 0000000..86c0009
Binary files /dev/null and b/img/cover/game-19.jpg differ
diff --git a/img/cover/game-20.jpg b/img/cover/game-20.jpg
new file mode 100644
index 0000000..9a6511d
Binary files /dev/null and b/img/cover/game-20.jpg differ
diff --git a/img/cover/game-38.jpg b/img/cover/game-38.jpg
new file mode 100644
index 0000000..95a47bc
Binary files /dev/null and b/img/cover/game-38.jpg differ
diff --git a/img/cover/game-39.jpg b/img/cover/game-39.jpg
new file mode 100644
index 0000000..2be74f6
Binary files /dev/null and b/img/cover/game-39.jpg differ
diff --git a/img/cover/game-40.jpg b/img/cover/game-40.jpg
new file mode 100644
index 0000000..e150cde
Binary files /dev/null and b/img/cover/game-40.jpg differ
diff --git a/img/cover/maxresdefault.jpg b/img/cover/maxresdefault.jpg
deleted file mode 100644
index 980fd2f..0000000
Binary files a/img/cover/maxresdefault.jpg and /dev/null differ
diff --git a/img/cover/music-09.jpg b/img/cover/music-09.jpg
new file mode 100644
index 0000000..ed732b4
Binary files /dev/null and b/img/cover/music-09.jpg differ
diff --git a/img/cover/music-10.jpg b/img/cover/music-10.jpg
new file mode 100644
index 0000000..9cafcfb
Binary files /dev/null and b/img/cover/music-10.jpg differ
diff --git a/img/cover/music-11.jpg b/img/cover/music-11.jpg
new file mode 100644
index 0000000..2dedf5f
Binary files /dev/null and b/img/cover/music-11.jpg differ
diff --git a/img/cover/music-12.jpg b/img/cover/music-12.jpg
new file mode 100644
index 0000000..cf62f17
Binary files /dev/null and b/img/cover/music-12.jpg differ
diff --git a/img/cover/music-13.jpg b/img/cover/music-13.jpg
new file mode 100644
index 0000000..699e7b8
Binary files /dev/null and b/img/cover/music-13.jpg differ
diff --git a/img/cover/music-14.jpg b/img/cover/music-14.jpg
new file mode 100644
index 0000000..d82fbae
Binary files /dev/null and b/img/cover/music-14.jpg differ
diff --git a/img/cover/music-15.jpg b/img/cover/music-15.jpg
new file mode 100644
index 0000000..4ec9d7a
Binary files /dev/null and b/img/cover/music-15.jpg differ
diff --git a/img/cover/music-16.jpg b/img/cover/music-16.jpg
new file mode 100644
index 0000000..8d8de9b
Binary files /dev/null and b/img/cover/music-16.jpg differ
diff --git a/img/cover/music-17.jpg b/img/cover/music-17.jpg
new file mode 100644
index 0000000..b34a396
Binary files /dev/null and b/img/cover/music-17.jpg differ
diff --git a/img/cover/music-29.jpg b/img/cover/music-29.jpg
new file mode 100644
index 0000000..5813e60
Binary files /dev/null and b/img/cover/music-29.jpg differ
diff --git a/img/cover/music-30.jpg b/img/cover/music-30.jpg
new file mode 100644
index 0000000..df54b2c
Binary files /dev/null and b/img/cover/music-30.jpg differ
diff --git a/img/cover/music-31.jpg b/img/cover/music-31.jpg
new file mode 100644
index 0000000..9fb17ae
Binary files /dev/null and b/img/cover/music-31.jpg differ
diff --git a/img/cover/music-32.jpg b/img/cover/music-32.jpg
new file mode 100644
index 0000000..231c7d0
Binary files /dev/null and b/img/cover/music-32.jpg differ
diff --git a/img/cover/music-33.jpg b/img/cover/music-33.jpg
new file mode 100644
index 0000000..9831288
Binary files /dev/null and b/img/cover/music-33.jpg differ
diff --git a/img/cover/music-34.jpg b/img/cover/music-34.jpg
new file mode 100644
index 0000000..024c0d8
Binary files /dev/null and b/img/cover/music-34.jpg differ
diff --git a/img/cover/music-35.jpg b/img/cover/music-35.jpg
new file mode 100644
index 0000000..5ad75a9
Binary files /dev/null and b/img/cover/music-35.jpg differ
diff --git a/img/cover/music-36.jpg b/img/cover/music-36.jpg
new file mode 100644
index 0000000..53660c4
Binary files /dev/null and b/img/cover/music-36.jpg differ
diff --git a/img/cover/music-37.jpg b/img/cover/music-37.jpg
new file mode 100644
index 0000000..a9366a0
Binary files /dev/null and b/img/cover/music-37.jpg differ
diff --git a/img/cover/tech-21.jpg b/img/cover/tech-21.jpg
new file mode 100644
index 0000000..ac8b2b9
Binary files /dev/null and b/img/cover/tech-21.jpg differ
diff --git a/img/cover/tech-22.jpg b/img/cover/tech-22.jpg
new file mode 100644
index 0000000..dea7599
Binary files /dev/null and b/img/cover/tech-22.jpg differ
diff --git a/img/cover/tech-23.jpg b/img/cover/tech-23.jpg
new file mode 100644
index 0000000..a5a40de
Binary files /dev/null and b/img/cover/tech-23.jpg differ
diff --git a/img/cover/tech-24.jpg b/img/cover/tech-24.jpg
new file mode 100644
index 0000000..308de63
Binary files /dev/null and b/img/cover/tech-24.jpg differ
diff --git a/img/cover/tech-25.jpg b/img/cover/tech-25.jpg
new file mode 100644
index 0000000..a4cf786
Binary files /dev/null and b/img/cover/tech-25.jpg differ
diff --git a/img/cover/tech-41.jpg b/img/cover/tech-41.jpg
new file mode 100644
index 0000000..0f95e64
Binary files /dev/null and b/img/cover/tech-41.jpg differ
diff --git a/img/cover/tech-42.jpg b/img/cover/tech-42.jpg
new file mode 100644
index 0000000..0497eea
Binary files /dev/null and b/img/cover/tech-42.jpg differ
diff --git a/img/cover/tech-43.jpg b/img/cover/tech-43.jpg
new file mode 100644
index 0000000..57df9cd
Binary files /dev/null and b/img/cover/tech-43.jpg differ
diff --git a/img/short/short-46.jpg b/img/short/short-46.jpg
new file mode 100644
index 0000000..4cca2d8
Binary files /dev/null and b/img/short/short-46.jpg differ
diff --git a/img/short/short-47.jpg b/img/short/short-47.jpg
new file mode 100644
index 0000000..abac352
Binary files /dev/null and b/img/short/short-47.jpg differ
diff --git a/img/short/short-48.jpg b/img/short/short-48.jpg
new file mode 100644
index 0000000..497d36e
Binary files /dev/null and b/img/short/short-48.jpg differ
diff --git a/img/short/short-49.jpg b/img/short/short-49.jpg
new file mode 100644
index 0000000..2a22221
Binary files /dev/null and b/img/short/short-49.jpg differ
diff --git a/img/short/short-50.jpg b/img/short/short-50.jpg
new file mode 100644
index 0000000..5c099dc
Binary files /dev/null and b/img/short/short-50.jpg differ
diff --git a/img/short/short-51.jpg b/img/short/short-51.jpg
new file mode 100644
index 0000000..8c1e0ec
Binary files /dev/null and b/img/short/short-51.jpg differ
diff --git a/index.html b/index.html
index e1c65c9..0aabcce 100644
--- a/index.html
+++ b/index.html
@@ -172,13 +172,10 @@
-
-
-
+
-
diff --git a/js/script.js b/js/script.js
index 3c25cc2..0c40c99 100644
--- a/js/script.js
+++ b/js/script.js
@@ -37,7 +37,7 @@ let videos = [
"id": 4,
"title": "【Silent Witch沈默魔女的秘密】OST 主題曲「沈黙の魔女」bgm｜Kitkit Lu COVER",
"channel": "KitKit Lu",
- "views": "1,856,164",
+ "views": "1,856,264",
"uploadDate": "5 months ago",
"duration": "2:39",
"thumbnail": "img/cover/music-04.jpg",
@@ -90,191 +90,411 @@ let videos = [
},
{
"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"
+ "title": "ヨルシカ - 春泥棒（OFFICIAL VIDEO）",
+ "channel": "ヨルシカ / n-buna Official",
+ "views": "123,456,789",
+ "uploadDate": "5 years ago",
+ "duration": "4:17",
+ "thumbnail": "img/cover/music-09.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 10,
- "title": "机器学习入门到精通",
- "channel": "AI 研究",
- "views": "2,345,678",
- "uploadDate": "5天前",
- "duration": "35:22",
- "thumbnail": "https://picsum.photos/id/10/640/360",
- "category": "AI",
+ "title": "YOASOBI「アイドル」Official Music Video",
+ "channel": "YOASOBI Official",
+ "views": "456,789,123",
+ "uploadDate": "2 years ago",
+ "duration": "3:33",
+ "thumbnail": "img/cover/music-10.jpg",
+ "category": "music",
"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"
+ "title": "花譜 - 不可解",
+ "channel": "花譜 -KAF-",
+ "views": "12,345,678",
+ "uploadDate": "3 years ago",
+ "duration": "4:05",
+ "thumbnail": "img/cover/music-11.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 12,
- "title": "JavaScript 小技巧",
- "channel": "前端开发",
- "views": "789,012",
- "uploadDate": "2天前",
- "duration": "00:58",
- "thumbnail": "https://picsum.photos/id/12/360/640",
- "category": "编程",
- "type": "short"
+ "title": "ZUTOMAYO - STUDY ME",
+ "channel": "ZUTOMAYO",
+ "views": "23,456,789",
+ "uploadDate": "1 year ago",
+ "duration": "3:45",
+ "thumbnail": "img/cover/music-12.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 13,
- "title": "Python 一行代码",
- "channel": "数据科学",
- "views": "567,890",
- "uploadDate": "3天前",
- "duration": "01:15",
- "thumbnail": "https://picsum.photos/id/13/360/640",
- "category": "编程",
- "type": "short"
+ "title": "Eve - 廻廻奇譚",
+ "channel": "Eve",
+ "views": "89,123,456",
+ "uploadDate": "4 years ago",
+ "duration": "3:55",
+ "thumbnail": "img/cover/music-13.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 14,
- "title": "前端开发日常",
- "channel": "前端开发",
- "views": "987,654",
- "uploadDate": "1天前",
- "duration": "01:32",
- "thumbnail": "https://picsum.photos/id/14/360/640",
- "category": "编程",
- "type": "short"
+ "title": "ClariS - コネクト",
+ "channel": "ClariS Official",
+ "views": "45,678,901",
+ "uploadDate": "10 years ago",
+ "duration": "4:30",
+ "thumbnail": "img/cover/music-14.jpg",
+ "category": "music",
+ "type": "video"
},
{
"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"
+ "title": "米津玄師 Kenshi Yonezu - Lemon",
+ "channel": "Kenshi Yonezu 米津玄師",
+ "views": "96,539,145",
+ "uploadDate": "7 years ago",
+ "duration": "4:35",
+ "thumbnail": "img/cover/music-15.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 16,
- "title": "数据可视化技巧",
- "channel": "数据科学",
- "views": "654,321",
- "uploadDate": "4天前",
- "duration": "01:05",
- "thumbnail": "https://picsum.photos/id/16/360/640",
- "category": "编程",
- "type": "short"
+ "title": "【初音ミク】 夜明けと蛍 【オリジナル】",
+ "channel": "ヨルシカ / n-buna Official",
+ "views": "27,749,534",
+ "uploadDate": "8 years ago",
+ "duration": "5:10",
+ "thumbnail": "img/cover/music-16.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 17,
- "title": "编程面试题",
- "channel": "编程大师",
- "views": "876,543",
- "uploadDate": "3天前",
- "duration": "01:20",
- "thumbnail": "https://picsum.photos/id/17/360/640",
- "category": "编程",
- "type": "short"
+ "title": "Empty old City - Buffer",
+ "channel": "Empty old city",
+ "views": "838,946",
+ "uploadDate": "1 year ago",
+ "duration": "3:18",
+ "thumbnail": "img/cover/music-17.jpg",
+ "category": "music",
+ "type": "video"
},
{
"id": 18,
- "title": "Web 设计趋势",
- "channel": "前端开发",
- "views": "765,432",
- "uploadDate": "5天前",
- "duration": "01:10",
- "thumbnail": "https://picsum.photos/id/18/360/640",
- "category": "设计",
- "type": "short"
+ "title": "I built Git for Minecraft for a hackathon and won",
+ "channel": "MathRayyan",
+ "views": "288,346",
+ "uploadDate": "12 days ago",
+ "duration": "5:13",
+ "thumbnail": "img/cover/game-18.jpg",
+ "category": "game",
+ "type": "video"
},
{
"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"
+ "title": "怎麼讓遊戲越來越真？PBR貼圖是怎麼做到的？",
+ "channel": "孫拓海Taku",
+ "views": "25,364",
+ "uploadDate": "3 weeks ago",
+ "duration": "13:14",
+ "thumbnail": "img/cover/game-19.jpg",
+ "category": "game",
+ "type": "video"
},
{
"id": 20,
- "title": "Python 库推荐",
- "channel": "数据科学",
- "views": "543,210",
- "uploadDate": "1天前",
- "duration": "01:08",
- "thumbnail": "https://picsum.photos/id/20/360/640",
- "category": "编程",
- "type": "short"
+ "title": "「空あくあ!」當さくな說出這句台詞時 全場都淚崩了....【結城さくな】【Vtuber中文/翻譯/精華】",
+ "channel": "Dar烤肉!",
+ "views": "116,498",
+ "uploadDate": "7 days ago",
+ "duration": "8:35",
+ "thumbnail": "img/cover/game-20.jpg",
+ "category": "game",
+ "type": "video"
},
{
"id": 21,
- "title": "2024年前端开发趋势",
- "channel": "前端开发",
- "views": "1,345,678",
- "uploadDate": "1周前",
- "duration": "18:32",
- "thumbnail": "https://picsum.photos/id/21/640/360",
- "category": "编程",
+ "title": "「明日方舟：终末地性能分析：二游画质巅峰？榨干手机！",
+ "channel": "极客湾Geekerwan",
+ "views": "51,649",
+ "uploadDate": "10 days ago",
+ "duration": "22:13",
+ "thumbnail": "img/cover/tech-21.jpg",
+ "category": "tech",
"type": "video"
},
{
"id": 22,
- "title": "数据结构与算法基础",
- "channel": "编程大师",
- "views": "987,654",
- "uploadDate": "3天前",
- "duration": "25:45",
- "thumbnail": "https://picsum.photos/id/22/640/360",
- "category": "编程",
+ "title": "What GPU is the BEST for Linux Gaming?",
+ "channel": "Linus Tech Tips",
+ "views": "96,751",
+ "uploadDate": "7 days ago",
+ "duration": "10:55",
+ "thumbnail": "img/cover/tech-22.jpg",
+ "category": "tech",
"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",
+ "title": "How Hard Is It to Build Your First PC?",
+ "channel": "PLACITECH",
+ "views": "4,351",
+ "uploadDate": "2 months ago",
+ "duration": "12:47",
+ "thumbnail": "img/cover/tech-23.jpg",
+ "category": "tech",
"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": "编程",
+ "title": "回顾我们最中意的 2025 年产品发布 - 谷歌开发者新闻（年终特辑）",
+ "channel": "Google for Developers",
+ "views": "3,475",
+ "uploadDate": "1 month ago",
+ "duration": "6:39",
+ "thumbnail": "img/cover/tech-24.jpg",
+ "category": "tech",
"type": "video"
},
{
"id": 25,
- "title": "CSS 高级技巧",
- "channel": "前端开发",
- "views": "876,543",
- "uploadDate": "1天前",
- "duration": "15:22",
- "thumbnail": "https://picsum.photos/id/25/640/360",
- "category": "编程",
+ "title": "Commodore 128 Alternate Universe",
+ "channel": "The 8-Bit Guy",
+ "views": "17,498",
+ "uploadDate": "4 months ago",
+ "duration": "8:35",
+ "thumbnail": "img/cover/tech-25.jpg",
+ "category": "tech",
"type": "video"
- }
+ },
+ {
+ "id": 25,
+ "title": "Commodore 128 Alternate Universe",
+ "channel": "The 8-Bit Guy",
+ "views": "17,498",
+ "uploadDate": "4 months ago",
+ "duration": "8:35",
+ "thumbnail": "img/cover/tech-25.jpg",
+ "category": "tech",
+ "type": "video"
+ },
+ {
+ "id": 25,
+ "title": "Commodore 128 Alternate Universe",
+ "channel": "The 8-Bit Guy",
+ "views": "17,498",
+ "uploadDate": "4 months ago",
+ "duration": "8:35",
+ "thumbnail": "img/cover/tech-25.jpg",
+ "category": "tech",
+ "type": "video"
+ },
+ {
+ "id": 26,
+ "title": "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
+ "channel": "AlanBeckerTutorials",
+ "views": "193,762",
+ "uploadDate": "7 years ago",
+ "duration": "14:52",
+ "thumbnail": "img/cover/art-26.jpg",
+ "category": "art",
+ "type": "video"
+ },
+ {
+ "id": 27,
+ "title": "Animation vs. Game Design",
+ "channel": "Alan Backer",
+ "views": "694,264",
+ "uploadDate": "2 months ago",
+ "duration": "3:12",
+ "thumbnail": "img/cover/art-27.jpg",
+ "category": "art",
+ "type": "video"
+ },
+ {
+ "id": 28,
+ "title": "The Far Lands - Animation vs. Minecraft Shorts Ep 38",
+ "channel": "Alan Backer",
+ "views": "975,192",
+ "uploadDate": "1 month ago",
+ "duration": "9:10",
+ "thumbnail": "img/cover/art-28.jpg",
+ "category": "art",
+ "type": "video"
+ },
+ {
+ "id": 29,
+ "title": "【Official MV】ray 超かぐや姫！Version／かぐや (cv.夏吉ゆうこ) ＆ 月見ヤチヨ (cv.早見沙織) from #超かぐや姫 ！【新作アニメーション】",
+ "channel": "",
+ "views": "78,192",
+ "uploadDate": "5 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-29.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 30,
+ "title": "ドッペルゲンガー feat.初音ミク#vocaloid #初音ミク",
+ "channel": "",
+ "views": "2,359",
+ "uploadDate": "3 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-30.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 31,
+ "title": "Melt CPK! Remix — English Subtitled Version",
+ "channel": "",
+ "views": "2,264",
+ "uploadDate": "3 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-31.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 32,
+ "title": "【Suite History】花譜×#KTちゃん「ギミギミ逃避行feat. #KTちゃん(Prod. peko)」 #花譜 #KTちゃん #組曲 #shorts",
+ "channel": "",
+ "views": "5,430",
+ "uploadDate": "2 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-32.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 33,
+ "title": "ヨルシカ - プレイシック #ヨルシカ #プレイシック #二人称 #yorushika #playsick #secondperson",
+ "channel": "",
+ "views": "39,254",
+ "uploadDate": "10 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-33.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 34,
+ "title": "#ヨルシカ #live #前世 #yorushika",
+ "channel": "",
+ "views": "36,181",
+ "uploadDate": "1 month ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-34.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 35,
+ "title": "【歌ってみた】蜜月アン・ドゥ・トロワ covered by ヰ世界情緒 #shorts",
+ "channel": "",
+ "views": "2,163",
+ "uploadDate": "6 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-35.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 36,
+ "title": "Thank you 2025🩵Have a wonderful new year! #YOASOBI_2025",
+ "channel": "",
+ "views": "36,165",
+ "uploadDate": "20 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-36.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 37,
+ "title": "初めてラブソングを書きました。新曲「ハートマーク feat.川谷絵音」#礼衣 #ハートマーク",
+ "channel": "",
+ "views": "2,609",
+ "uploadDate": "3 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/music-37.jpg",
+ "category": "music",
+ "type": "short"
+ },
+ {
+ "id": 38,
+ "title": "Would you play this at the school talent show for $500? #osu #osugame",
+ "channel": "",
+ "views": "133,658",
+ "uploadDate": "2 months ago",
+ "duration": "",
+ "thumbnail": "img/cover/game-38.jpg",
+ "category": "game",
+ "type": "short"
+ },
+ {
+ "id": 39,
+ "title": "May your holidays be filled with great vibes, full combos, and lots of epic tracks! 🎵",
+ "channel": "",
+ "views": "1,658",
+ "uploadDate": "1 months ago",
+ "duration": "",
+ "thumbnail": "img/cover/game-39.jpg",
+ "category": "game",
+ "type": "short"
+ },
+ {
+ "id": 40,
+ "title": "PANDORA PARADOXXX RE:MASTER alternative spin method #maimai #maimaiでらっくす #maimai_dx",
+ "channel": "",
+ "views": "25,365",
+ "uploadDate": "12 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/game-40.jpg",
+ "category": "game",
+ "type": "short"
+ },
+ {
+ "id": 41,
+ "title": "Arch Linux VS Debian in 1 Min #linux #arch #debian",
+ "channel": "",
+ "views": "3,565",
+ "uploadDate": "11 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/tech-41.jpg",
+ "category": "tech",
+ "type": "short"
+ },
+ {
+ "id": 42,
+ "title": "#linux #homelab #opensource #tech #debian",
+ "channel": "",
+ "views": "7,925",
+ "uploadDate": "10 days ago",
+ "duration": "",
+ "thumbnail": "img/cover/tech-42.jpg",
+ "category": "tech",
+ "type": "short"
+ },
+ {
+ "id": 43,
+ "title": "The one key keyboard #tech",
+ "channel": "",
+ "views": "4,571",
+ "uploadDate": "1 month ago",
+ "duration": "",
+ "thumbnail": "img/cover/tech-43.jpg",
+ "category": "tech",
+ "type": "short"
+ },
];
let currentCategory = 'All';
@@ -288,31 +508,18 @@ const shortsGrid = document.querySelector('.shorts-grid');
const categoryBtns = document.querySelectorAll('.category-btn');
const subscriptionsList = document.querySelector('.subscriptions-list');
-// 初始化
async function init() {
- // 加载视频数据
await loadVideos();
-
- // 渲染视频
renderVideos();
-
- // 渲染 Shorts
renderShorts();
-
- // 渲染订阅内容
renderSubscriptions();
-
- // 绑定事件
bindEvents();
}
-// 加载视频数据
async function loadVideos() {
- // 数据已在全局变量中定义，直接返回
- return Promise.resolve();
+ return Promise.resolve(); // Already defined in global scope
}
-// 渲染视频
function renderVideos() {
const filteredVideos = filterVideosByCategory(currentCategory);
@@ -326,7 +533,6 @@ function renderVideos() {
});
}
-// 渲染 Shorts
function renderShorts() {
const filteredVideos = filterVideosByCategory(currentCategory);
@@ -340,23 +546,18 @@ function renderShorts() {
});
}
-// 根据分类过滤视频
function filterVideosByCategory(category) {
- if (category === '全部') {
+ if (category === 'All') {
return videos;
}
- // 简单的分类映射
const categoryMap = {
'Music': ['music'],
'Game': ['game'],
- 'Live': ['live'],
- 'Album': ['album'],
- 'Animation': ['animation'],
+ 'Technology': ['tech'],
'Art': ['art'],
'Recently': videos.filter(v => v.uploadDate.includes('days ago')),
- 'Watched': [],
- 'New': videos
+ 'Watched': []
};
if (categoryMap[category]) {
@@ -370,7 +571,6 @@ function filterVideosByCategory(category) {
return videos;
}
-// 创建视频卡片
function createVideoCard(video) {
const card = document.createElement('div');
card.className = 'video-card';
@@ -436,7 +636,6 @@ function createVideoCard(video) {
`;
- // 绑定菜单事件
const menuToggle = card.querySelector('.menu-toggle');
const menuDropdown = card.querySelector('.menu-dropdown');
@@ -445,15 +644,13 @@ function createVideoCard(video) {
menuDropdown.classList.toggle('show');
});
- // 点击其他地方关闭菜单
- document.addEventListener('click', () => {
+ document.addEventListener('click', () => { // Close the menu when clicking outside
menuDropdown.classList.remove('show');
});
return card;
}
-// 创建 Shorts 卡片
function createShortsCard(video) {
const card = document.createElement('div');
card.className = 'shorts-card';
@@ -474,8 +671,7 @@ function createShortsCard(video) {
return card;
}
-// 渲染订阅内容
-function renderSubscriptions() {
+function renderSubscriptions() { // Render the subscriptions list
const subscriptions = [
{ name: '花譜 -KAF-', avatar: 'img/avatar/kaf.png' },
{ name: 'ryo (supercell)', avatar: 'img/avatar/ryo.jpg' },
@@ -504,9 +700,7 @@ function renderSubscriptions() {
subscriptionsList.appendChild(item);
});
}
-
-// 执行搜索
-function performSearch(query) {
+function performSearch(query) { // Perform the search and render the results
if (!query.trim()) {
searchResults.style.display = 'none';
return;
@@ -520,7 +714,7 @@ function performSearch(query) {
renderSearchResults(results, query);
}
-// 渲染搜索结果
+// Render the search results
function renderSearchResults(results, query) {
searchResultsContent.innerHTML = '';
@@ -534,7 +728,7 @@ function renderSearchResults(results, query) {
const item = document.createElement('div');
item.className = 'search-result-item';
- // 高亮关键词
+ // Highlight the search keywords in the title and channel name
const highlightedTitle = video.title.replace(new RegExp(`(${query})`, 'gi'), '$1');
const highlightedChannel = video.channel.replace(new RegExp(`(${query})`, 'gi'), '$1');
@@ -555,9 +749,9 @@ function renderSearchResults(results, query) {
searchResults.style.display = 'block';
}
-// 绑定事件
-function bindEvents() {
- // 搜索事件
+// Bind events to the DOM elements
+function bindEvents() { // Bind events to the DOM elements
+ // Search event
searchInput.addEventListener('input', (e) => {
performSearch(e.target.value);
});
@@ -566,38 +760,40 @@ function bindEvents() {
performSearch(searchInput.value);
});
- // 点击其他地方关闭搜索结果
+ // Close the search results when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('.search-container') && !e.target.closest('.search-results')) {
searchResults.style.display = 'none';
}
});
- // 分类按钮事件
+ // Category buttons event
categoryBtns.forEach(btn => {
btn.addEventListener('click', () => {
- // 移除所有活动状态
+ // Remove all active states
categoryBtns.forEach(b => b.classList.remove('active'));
- // 添加当前活动状态
+ // Add current active state
btn.classList.add('active');
- // 更新当前分类
+ // Update current category
currentCategory = btn.textContent;
- // 重新渲染视频
+ // Re-render videos and shorts
renderVideos();
renderShorts();
});
});
- // 侧边栏导航按钮事件
+ // Sidebar navigation buttons event
const navBtns = document.querySelectorAll('.nav-btn');
navBtns.forEach(btn => {
btn.addEventListener('click', () => {
+ // Remove all active states
navBtns.forEach(b => b.classList.remove('active'));
+ // Add current active state
btn.classList.add('active');
});
});
- // 订阅板块展开/收起
+ // Subscription section expand/collapse event
const subscriptionTitle = document.querySelector('.nav-section-title');
subscriptionTitle.addEventListener('click', () => {
const subscriptionsList = document.querySelector('.subscriptions-list');
@@ -613,5 +809,5 @@ function bindEvents() {
});
}
-// 页面加载完成后初始化
+// Page load event: initialize the application
window.addEventListener('DOMContentLoaded', init);
\ No newline at end of file