File size: 12,520 Bytes
0521879 d384b0a 0521879 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NewsByte Ninja - Video News Catalog</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/video-card.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Video Catalog Hero -->
<section class="mb-16">
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 md:p-12 text-white">
<h1 class="text-4xl md:text-5xl font-bold mb-4">NewsByte Ninja Videos</h1>
<p class="text-xl mb-8">My take on the latest news stories - straight from the source</p>
<div class="relative max-w-md">
<input type="text" placeholder="Search videos..." class="w-full py-3 px-4 rounded-full text-gray-800 focus:outline-none">
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-full">
<i data-feather="search"></i>
</button>
</div>
</div>
</section>
<!-- Video Catalog -->
<section class="mb-16">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold">Latest Videos</h2>
<a href="#" class="text-blue-600 hover:underline flex items-center">
View all <i data-feather="chevron-right" class="ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://rumble.com/embed/v718tty/?pub=4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="p-6">
<div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
<span>12:34</span>
</div>
<h3 class="text-xl font-semibold mb-2">Breaking Down Today's Tech Headlines</h3>
<p class="text-gray-600">My analysis of the latest tech news and what it means for consumers</p>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-6">
<div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
<span>15:22</span>
</div>
<h3 class="text-xl font-semibold mb-2">Political Developments Explained</h3>
<p class="text-gray-600">Breaking down complex political stories into understandable insights</p>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-6">
<div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
<span>08:45</span>
</div>
<h3 class="text-xl font-semibold mb-2">Market Trends and Analysis</h3>
<p class="text-gray-600">What today's financial news means for your investments</p>
</div>
</div>
</div>
</section>
<!-- Video Playlists -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">My Playlists</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-red-600"></i>
</div>
<span class="font-medium">Daily Brief</span>
</a>
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-blue-600"></i>
</div>
<span class="font-medium">Tech Talk</span>
</a>
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-green-600"></i>
</div>
<span class="font-medium">Politics</span>
</a>
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-purple-600"></i>
</div>
<span class="font-medium">Market Watch</span>
</a>
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-yellow-600"></i>
</div>
<span class="font-medium">Science</span>
</a>
<a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2">
<i data-feather="play-circle" class="text-pink-600"></i>
</div>
<span class="font-medium">Culture</span>
</a>
</div>
</section>
<!-- Popular Videos -->
<section class="mb-16">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold">Most Watched</h2>
<a href="#" class="text-blue-600 hover:underline flex items-center">
View all <i data-feather="chevron-right" class="ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-6">
<div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
<span>22:18</span>
</div>
<h3 class="text-xl font-semibold mb-2">The Week in Review</h3>
<p class="text-gray-600 mb-4">Breaking down all the major news stories from this past week</p>
<div class="flex items-center text-sm text-gray-500">
<i data-feather="eye" class="mr-1 w-4 h-4"></i>
<span class="mr-4">54.2k views</span>
<i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i>
<span>2.4k likes</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
<div class="relative pb-[56.25%]">
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-6">
<div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
<i data-feather="clock" class="mr-2 w-4 h-4"></i>
<span>18:45</span>
</div>
<h3 class="text-xl font-semibold mb-2">Deep Dive: Economic Analysis</h3>
<p class="text-gray-600 mb-4">A comprehensive look at current economic trends and forecasts</p>
<div class="flex items-center text-sm text-gray-500">
<i data-feather="eye" class="mr-1 w-4 h-4"></i>
<span class="mr-4">42.7k views</span>
<i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i>
<span>1.8k likes</span>
</div>
</div>
</div>
</div>
</section>
<!-- Channel Subscription -->
<section class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl p-8 text-white mb-16">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">Subscribe to My Channel</h2>
<p class="mb-6">Get notified when I post new video analyses of the day's top stories</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-full transition-colors flex items-center justify-center">
<i data-feather="youtube" class="mr-2"></i> YouTube
</a>
<a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-medium py-3 px-6 rounded-full transition-colors flex items-center justify-center">
<i data-feather="twitter" class="mr-2"></i> Twitter
</a>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |