NanamiAdmin
b3a5aa3446
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
204 lines
8.4 KiB
HTML
204 lines
8.4 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">
|
|
<!-- 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>
|
|
|
|
<!-- 视频内容区 -->
|
|
<div class="video-content">
|
|
<!-- 板块按钮 -->
|
|
<div class="category-buttons">
|
|
<button class="category-btn active">All</button>
|
|
<button class="category-btn">Music</button>
|
|
<button class="category-btn">Game</button>
|
|
<button class="category-btn">Technology</button>
|
|
<button class="category-btn">Art</button>
|
|
<button class="category-btn">Recently Uploaded</button>
|
|
<button class="category-btn">Watched</button>
|
|
</div>
|
|
|
|
<!-- Horizontal video grid -->
|
|
<div class="video-grid">
|
|
<!-- Video cards will be dynamically generated via JS -->
|
|
</div>
|
|
|
|
<!-- Shorts -->
|
|
<div class="shorts-section">
|
|
<h3>Shorts</h3>
|
|
<div class="shorts-grid">
|
|
<!-- Shorts cards will be dynamically generated via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="search-results" style="display: none;">
|
|
<div class="search-results-content">
|
|
<!-- Search results will be dynamically generated via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |