|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI News - YouTube</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #606060 #0f0f0f; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar-track { |
|
|
background: #0f0f0f; |
|
|
} |
|
|
.sidebar::-webkit-scrollbar-thumb { |
|
|
background-color: #606060; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.video-grid { |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
} |
|
|
.search-bar { |
|
|
background-color: #121212; |
|
|
border: 1px solid #303030; |
|
|
} |
|
|
.search-bar:focus-within { |
|
|
border-color: #1c62b9; |
|
|
background-color: #181818; |
|
|
} |
|
|
.video-card:hover .video-thumbnail { |
|
|
border-radius: 0; |
|
|
transition: border-radius 0.2s ease; |
|
|
} |
|
|
.channel-icon { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
.video-card:hover .channel-icon { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-white"> |
|
|
|
|
|
<header class="fixed top-0 left-0 right-0 bg-black bg-opacity-90 z-50 px-4 py-2 flex items-center justify-between border-b border-gray-800"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-700 cursor-pointer mr-2"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</div> |
|
|
<div class="flex items-center cursor-pointer"> |
|
|
<i class="fab fa-youtube text-red-600 text-3xl mr-2"></i> |
|
|
<span class="text-xl font-semibold">YouTube</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center flex-1 max-w-2xl mx-4"> |
|
|
<div class="search-bar flex items-center flex-1 rounded-3xl overflow-hidden"> |
|
|
<input type="text" placeholder="Искать" class="bg-transparent px-4 py-2 w-full focus:outline-none"> |
|
|
<button class="px-5 py-2 bg-gray-700 text-gray-300 hover:bg-gray-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="ml-4 w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<button class="w-10 h-10 rounded-full hover:bg-gray-700 flex items-center justify-center mx-1"> |
|
|
<i class="fas fa-video"></i> |
|
|
</button> |
|
|
<button class="w-10 h-10 rounded-full hover:bg-gray-700 flex items-center justify-center mx-1"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center ml-2 cursor-pointer"> |
|
|
<span class="text-sm font-medium">И</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex pt-16"> |
|
|
|
|
|
<aside class="sidebar w-60 h-screen overflow-y-auto fixed bg-black hidden md:block"> |
|
|
<div class="px-4 py-3"> |
|
|
<div class="mb-2"> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<i class="fas fa-home mr-4 text-lg"></i> |
|
|
<span>Главная</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<i class="fas fa-compass mr-4 text-lg"></i> |
|
|
<span>Навигатор</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<i class="fas fa-newspaper mr-4 text-lg"></i> |
|
|
<span>Новости</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-2 mt-2"> |
|
|
<h3 class="px-3 py-1 text-sm font-medium text-gray-400">ИЗБРАННОЕ</h3> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<i class="fas fa-clock mr-4 text-lg"></i> |
|
|
<span>История</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<i class="fas fa-thumbs-up mr-4 text-lg"></i> |
|
|
<span>Понравилось</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-2 mt-2"> |
|
|
<h3 class="px-3 py-1 text-sm font-medium text-gray-400">ПОДПИСКИ</h3> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<div class="w-6 h-6 rounded-full bg-red-500 mr-4"></div> |
|
|
<span>AI News Russia</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<div class="w-6 h-6 rounded-full bg-blue-500 mr-4"></div> |
|
|
<span>Технологии будущего</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-800"> |
|
|
<div class="w-6 h-6 rounded-full bg-green-500 mr-4"></div> |
|
|
<span>Нейросети</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-2 mt-2"> |
|
|
<h3 class="px-3 py-1 text-sm font-medium text-gray-400">ТЕМЫ</h3> |
|
|
<div class="flex flex-wrap px-2"> |
|
|
<span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Искусственный интеллект</span> |
|
|
<span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">ChatGPT</span> |
|
|
<span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Нейросети</span> |
|
|
<span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Машинное обучение</span> |
|
|
<span class="bg-gray-800 rounded-full px-3 py-1 text-sm m-1">Deep Learning</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="flex-1 ml-0 md:ml-60 p-4"> |
|
|
|
|
|
<div class="flex overflow-x-auto pb-2 mb-4 scrollbar-hide"> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Все</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Новинки</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Последние новости</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Искусственный интеллект</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">ChatGPT</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Нейросети</button> |
|
|
<button class="whitespace-nowrap px-3 py-1 mr-2 rounded-full bg-gray-800 text-white">Машинное обучение</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-bold mb-4">🔥 Последние новости об ИИ</h2> |
|
|
<div class="w-full aspect-video bg-gray-900 rounded-xl overflow-hidden"> |
|
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/3q3FV65ZrUs?autoplay=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<h3 class="text-lg font-semibold">Последние новости искусственного интеллекта | Июнь 2023</h3> |
|
|
<div class="flex items-center mt-2 text-sm text-gray-400"> |
|
|
<span>AI News Russia</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>125 тыс. просмотров</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>3 дня назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<h2 class="text-xl font-bold mb-4">Рекомендуем посмотреть</h2> |
|
|
<div class="video-grid grid gap-4"> |
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<img src="https://i.ytimg.com/vi/7Y32dXH5T_c/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover"> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">12:34</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-blue-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKaqca-x0g2ZJ6VQ9DpXvXp5X5Q5Q5Q5Q5Q5Q5Q5Q=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Как ChatGPT изменит мир? Интервью с экспертом по ИИ</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>Технологии будущего</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>245 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>1 неделю назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<img src="https://i.ytimg.com/vi/9dA8Z5JZg5I/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover"> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">8:45</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-red-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKZWeMCsx4Q9e_Hm6nhOOUQ3fv96QGUXiMr1-pPP=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Новый ИИ от Google - революция в поиске</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>AI News Russia</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>189 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>5 дней назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Z8j0j1J0Y0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">15:22</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-green-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Как нейросети создают искусственное искусство</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>Нейросети</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>312 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>2 недели назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<img src="https://i.ytimg.com/vi/2Z8j0j1J0Y0/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover"> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">22:18</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-purple-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">ИИ в медицине: как алгоритмы спасают жизни</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>AI в медицине</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>98 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>3 недели назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/1Z8j0j1J0Y0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">10:05</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-yellow-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Российские разработки в области искусственного интеллекта</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>Русские технологии</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>156 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>1 месяц назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="video-card cursor-pointer"> |
|
|
<div class="video-thumbnail relative rounded-xl overflow-hidden aspect-video bg-gray-800"> |
|
|
<img src="https://i.ytimg.com/vi/3Z8j0j1J0Y0/hqdefault.jpg" alt="Video thumbnail" class="w-full h-full object-cover"> |
|
|
<span class="absolute bottom-2 right-2 bg-black bg-opacity-80 px-1.5 py-0.5 text-xs rounded">18:37</span> |
|
|
</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="w-9 h-9 rounded-full bg-pink-500 mr-3 overflow-hidden channel-icon"> |
|
|
<img src="https://yt3.googleusercontent.com/ytc/APkrFKb4hW3W0g0g0g0g0g0g0g0g0g0g0g0g0g0g0g=s176-c-k-c0x00ffffff-no-rj-mo" alt="Channel icon" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium line-clamp-2">Этика ИИ: какие проблемы нас ждут в будущем?</h3> |
|
|
<div class="text-sm text-gray-400 mt-1"> |
|
|
<span>Философия технологий</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>87 тыс. просмотров</span> |
|
|
<span class="mx-1">•</span> |
|
|
<span>2 месяца назад</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
console.log('YouTube AI News page loaded'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Felguk/a-russian-youtube-ai-example" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
