NanamiAdmin
f30523a15a
The search results container is added to support dynamic search functionality that will be implemented in JavaScript.
293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="css/video.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 collapsed">
|
|
<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-wrapper">
|
|
<div class="video-main-section">
|
|
<!-- Video Player -->
|
|
<div class="video-player">
|
|
<video src="src/video.mp4" controls autoplay></video>
|
|
</div>
|
|
|
|
<!-- Video Info -->
|
|
<div class="video-info-container">
|
|
<h1 class="video-title" id="videoTitle">Video Title</h1>
|
|
|
|
<div class="video-channel-info">
|
|
<div class="channel-left">
|
|
<div class="channel-avatar" id="channelAvatar">
|
|
<div class="video-channel-avatar">
|
|
<i class="fas fa-user avatar-img"></i>
|
|
</div>
|
|
</div>
|
|
<div class="channel-details">
|
|
<div class="channel-name" id="channelName">Channel Name</div>
|
|
<div class="channel-subscribers" id="channelSubscribers">0 subscribers</div>
|
|
</div>
|
|
</div>
|
|
<button class="subscribe-btn" id="subscribeBtn">Subscribe</button>
|
|
</div>
|
|
|
|
<div class="video-actions">
|
|
<div class="like-dislike-buttons">
|
|
<button class="action-btn like-btn">
|
|
<i class="fas fa-thumbs-up"></i>
|
|
<span id="likeCount">0</span>
|
|
</button>
|
|
<button class="action-btn dislike-btn">
|
|
<i class="fas fa-thumbs-down"></i>
|
|
</button>
|
|
</div>
|
|
<button class="action-btn share-btn">
|
|
<i class="fas fa-share"></i>
|
|
<span>Share</span>
|
|
</button>
|
|
<button class="action-btn save-btn">
|
|
<i class="fas fa-bookmark"></i>
|
|
<span>Save</span>
|
|
</button>
|
|
<button class="action-btn clip-btn">
|
|
<i class="fas fa-cut"></i>
|
|
<span>Clip</span>
|
|
</button>
|
|
<div class="more-options">
|
|
<button class="action-btn more-btn" id="moreBtn">
|
|
<i class="fas fa-ellipsis-h"></i>
|
|
</button>
|
|
<div class="more-dropdown" id="moreDropdown">
|
|
<div class="more-item download-item">
|
|
<i class="fas fa-download"></i>
|
|
<span>Download</span>
|
|
</div>
|
|
<div class="more-item report-item">
|
|
<i class="fas fa-flag"></i>
|
|
<span>Report</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="video-stats">
|
|
<span id="videoViews">0 views</span>
|
|
<span id="videoUploadDate">0 ago</span>
|
|
</div>
|
|
|
|
<div class="video-description">
|
|
<div class="description-toggle" id="descriptionToggle">
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
<p id="videoDescription">description</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comments Section -->
|
|
<div class="comments-section">
|
|
<h2 class="comments-header">
|
|
<span id="commentsCount">0 Comments</span>
|
|
</h2>
|
|
<div class="add-comment">
|
|
<div class="comment-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="comment-input-container">
|
|
<input type="text" class="comment-input" placeholder="Add a comment...">
|
|
</div>
|
|
</div>
|
|
<div class="comments-list" id="commentsList">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Related Videos Section -->
|
|
<div class="related-videos-section">
|
|
<!-- Shorts Section -->
|
|
<div class="shorts-section">
|
|
<h3 class="section-title">Shorts</h3>
|
|
<div class="shorts-list" id="shortsList">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Regular Videos Section -->
|
|
<div class="regular-videos-section">
|
|
<h3 class="section-title">Related Videos</h3>
|
|
<div class="regular-videos-list" id="regularVideosList">
|
|
</div>
|
|
</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>
|
|
<script src="js/video.js"></script>
|
|
</body>
|
|
</html> |