Gallery with Tabs
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f5f5f5;
color: #333;
}
.mainArea {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
/* Tab Navigation */
.tab-navigation {
background: white;
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
gap: 10px;
position: sticky;
top: 0;
z-index: 100;
}
.tab-btn {
background: #f0f0f0;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
color: #555;
}
.tab-btn:hover {
background: #e0e0e0;
transform: translateY(-2px);
}
.tab-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.tab-btn i {
font-size: 16px;
}
/* Tab Content */
.tab-content {
display: none;
animation: fadeIn 0.4s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Gallery Section */
.gallery-section {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.gallery-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
color: #333;
}
.gallery-title i {
color: #667eea;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* Video Card */
.video-card {
background: #f9f9f9;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.video-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.video-thumbnail {
width: 100%;
height: 180px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 48px;
}
.video-info {
padding: 15px;
}
.video-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.video-meta {
display: flex;
gap: 15px;
font-size: 13px;
color: #777;
}
.video-meta span {
display: flex;
align-items: center;
gap: 5px;
}
/* Channel Card */
.channel-card {
background: white;
border: 2px solid #f0f0f0;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.channel-card:hover {
border-color: #667eea;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.channel-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
}
.channel-info h4 {
font-size: 18px;
margin-bottom: 8px;
}
.channel-stats {
display: flex;
gap: 20px;
font-size: 14px;
color: #777;
}
/* Alert */
.alert {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.alert h1 {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
color: #856404;
margin-bottom: 10px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.tab-navigation {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
white-space: nowrap;
}
.video-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.channel-card {
flex-direction: column;
text-align: center;
}
}
/* Loading Animation */
.loading {
text-align: center;
padding: 40px;
color: #667eea;
}
.loading i {
font-size: 48px;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
// Tab switching logic
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.getAttribute('data-tab');
// Remove active class from all buttons and contents
tabBtns.forEach(b => b.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
// Add active class to clicked button and corresponding content
btn.classList.add('active');
document.getElementById(tabId).classList.add('active');
// Load content if not loaded yet
loadTabContent(tabId);
});
});
// Mock data generator
function generateMockVideos(count) {
const videos = [];
for (let i = 1; i <= count; i++) {
videos.push({
id: i,
title: `Видео ${i}: Интересный контент`,
views: Math.floor(Math.random() * 100000),
likes: Math.floor(Math.random() * 5000),
duration: `${Math.floor(Math.random() * 20)}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`
});
}
return videos;
}
function generateMockChannels(count) {
const channels = [];
for (let i = 1; i <= count; i++) {
channels.push({
id: i,
name: `Канал ${i}`,
subscribers: Math.floor(Math.random() * 500000),
videos: Math.floor(Math.random() * 500)
});
}
return channels;
}
// Render functions
function renderVideos(containerId, videos) {
const container = document.getElementById(containerId);
container.innerHTML = videos.map(video => `
${video.title}
${formatNumber(video.views)}
${formatNumber(video.likes)}
`).join('');
}
function renderChannels(containerId, channels) {
const container = document.getElementById(containerId);
container.innerHTML = channels.map(channel => `
${channel.name}
${formatNumber(channel.subscribers)} подписчиков
${channel.videos} видео
`).join('');
}
function formatNumber(num) {
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
return num;
}
// Load tab content
const loadedTabs = { all: true };
function loadTabContent(tabId) {
if (loadedTabs[tabId]) return;
const container = document.getElementById(tabId);
const videoGrid = container.querySelector('.video-grid');
const channelsList = container.querySelector('#channelsList');
// Show loading
if (videoGrid) {
videoGrid.innerHTML = '
';
}
// Simulate API call
setTimeout(() => {
switch(tabId) {
case 'channels':
renderChannels('channelsList', generateMockChannels(8));
break;
case 'suggested':
renderVideos('suggestedVideos', generateMockVideos(12));
break;
case 'trending':
renderVideos('trendingVideos', generateMockVideos(12));
break;
case 'new':
renderVideos('newVideos', generateMockVideos(12));
break;
case 'popular':
renderVideos('popularVideos', generateMockVideos(12));
break;
case 'watched':
renderVideos('watchedVideos', generateMockVideos(12));
break;
case 'live':
renderVideos('liveVideos', generateMockVideos(6));
break;
}
loadedTabs[tabId] = true;
}, 500);
}
// Initialize with "All Videos" content
renderVideos('allVideos', generateMockVideos(12));