feat: add video page and update language settings
- Add new video.html page with YouTube-like interface - Change default language from zh-CN to en-US in index.html - Remove deprecated media.json file - Update Chinese comments to English in index.html
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@@ -164,9 +164,9 @@
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 视频内容区 -->
|
||||
<!-- Video content area -->
|
||||
<div class="video-content">
|
||||
<!-- 板块按钮 -->
|
||||
<!-- Category buttons -->
|
||||
<div class="category-buttons">
|
||||
<button class="category-btn active">All</button>
|
||||
<button class="category-btn">Music</button>
|
||||
|
||||
277
src/media.json
277
src/media.json
@@ -1,277 +0,0 @@
|
||||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
172
video.html
Normal file
172
video.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YouTube Revived</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Top bar -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<button class="menu-btn">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="youtube-logo">
|
||||
<img src="https://www.gstatic.com/youtube/img/branding/youtubelogo/svg/youtubelogo.svg" alt="YouTube">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<div class="search-container">
|
||||
<input type="text" class="search-input" placeholder="Search">
|
||||
<button class="search-btn">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<button class="voice-search-btn">
|
||||
<i class="fas fa-microphone"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<button class="create-btn">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>Create</span>
|
||||
</button>
|
||||
<button class="notification-btn">
|
||||
<i class="fas fa-bell"></i>
|
||||
</button>
|
||||
<button class="profile-btn">
|
||||
<i class="fas fa-user"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section">
|
||||
<button class="nav-btn active">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>Home</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
<span>Shorts</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">
|
||||
<span>Subscriptions</span>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</div>
|
||||
<div class="subscriptions-list">
|
||||
<!-- Subscription items will be dynamically generated via JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">
|
||||
<span>My YouTube</span>
|
||||
</div>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-history"></i>
|
||||
<span>History</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>Playlists</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-clock"></i>
|
||||
<span>Later</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-thumbs-up"></i>
|
||||
<span>Liked Videos</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-video"></i>
|
||||
<span>My Videos</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">
|
||||
<span>Explore</span>
|
||||
</div>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-music"></i>
|
||||
<span>Music</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-film"></i>
|
||||
<span>Films</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-video"></i>
|
||||
<span>Live</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">
|
||||
<span>More YouTube Products & Features</span>
|
||||
</div>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-crown"></i>
|
||||
<span>YouTube Premium</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-store"></i>
|
||||
<span>YouTube Studio</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-music"></i>
|
||||
<span>YouTube Music</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-child"></i>
|
||||
<span>YouTube Kids</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-cog"></i>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-flag"></i>
|
||||
<span>Report History</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
<span>Help</span>
|
||||
</button>
|
||||
<button class="nav-btn">
|
||||
<i class="fas fa-comment"></i>
|
||||
<span>Send Feedback</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<p><C> 2026 Google LLC</p>
|
||||
<p>Pure Frontend version</p>
|
||||
<p>Coded by Madobi Nanami && AI</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user