209 lines
8.6 KiB
HTML
209 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<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="youtube-container">
|
|
<!-- 顶栏 -->
|
|
<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="搜索">
|
|
<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>创建</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">
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar">
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-section">
|
|
<button class="nav-btn active">
|
|
<i class="fas fa-home"></i>
|
|
<span>首页</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-play"></i>
|
|
<span>Shorts</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">
|
|
<span>订阅</span>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<div class="subscriptions-list">
|
|
<!-- 订阅内容将通过 JS 动态生成 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">
|
|
<span>我</span>
|
|
</div>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-history"></i>
|
|
<span>历史记录</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-list"></i>
|
|
<span>播放列表</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-clock"></i>
|
|
<span>稍后再看</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-thumbs-up"></i>
|
|
<span>赞过的视频</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-video"></i>
|
|
<span>我的视频</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">
|
|
<span>探索</span>
|
|
</div>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-music"></i>
|
|
<span>音乐</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-film"></i>
|
|
<span>电影</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-video"></i>
|
|
<span>直播</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-section-title">
|
|
<span>更多 YouTube 产品与功能</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 工作室</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>设置</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-flag"></i>
|
|
<span>举报记录</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-question-circle"></i>
|
|
<span>帮助</span>
|
|
</button>
|
|
<button class="nav-btn">
|
|
<i class="fas fa-comment"></i>
|
|
<span>发送反馈</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>
|
|
|
|
<!-- 视频内容区 -->
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 横屏视频 -->
|
|
<div class="video-grid">
|
|
<!-- 视频卡片将通过 JS 动态生成 -->
|
|
</div>
|
|
|
|
<!-- Shorts -->
|
|
<div class="shorts-section">
|
|
<h3>Shorts</h3>
|
|
<div class="shorts-grid">
|
|
<!-- Shorts 卡片将通过 JS 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 搜索结果弹窗 -->
|
|
<div class="search-results" style="display: none;">
|
|
<div class="search-results-content">
|
|
<!-- 搜索结果将通过 JS 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |