Загрузка данных
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Студенческое сообщество</title>
<!-- Подключение шрифта Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Подключение иконок FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Подключение Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Настройка стилей Tailwind в соответствии с ТЗ и референсом -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
brand: {
DEFAULT: '#d32f2f', // Акцентный красный
light: '#ffebee', // Светло-красный для фона иконок
hover: '#b71c1c'
},
bgLight: '#f8f9fa', // Светло-серый фон страницы
textDark: '#1a1a1a',
textGray: '#666666'
},
boxShadow: {
'card': '0 4px 12px rgba(0, 0, 0, 0.05)', // Мягкая тень по ТЗ
},
borderRadius: {
'card': '16px', // Закругление карточек по ТЗ
}
}
}
}
</script>
<style>
/* Дополнительные базовые стили для плавной анимации */
body {
background-color: #f8f9fa;
color: #1a1a1a;
}
.tab-content {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Стили для скроллбара */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Скрытие сайдбара на мобильных устройствах */
@media (max-width: 768px) {
.sidebar-mobile-hidden {
transform: translateX(-100%);
}
.sidebar-mobile-open {
transform: translateX(0);
}
}
</style>
</head>
<body class="flex h-screen overflow-hidden font-sans">
<!-- Левый сайдбар (Навигация) -->
<aside id="sidebar" class="w-72 bg-white shadow-card flex flex-col fixed md:relative z-40 h-full transition-transform duration-300 sidebar-mobile-hidden md:translate-x-0">
<!-- Логотип -->
<div class="p-6 flex items-center justify-between border-b border-gray-100">
<h1 class="text-2xl font-extrabold text-textDark tracking-tight">
Студ<span class="text-brand">Сообщество</span>
</h1>
<button id="close-sidebar" class="md:hidden text-gray-500 hover:text-brand">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- Меню навигации -->
<nav class="flex-1 overflow-y-auto py-6 px-4 space-y-2">
<!-- Главная / События (Вкладка 1) -->
<button onclick="switchTab('main', this)" class="nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-brand bg-brand-light font-semibold transition-colors text-left">
<div class="w-8 h-8 rounded-full bg-white text-brand flex items-center justify-center shadow-sm">
<i class="fas fa-newspaper"></i>
</div>
<span>События колледжа</span>
</button>
<button class="w-full flex items-center space-x-3 px-4 py-3 rounded-card text-gray-600 hover:bg-gray-50 hover:text-brand font-medium transition-colors text-left">
<div class="w-8 h-8 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center">
<i class="fas fa-bullhorn"></i>
</div>
<span>Доска объявлений</span>
</button>
<!-- Кружки по интересам (Вкладка 3) -->
<button onclick="switchTab('clubs', this)" class="nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-gray-600 hover:bg-gray-50 hover:text-brand font-medium transition-colors text-left">
<div class="w-8 h-8 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center">
<i class="fas fa-users"></i>
</div>
<span>Кружки по интересам</span>
</button>
<!-- Личный кабинет / Достижения (Вкладка 2) -->
<button onclick="switchTab('profile', this)" class="nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-gray-600 hover:bg-gray-50 hover:text-brand font-medium transition-colors text-left">
<div class="w-8 h-8 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center">
<i class="fas fa-medal"></i>
</div>
<span>Достижения</span>
</button>
<!-- Форум (Вкладка 4) -->
<button onclick="switchTab('forum', this)" class="nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-gray-600 hover:bg-gray-50 hover:text-brand font-medium transition-colors text-left">
<div class="w-8 h-8 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center">
<i class="fas fa-comments"></i>
</div>
<span>Форум</span>
</button>
</nav>
<!-- Нижняя часть сайдбара (Профиль) -->
<div class="p-6 border-t border-gray-100 mt-auto">
<div class="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onclick="switchTab('profile', document.querySelectorAll('.nav-btn')[3])">
<img src="https://placehold.co/100x100/d32f2f/ffffff?text=И" alt="Аватар" class="w-10 h-10 rounded-full shadow-sm">
<div>
<p class="font-semibold text-sm">Иван Иванов</p>
<p class="text-xs text-gray-500">Студент, 2 курс</p>
</div>
</div>
</div>
</aside>
<!-- Затемнение фона для мобильного меню -->
<div id="mobile-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden"></div>
<!-- Основная область -->
<main class="flex-1 flex flex-col h-full overflow-hidden relative">
<!-- Верхнее меню (Header) -->
<header class="bg-white shadow-card mx-4 mt-4 mb-2 rounded-card px-6 py-4 flex items-center justify-between z-20">
<div class="flex items-center">
<!-- Кнопка мобильного меню -->
<button id="open-sidebar" class="mr-4 md:hidden text-gray-600 hover:text-brand transition-colors">
<i class="fas fa-bars text-xl"></i>
</button>
<!-- Заголовок текущей страницы (динамический) -->
<h2 id="page-title" class="text-xl font-bold text-textDark uppercase tracking-wide flex items-center">
События колледжа
<i class="fas fa-bolt text-brand ml-2"></i>
</h2>
</div>
<!-- Ссылки верхнего меню (из ТЗ) -->
<div class="hidden md:flex space-x-6 items-center">
<button class="font-semibold text-gray-600 hover:text-brand transition-colors">Сообщества</button>
<button class="font-semibold text-gray-600 hover:text-brand transition-colors">Друзья</button>
<button onclick="switchTab('profile', document.querySelectorAll('.nav-btn')[3])" class="px-5 py-2 bg-brand text-white font-semibold rounded-full hover:bg-brand-hover shadow-md shadow-red-200 transition-all">
Личный кабинет
</button>
</div>
</header>
<!-- Контентная область со скроллом -->
<div class="flex-1 overflow-y-auto p-4 pb-12">
<div class="max-w-6xl mx-auto">
<!-- ============================================== -->
<!-- ВКЛАДКА 1: ГЛАВНАЯ (Лента новостей) -->
<!-- ============================================== -->
<div id="tab-main" class="tab-content active space-y-6">
<!-- Карточка создания поста -->
<div class="bg-white p-6 rounded-card shadow-card">
<div class="flex space-x-4">
<img src="https://placehold.co/100x100/d32f2f/ffffff?text=И" alt="Аватар" class="w-12 h-12 rounded-full shadow-sm">
<div class="flex-1">
<input type="text" placeholder="Поделитесь новостью или файлом..." class="w-full bg-gray-50 border-none rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-light text-gray-700">
<div class="flex items-center justify-between mt-3">
<div class="flex space-x-2 text-gray-500">
<button class="p-2 hover:bg-brand-light hover:text-brand rounded-full transition-colors"><i class="fas fa-paperclip"></i></button>
<button class="p-2 hover:bg-brand-light hover:text-brand rounded-full transition-colors"><i class="fas fa-image"></i></button>
</div>
<button class="px-6 py-2 bg-brand text-white font-semibold rounded-full hover:bg-brand-hover shadow-md shadow-red-200 transition-all">
Опубликовать
</button>
</div>
</div>
</div>
</div>
<!-- Карточка новости 1 (с картинкой, как в вайрфрейме) -->
<article class="bg-white rounded-card shadow-card overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-brand-light text-brand flex items-center justify-center">
<i class="fas fa-university"></i>
</div>
<div>
<h3 class="font-bold text-gray-900">Администрация колледжа</h3>
<p class="text-xs text-gray-500">Сегодня в 10:00</p>
</div>
</div>
<span class="bg-red-50 text-brand text-xs font-bold px-3 py-1 rounded-full uppercase">Объявление</span>
</div>
<h2 class="text-xl font-bold mb-3">Открыта регистрация на Хакатон 2026!</h2>
<p class="text-gray-600 mb-4 leading-relaxed">
Приглашаем всех студентов принять участие в ежегодном весеннем хакатоне. Собирайте команду, разрабатывайте инновационные проекты и выигрывайте ценные призы.
</p>
</div>
<!-- Изображение новости -->
<img src="https://placehold.co/800x400/e2e8f0/64748b?text=Хакатон+2026" alt="Хакатон" class="w-full h-64 object-cover">
<!-- Действия -->
<div class="p-4 border-t border-gray-100 flex items-center space-x-6 text-gray-500 font-medium">
<button class="flex items-center space-x-2 hover:text-brand transition-colors">
<i class="far fa-heart"></i> <span>142</span>
</button>
<button class="flex items-center space-x-2 hover:text-brand transition-colors">
<i class="far fa-comment"></i> <span>24</span>
</button>
<button class="flex items-center space-x-2 hover:text-brand transition-colors ml-auto">
<i class="far fa-share-square"></i>
</button>
</div>
</article>
<!-- Карточка новости 2 (Только текст и файл) -->
<article class="bg-white rounded-card shadow-card overflow-hidden p-6">
<div class="flex items-center space-x-3 mb-4">
<img src="https://placehold.co/100x100/475569/ffffff?text=М" alt="Аватар" class="w-10 h-10 rounded-full shadow-sm">
<div>
<h3 class="font-bold text-gray-900">Мария Смирнова</h3>
<p class="text-xs text-gray-500">Вчера в 18:30</p>
</div>
<span class="bg-blue-50 text-blue-600 text-xs font-bold px-3 py-1 rounded-full uppercase ml-auto">Учебные материалы</span>
</div>
<p class="text-gray-600 mb-4 leading-relaxed">
Ребята, подготовила полный конспект лекций по Высшей Математике за первый семестр. Кому нужно готовиться к сессии — скачивайте!
</p>
<!-- Прикрепленный файл -->
<div class="flex items-center space-x-4 p-4 border border-gray-100 rounded-xl bg-gray-50">
<div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-brand shadow-sm text-xl">
<i class="far fa-file-pdf"></i>
</div>
<div class="flex-1">
<p class="font-bold text-sm text-gray-900">Конспект_Вышмат_Семестр1.pdf</p>
<p class="text-xs text-gray-500">2.4 MB</p>
</div>
<button class="w-10 h-10 bg-brand text-white rounded-full flex items-center justify-center hover:bg-brand-hover shadow-md transition-colors">
<i class="fas fa-download"></i>
</button>
</div>
</article>
</div>
<!-- ============================================== -->
<!-- ВКЛАДКА 2: ЛИЧНЫЙ КАБИНЕТ (Профиль) -->
<!-- ============================================== -->
<div id="tab-profile" class="tab-content">
<!-- Шапка профиля -->
<div class="bg-white rounded-card shadow-card p-8 mb-8 flex flex-col md:flex-row items-center md:items-start space-y-4 md:space-y-0 md:space-x-8 relative overflow-hidden">
<!-- Декоративный элемент фона -->
<div class="absolute -top-24 -right-24 w-64 h-64 bg-brand-light rounded-full opacity-50 pointer-events-none"></div>
<div class="relative">
<img src="https://placehold.co/200x200/d32f2f/ffffff?text=ИИ" alt="Аватар" class="w-32 h-32 rounded-full shadow-lg border-4 border-white object-cover relative z-10">
<button class="absolute bottom-0 right-0 w-10 h-10 bg-white border border-gray-100 rounded-full flex items-center justify-center text-gray-500 hover:text-brand shadow-sm z-20 transition-colors">
<i class="fas fa-camera"></i>
</button>
</div>
<div class="flex-1 text-center md:text-left z-10">
<h2 class="text-3xl font-extrabold text-gray-900 mb-1">Иван Иванов</h2>
<p class="text-brand font-medium mb-4">Студент, Факультет ИТ, 2 курс</p>
<p class="text-gray-600 max-w-lg mx-auto md:mx-0 leading-relaxed text-sm">
Увлекаюсь веб-разработкой, дизайном интерфейсов и робототехникой. Всегда открыт к новым интересным проектам в команде!
</p>
</div>
<div class="z-10 mt-4 md:mt-0">
<button class="px-6 py-2 border-2 border-brand text-brand font-semibold rounded-full hover:bg-brand hover:text-white transition-all shadow-sm">
Редактировать
</button>
</div>
</div>
<!-- Статистика (В стиле "Цифры и факты" из референса) -->
<h3 class="text-xl font-bold uppercase mb-4 flex items-center">
Статистика <i class="fas fa-bolt text-brand ml-2"></i>
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
<!-- Карточка статы -->
<div class="bg-white rounded-card shadow-card p-6 flex flex-col justify-between">
<div class="w-12 h-12 bg-brand-light text-brand rounded-full flex items-center justify-center text-xl mb-4">
<i class="fas fa-star"></i>
</div>
<div>
<div class="text-3xl font-extrabold text-brand mb-1">850</div>
<div class="font-bold text-gray-800 text-sm">Баллов рейтинга</div>
<div class="text-xs text-gray-500 mt-2 flex items-center"><i class="fas fa-arrow-right text-brand mr-1 text-[10px]"></i> Топ-10% курса</div>
</div>
</div>
<div class="bg-white rounded-card shadow-card p-6 flex flex-col justify-between">
<div class="w-12 h-12 bg-brand-light text-brand rounded-full flex items-center justify-center text-xl mb-4">
<i class="fas fa-layer-group"></i>
</div>
<div>
<div class="text-3xl font-extrabold text-brand mb-1">3</div>
<div class="font-bold text-gray-800 text-sm">Активных кружка</div>
<div class="text-xs text-gray-500 mt-2 flex items-center"><i class="fas fa-arrow-right text-brand mr-1 text-[10px]"></i> Робототехника, Дизайн...</div>
</div>
</div>
<div class="bg-white rounded-card shadow-card p-6 flex flex-col justify-between">
<div class="w-12 h-12 bg-brand-light text-brand rounded-full flex items-center justify-center text-xl mb-4">
<i class="fas fa-file-alt"></i>
</div>
<div>
<div class="text-3xl font-extrabold text-brand mb-1">24</div>
<div class="font-bold text-gray-800 text-sm">Загружено файлов</div>
<div class="text-xs text-gray-500 mt-2 flex items-center"><i class="fas fa-arrow-right text-brand mr-1 text-[10px]"></i> Полезные материалы</div>
</div>
</div>
<div class="bg-white rounded-card shadow-card p-6 flex flex-col justify-between">
<div class="w-12 h-12 bg-brand-light text-brand rounded-full flex items-center justify-center text-xl mb-4">
<i class="fas fa-calendar-check"></i>
</div>
<div>
<div class="text-3xl font-extrabold text-brand mb-1">12</div>
<div class="font-bold text-gray-800 text-sm">Посещено событий</div>
<div class="text-xs text-gray-500 mt-2 flex items-center"><i class="fas fa-arrow-right text-brand mr-1 text-[10px]"></i> В этом семестре</div>
</div>
</div>
</div>
<!-- Достижения/Бейджи -->
<h3 class="text-xl font-bold uppercase mb-4">Мои достижения</h3>
<div class="bg-white rounded-card shadow-card p-8">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6 text-center">
<!-- Бейдж 1 -->
<div class="flex flex-col items-center group">
<div class="w-20 h-20 rounded-full bg-brand-light flex items-center justify-center mb-3 shadow-inner group-hover:scale-110 transition-transform">
<i class="fas fa-fire text-3xl text-brand"></i>
</div>
<h4 class="font-bold text-sm text-gray-800">Активист</h4>
<p class="text-xs text-gray-500">Заходил 30 дней подряд</p>
</div>
<!-- Бейдж 2 -->
<div class="flex flex-col items-center group">
<div class="w-20 h-20 rounded-full bg-brand-light flex items-center justify-center mb-3 shadow-inner group-hover:scale-110 transition-transform">
<i class="fas fa-hands-helping text-3xl text-brand"></i>
</div>
<h4 class="font-bold text-sm text-gray-800">Помощник</h4>
<p class="text-xs text-gray-500">Ответил на 50 вопросов</p>
</div>
<!-- Бейдж 3 -->
<div class="flex flex-col items-center group">
<div class="w-20 h-20 rounded-full bg-brand-light flex items-center justify-center mb-3 shadow-inner group-hover:scale-110 transition-transform">
<i class="fas fa-brain text-3xl text-brand"></i>
</div>
<h4 class="font-bold text-sm text-gray-800">Эрудит</h4>
<p class="text-xs text-gray-500">Победа в викторине</p>
</div>
<!-- Неполученный бейдж -->
<div class="flex flex-col items-center opacity-40 grayscale">
<div class="w-20 h-20 rounded-full bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center mb-3">
<i class="fas fa-trophy text-3xl text-gray-400"></i>
</div>
<h4 class="font-bold text-sm text-gray-800">Чемпион</h4>
<p class="text-xs text-gray-500">Выиграть хакатон</p>
</div>
<!-- Неполученный бейдж -->
<div class="flex flex-col items-center opacity-40 grayscale">
<div class="w-20 h-20 rounded-full bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center mb-3">
<i class="fas fa-globe text-3xl text-gray-400"></i>
</div>
<h4 class="font-bold text-sm text-gray-800">Амбассадор</h4>
<p class="text-xs text-gray-500">Пригласить 10 друзей</p>
</div>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- ВКЛАДКА 3: КРУЖКИ ПО ИНТЕРЕСАМ -->
<!-- ============================================== -->
<div id="tab-clubs" class="tab-content">
<!-- Панель поиска и фильтров -->
<div class="bg-white rounded-card shadow-card p-4 mb-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="relative w-full sm:w-96">
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="text" placeholder="Поиск кружков..." class="w-full bg-gray-50 rounded-full py-2.5 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-brand-light text-sm">
</div>
<button class="w-full sm:w-auto px-6 py-2.5 bg-brand text-white font-semibold rounded-full hover:bg-brand-hover shadow-md transition-all flex items-center justify-center">
<i class="fas fa-plus mr-2"></i> Создать кружок
</button>
</div>
<!-- Сетка карточек кружков -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Карточка 1 (С интерактивной кнопкой) -->
<div class="bg-white rounded-card shadow-card p-6 flex flex-col relative transition-transform hover:-translate-y-1 border border-transparent hover:border-brand-light">
<!-- Иконка как на референсе -->
<div class="w-14 h-14 rounded-full bg-brand-light text-brand flex items-center justify-center text-2xl mb-4 shadow-sm">
<i class="fas fa-robot"></i>
</div>
<h3 class="font-extrabold text-xl mb-2 text-gray-900">Робототехника</h3>
<p class="text-sm text-gray-500 mb-6 flex-1">Собираем дроны, программируем микроконтроллеры Arduino и участвуем в соревнованиях.</p>
<div class="border-t border-gray-100 pt-4 flex items-center justify-between">
<div class="flex items-center text-sm font-bold text-gray-700">
<i class="fas fa-users text-gray-400 mr-2"></i> 42
</div>
<!-- ИНТЕРАКТИВНАЯ КНОПКА (Сценарий) -->
<button class="join-club-btn px-5 py-1.5 rounded-full border-2 border-brand text-brand font-bold text-sm hover:bg-brand hover:text-white transition-all">
Вступить
</button>
</div>
</div>
<!-- Карточка 2 -->
<div class="bg-white rounded-card shadow-card p-6 flex flex-col relative transition-transform hover:-translate-y-1 border border-transparent hover:border-brand-light">
<div class="w-14 h-14 rounded-full bg-brand-light text-brand flex items-center justify-center text-2xl mb-4 shadow-sm">
<i class="fas fa-laptop-code"></i>
</div>
<h3 class="font-extrabold text-xl mb-2 text-gray-900">Клуб Web-разработки</h3>
<p class="text-sm text-gray-500 mb-6 flex-1">Изучаем HTML, CSS, JS и современные фреймворки. Делаем реальные проекты для колледжа.</p>
<div class="border-t border-gray-100 pt-4 flex items-center justify-between">
<div class="flex items-center text-sm font-bold text-gray-700">
<i class="fas fa-users text-gray-400 mr-2"></i> 128
</div>
<button class="join-club-btn px-5 py-1.5 rounded-full border-2 border-brand text-brand font-bold text-sm hover:bg-brand hover:text-white transition-all">
Вступить
</button>
</div>
</div>
<!-- Карточка 3 (Пользователь уже состоит) -->
<div class="bg-white rounded-card shadow-card p-6 flex flex-col relative transition-transform hover:-translate-y-1 border border-transparent hover:border-brand-light">
<div class="w-14 h-14 rounded-full bg-brand-light text-brand flex items-center justify-center text-2xl mb-4 shadow-sm">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="font-extrabold text-xl mb-2 text-gray-900">Студия Дизайна</h3>
<p class="text-sm text-gray-500 mb-6 flex-1">Графический дизайн, UI/UX, работа в Figma и Adobe. Обсуждаем тренды и собираем портфолио.</p>
<div class="border-t border-gray-100 pt-4 flex items-center justify-between">
<div class="flex items-center text-sm font-bold text-gray-700">
<i class="fas fa-users text-gray-400 mr-2"></i> 84
</div>
<!-- Состояние "Уже в кружке" -->
<button class="join-club-btn joined px-5 py-1.5 rounded-full bg-gray-100 text-gray-500 font-bold text-sm cursor-default border-2 border-transparent">
<i class="fas fa-check mr-1"></i> Вы в кружке
</button>
</div>
</div>
<!-- Карточка 4 -->
<div class="bg-white rounded-card shadow-card p-6 flex flex-col relative transition-transform hover:-translate-y-1 border border-transparent hover:border-brand-light">
<div class="w-14 h-14 rounded-full bg-brand-light text-brand flex items-center justify-center text-2xl mb-4 shadow-sm">
<i class="fas fa-chess-knight"></i>
</div>
<h3 class="font-extrabold text-xl mb-2 text-gray-900">Шахматный клуб</h3>
<p class="text-sm text-gray-500 mb-6 flex-1">Еженедельные турниры, разбор партий гроссмейстеров и приятное общение.</p>
<div class="border-t border-gray-100 pt-4 flex items-center justify-between">
<div class="flex items-center text-sm font-bold text-gray-700">
<i class="fas fa-users text-gray-400 mr-2"></i> 26
</div>
<button class="join-club-btn px-5 py-1.5 rounded-full border-2 border-brand text-brand font-bold text-sm hover:bg-brand hover:text-white transition-all">
Вступить
</button>
</div>
</div>
</div>
</div>
<!-- ============================================== -->
<!-- ВКЛАДКА 4: ФОРУМ (Обсуждения) -->
<!-- ============================================== -->
<div id="tab-forum" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold uppercase flex items-center">
Популярные темы <i class="fas fa-fire text-brand ml-2"></i>
</h3>
<button class="px-5 py-2 bg-white border border-gray-200 shadow-sm font-semibold rounded-full hover:border-brand hover:text-brand transition-colors text-sm">
Новая тема
</button>
</div>
<div class="bg-white rounded-card shadow-card overflow-hidden">
<!-- Элемент списка форума 1 -->
<a href="#" class="block border-b border-gray-100 p-5 hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-brand-light text-brand flex items-center justify-center text-xl mr-5 shrink-0">
<i class="fas fa-book-open"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-gray-900 text-lg mb-1">Где найти материалы к ГОСам?</h4>
<p class="text-sm text-gray-500">Автор: <span class="font-semibold text-gray-700">Анна К.</span> • Обновлено 2 часа назад</p>
</div>
<div class="text-center ml-4 shrink-0">
<div class="text-brand font-extrabold text-xl">45</div>
<div class="text-xs text-gray-400 uppercase font-bold">Ответов</div>
</div>
</div>
</a>
<!-- Элемент списка форума 2 -->
<a href="#" class="block border-b border-gray-100 p-5 hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-brand-light text-brand flex items-center justify-center text-xl mr-5 shrink-0">
<i class="fas fa-briefcase"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-gray-900 text-lg mb-1">Поиск стажировок для 3 курса</h4>
<p class="text-sm text-gray-500">Автор: <span class="font-semibold text-gray-700">Петр С.</span> • Обновлено вчера</p>
</div>
<div class="text-center ml-4 shrink-0">
<div class="text-gray-700 font-extrabold text-xl">12</div>
<div class="text-xs text-gray-400 uppercase font-bold">Ответов</div>
</div>
</div>
</a>
<!-- Элемент списка форума 3 -->
<a href="#" class="block p-5 hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-brand-light text-brand flex items-center justify-center text-xl mr-5 shrink-0">
<i class="fas fa-gamepad"></i>
</div>
<div class="flex-1">
<h4 class="font-bold text-gray-900 text-lg mb-1">Собираем команду на турнир по Dota 2</h4>
<p class="text-sm text-gray-500">Автор: <span class="font-semibold text-gray-700">Максим В.</span> • Обновлено 3 дня назад</p>
</div>
<div class="text-center ml-4 shrink-0">
<div class="text-gray-700 font-extrabold text-xl">8</div>
<div class="text-xs text-gray-400 uppercase font-bold">Ответов</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<!-- JS Логика приложения -->
<script>
// Функция переключения вкладок
function switchTab(tabId, btnElement) {
// 1. Скрываем все вкладки
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// 2. Показываем нужную вкладку
document.getElementById('tab-' + tabId).classList.add('active');
// 3. Сбрасываем стили всех кнопок навигации (серый цвет)
document.querySelectorAll('.nav-btn').forEach(btn => {
btn.className = 'nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-gray-600 hover:bg-gray-50 hover:text-brand font-medium transition-colors text-left';
const iconContainer = btn.querySelector('div');
if(iconContainer) {
iconContainer.className = 'w-8 h-8 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center';
}
});
// 4. Устанавливаем активные стили для нажатой кнопки (красный цвет и фон)
if(btnElement && btnElement.classList.contains('nav-btn')) {
btnElement.className = 'nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-brand bg-brand-light font-semibold transition-colors text-left';
const iconContainer = btnElement.querySelector('div');
if(iconContainer) {
iconContainer.className = 'w-8 h-8 rounded-full bg-white text-brand flex items-center justify-center shadow-sm';
}
// Обновление заголовка страницы в Header
const titleText = btnElement.querySelector('span').innerText;
document.getElementById('page-title').innerHTML = `${titleText} <i class="fas fa-bolt text-brand ml-2"></i>`;
} else if (tabId === 'profile') {
// Обработка клика из хедера (где нет кнопки из сайдбара)
document.getElementById('page-title').innerHTML = `Личный кабинет <i class="fas fa-bolt text-brand ml-2"></i>`;
// Подсвечиваем вкладку достижений в сайдбаре
const profileBtn = document.querySelectorAll('.nav-btn')[3];
profileBtn.className = 'nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-card text-brand bg-brand-light font-semibold transition-colors text-left';
profileBtn.querySelector('div').className = 'w-8 h-8 rounded-full bg-white text-brand flex items-center justify-center shadow-sm';
}
// Закрыть мобильное меню при переключении
if(window.innerWidth <= 768) {
toggleMobileMenu(false);
}
}
// --- ИНТЕРАКТИВНЫЙ СЦЕНАРИЙ: Вступление в кружок ---
document.querySelectorAll('.join-club-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault(); // Предотвращаем скролл
// Проверяем текущее состояние кнопки
const isJoined = this.classList.contains('joined');
// Анимация нажатия (небольшой scale)
this.style.transform = 'scale(0.95)';
setTimeout(() => this.style.transform = 'scale(1)', 150);
if (!isJoined) {
// Сценарий 1: Пользователь вступает в кружок
// Меняем стили с активной красной кнопки на неактивную серую
this.className = 'join-club-btn joined px-5 py-1.5 rounded-full bg-gray-100 text-gray-500 font-bold text-sm cursor-default border-2 border-transparent transition-all';
this.innerHTML = '<i class="fas fa-check mr-1"></i> Вы в кружке';
// Увеличиваем счетчик участников
const membersContainer = this.parentElement.querySelector('.text-gray-700');
if(membersContainer) {
const currentCount = parseInt(membersContainer.innerText.replace(/[^0-9]/g, ''));
membersContainer.innerHTML = `<i class="fas fa-users text-gray-400 mr-2"></i> ${currentCount + 1}`;
}
// (Опционально) Можно вызвать alert/уведомление, но по правилам UI лучше менять состояние самой кнопки
} else {
// Сценарий 2: Пользователь покидает кружок
this.className = 'join-club-btn px-5 py-1.5 rounded-full border-2 border-brand text-brand font-bold text-sm hover:bg-brand hover:text-white transition-all';
this.innerHTML = 'Вступить';
// Уменьшаем счетчик
const membersContainer = this.parentElement.querySelector('.text-gray-700');
if(membersContainer) {
const currentCount = parseInt(membersContainer.innerText.replace(/[^0-9]/g, ''));
membersContainer.innerHTML = `<i class="fas fa-users text-gray-400 mr-2"></i> ${currentCount - 1}`;
}
}
});
});
// --- Мобильное меню ---
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('mobile-overlay');
function toggleMobileMenu(show) {
if (show) {
sidebar.classList.remove('sidebar-mobile-hidden');
sidebar.classList.add('sidebar-mobile-open');
overlay.classList.remove('hidden');
} else {
sidebar.classList.add('sidebar-mobile-hidden');
sidebar.classList.remove('sidebar-mobile-open');
overlay.classList.add('hidden');
}
}
document.getElementById('open-sidebar').addEventListener('click', () => toggleMobileMenu(true));
document.getElementById('close-sidebar').addEventListener('click', () => toggleMobileMenu(false));
overlay.addEventListener('click', () => toggleMobileMenu(false));
</script>
</body>
</html>
```