Загрузка данных


```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>
```