<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Форум | Структура с левыми кнопками и списком форумов</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f1f5f9;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            line-height: 1.5;
            color: #0f172a;
        }

        /* ===== ГЛАВНЫЙ КОНТЕЙНЕР ===== */
        .forum-app {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1.5rem;
        }

        /* ===== ШАПКА (доп. эстетика) ===== */
        .forum-header {
            background: white;
            border-radius: 1.5rem;
            padding: 1rem 1.8rem;
            margin-bottom: 1.8rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #e2e8f0;
        }
        .logo h1 {
            font-size: 1.6rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b, #3b82f6);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.3px;
        }
        .logo span {
            font-size: 0.85rem;
            color: #475569;
            font-weight: normal;
            background: none;
            -webkit-background-clip: unset;
            color: #475569;
        }
        .user-greeting {
            background: #f8fafc;
            padding: 0.4rem 1rem;
            border-radius: 40px;
            font-size: 0.9rem;
            font-weight: 500;
            color: #1e293b;
            border: 1px solid #e2e8f0;
        }

        /* ===== ТРЕХКОЛОНОЧНАЯ СЕТКА ===== */
        .forum-layout {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        /* --- ЛЕВАЯ ПАНЕЛЬ: КНОПКИ ФОРУМА (навигация) --- */
        .left-actions {
            flex: 0 0 240px;
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem 0.8rem;
            box-shadow: 0 4px 10px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
            align-self: start;
            position: sticky;
            top: 1.5rem;
        }
        .nav-buttons {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .forum-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            background: transparent;
            border: none;
            padding: 0.7rem 1rem;
            font-size: 1rem;
            font-weight: 500;
            color: #334155;
            border-radius: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
            width: 100%;
            font-family: inherit;
        }
        .forum-btn i {
            font-style: normal;
            font-weight: 600;
            font-size: 1.2rem;
            width: 28px;
            display: inline-block;
        }
        .forum-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
            transform: translateX(4px);
        }
        .forum-btn.active {
            background: #eef2ff;
            color: #2563eb;
            box-shadow: inset 0 0 0 1px #cbd5e1;
            font-weight: 600;
        }
        .btn-icon {
            font-size: 1.2rem;
        }
        .divider-nav {
            height: 1px;
            background: #e2e8f0;
            margin: 1rem 0.5rem;
        }

        /* --- ЦЕНТРАЛЬНАЯ ОБЛАСТЬ: СПИСОК ФОРУМОВ (ТЕМЫ/РАЗДЕЛЫ) --- */
        .forum-list-container {
            flex: 2;
            min-width: 260px;
            background: white;
            border-radius: 1.25rem;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }
        .category-header {
            padding: 1rem 1.5rem;
            background: #fefce8;
            border-bottom: 2px solid #fde047;
        }
        .category-header h2 {
            font-size: 1.35rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .category-header p {
            color: #475569;
            font-size: 0.85rem;
            margin-top: 6px;
        }
        .forum-items {
            list-style: none;
        }
        .forum-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s;
            flex-wrap: wrap;
            gap: 0.6rem;
        }
        .forum-row:hover {
            background: #fafcff;
        }
        .forum-info {
            flex: 3;
            min-width: 180px;
        }
        .forum-name {
            font-weight: 650;
            font-size: 1.05rem;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        .forum-badge {
            background: #e2e8f0;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 30px;
            color: #334155;
            font-weight: normal;
        }
        .forum-desc {
            font-size: 0.8rem;
            color: #5b6e8c;
            margin-top: 4px;
        }
        .forum-stats {
            flex: 1;
            min-width: 100px;
            text-align: right;
            font-size: 0.85rem;
            color: #475569;
            display: flex;
            justify-content: flex-end;
            gap: 0.8rem;
        }
        .stats-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .last-post {
            flex: 1.2;
            min-width: 140px;
            font-size: 0.75rem;
            color: #62748c;
            text-align: right;
        }
        .last-post span {
            font-weight: 500;
            display: block;
            color: #1f2a44;
        }

        /* --- ПРАВАЯ ПАНЕЛЬ (по вашему усмотрению: информация, онлайн, виджеты) --- */
        .right-sidebar {
            flex: 0 0 260px;
            background: white;
            border-radius: 1.25rem;
            padding: 1.2rem;
            border: 1px solid #e2e8f0;
            align-self: start;
            position: sticky;
            top: 1.5rem;
        }
        .widget {
            margin-bottom: 1.8rem;
        }
        .widget h3 {
            font-size: 1rem;
            font-weight: 600;
            border-left: 3px solid #3b82f6;
            padding-left: 0.7rem;
            margin-bottom: 0.8rem;
            color: #1e293b;
        }
        .online-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .online-user {
            background: #eef2ff;
            padding: 0.2rem 0.7rem;
            border-radius: 30px;
            font-size: 0.75rem;
            font-weight: 500;
            color: #1e40af;
        }
        .stats-numbers p {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
        }
        .trending-topic {
            font-size: 0.85rem;
            padding: 6px 0;
            border-bottom: 1px dashed #e2e8f0;
        }
        .feedback {
            background: #f8fafc;
            border-radius: 0.9rem;
            padding: 0.8rem;
            text-align: center;
            font-size: 0.75rem;
            color: #2563eb;
        }

        /* адаптивность для планшетов и телефонов */
        @media (max-width: 900px) {
            .forum-layout {
                flex-direction: column;
            }
            .left-actions, .right-sidebar {
                flex: auto;
                width: 100%;
                position: static;
            }
            .forum-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .forum-stats, .last-post {
                text-align: left;
                justify-content: flex-start;
            }
            .forum-stats {
                gap: 1rem;
            }
            .forum-app {
                padding: 1rem;
            }
        }

        /* кнопка создания темы (в центральной области) */
        .action-create {
            padding: 0.8rem 1.5rem;
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: flex-end;
        }
        .btn-create {
            background: #2563eb;
            border: none;
            padding: 0.5rem 1.2rem;
            color: white;
            font-weight: 500;
            border-radius: 2rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-create:hover {
            background: #1d4ed8;
            transform: scale(0.97);
        }
        .empty-message {
            padding: 2rem;
            text-align: center;
            color: #64748b;
        }
    </style>
</head>
<body>
<div class="forum-app">
    <!-- шапка (дополнительно, но не мешает основной структуре) -->
    <div class="forum-header">
        <div class="logo">
            <h1>Форум<span>Community</span></h1>
            <div style="font-size: 0.7rem; color:#5b6e8c;">обсуждения, идеи, помощь</div>
        </div>
        <div class="user-greeting">
            &#128075; Привет, Алексей
        </div>
    </div>

    <div class="forum-layout">
        <!-- ЛЕВАЯ ПАНЕЛЬ: КНОПКИ ФОРУМА (фильтры / быстрые разделы) -->
        <div class="left-actions">
            <div class="nav-buttons">
                <button class="forum-btn active" data-filter="all">
                    <i>&#127968;</i> Все форумы
                </button>
                <button class="forum-btn" data-filter="tech">
                    <i>&#128187;</i> Технологии
                </button>
                <button class="forum-btn" data-filter="gaming">
                    <i>&#127918;</i> Игры
                </button>
                <button class="forum-btn" data-filter="life">
                    <i>&#9749;</i> Жизнь
                </button>
                <button class="forum-btn" data-filter="help">
                    <i>&#128736;</i> Помощь
                </button>
                <div class="divider-nav"></div>
                <button class="forum-btn" id="newTopicsBtn">
                    <i>&#10024;</i> Новые темы
                </button>
                <button class="forum-btn" id="popularBtn">
                    <i>&#128293;</i> Популярное
                </button>
            </div>
        </div>

        <!-- ЦЕНТР: СПИСОК ФОРУМОВ (основные форумы/категории) -->
        <div class="forum-list-container">
            <div class="category-header" id="categoryTitleBlock">
                <h2>
                    <span>&#128203;</span> Все разделы форума
                </h2>
                <p>Активные обсуждения, свежие ответы и сообщества</p>
            </div>
            <div id="forumsList" class="forum-items">
                <!-- динамически генерируемый список форумов через JS -->
                <div class="empty-message">Загрузка форумов...</div>
            </div>
            <div class="action-create">
                <button class="btn-create" id="createTopicBtn">&#10133; Создать новую тему</button>
            </div>
        </div>

        <!-- ПРАВАЯ ПАНЕЛЬ (инфо / виджеты / онлайн) на ваше усмотрение -->
        <div class="right-sidebar">
            <div class="widget">
                <h3>&#128101; Онлайн сейчас</h3>
                <div class="online-list" id="onlineUsersBlock">
                    <span class="online-user">AnnaTech</span>
                    <span class="online-user">GamerPro</span>
                    <span class="online-user">CoffeeLover</span>
                    <span class="online-user">DevMike</span>
                    <span class="online-user">HelperBot</span>
                </div>
            </div>
            <div class="widget stats-numbers">
                <h3>&#128202; Статистика</h3>
                <p><span>Всего тем:</span> <strong id="totalTopicsCount">0</strong></p>
                <p><span>Сообщений:</span> <strong>1 284</strong></p>
                <p><span>Пользователей:</span> <strong>342</strong></p>
            </div>
            <div class="widget">
                <h3>&#11088; Тренды</h3>
                <div class="trending-topic">• Telegram vs Discord: битва</div>
                <div class="trending-topic">• Новый фреймворк 2025</div>
                <div class="trending-topic">• Как начать стримить?</div>
                <div class="trending-topic">• Советы по работе с ИИ</div>
            </div>
            <div class="feedback">
                &#128161; Ваше предложение | FAQ
            </div>
        </div>
    </div>
</div>

<script>
    // --- МАССИВ ФОРУМОВ (с категориями для фильтрации)
    const forumsData = [
        { id: 1, name: "Разработка и IT", description: "Обсуждение языков, фреймворков, карьеры", category: "tech", topics: 342, posts: 2310, lastPost: "Вчера, 20:15",  icon: "&#128187;"  },
        { id: 2, name: "Кибербезопасность", description: "Уязвимости, этичный хакинг, защита", category: "tech", topics: 118, posts: 872, lastPost: "Сегодня, 10:42", icon: "&#128274;" },
        { id: 3, name: "Игровая площадка", description: "Обзоры, прохождения, новинки игр", category: "gaming", topics: 520, posts: 4900, lastPost: "35 мин назад", icon: "&#127918;" },
        { id: 4, name: "Киберспорт и стриминг", description: "Турниры, команды, трансляции", category: "gaming", topics: 201, posts: 1567, lastPost: "Сегодня, 08:20", icon: "&#127942;" },
        { id: 5, name: "Свободное общение", description: "О жизни, увлечениях, путешествиях", category: "life", topics: 687, posts: 5824, lastPost: "5 мин назад", icon: "&#9749;" },
        { id: 6, name: "Кулинарные рецепты", description: "Делимся рецептами, секреты шефов", category: "life", topics: 96, posts: 854, lastPost: "Вчера, 18:30", icon: "&#127858;" },
        { id: 7, name: "Техподдержка", description: "Помощь с софтом, железом, настройками", category: "help", topics: 412, posts: 2301, lastPost: "1 час назад", icon: "&#128736;" },
        { id: 8, name: "Вопросы новичков", description: "Дружелюбная помощь и ответы", category: "help", topics: 288, posts: 1405, lastPost: "Сегодня, 13:10", icon: "&#10067;" },
        { id: 9, name: "AI и будущее", description: "Нейросети, автоматизация, этика", category: "tech", topics: 147, posts: 903, lastPost: "Вчера, 22:05", icon: "&#129504;" },
        { id: 10, name: "Ретро-игры", description: "Ностальгия по классике", category: "gaming", topics: 90, posts: 687, lastPost: "2 дня назад", icon: "&#128377;" }
    ];

    // элементы DOM
    const forumsContainer = document.getElementById('forumsList');
    const categoryTitleSpan = document.querySelector('#categoryTitleBlock h2 span');
    const categoryTitleText = document.querySelector('#categoryTitleBlock h2');
    const totalTopicsSpan = document.getElementById('totalTopicsCount');
    const filterButtons = document.querySelectorAll('.forum-btn[data-filter]');
    let activeFilter = "all";       // all, tech, gaming, life, help

    // вспомогательные функции для отображения
    function computeTotalTopics(filteredArray) {
        let total = 0;
        filteredArray.forEach(forum => total += forum.topics);
        return total;
    }

    function renderForums(filterCategory) {
        let filtered = [];
        if (filterCategory === 'all') {
            filtered = [...forumsData];
        } else {
            filtered = forumsData.filter(forum => forum.category === filterCategory);
        }

        // обновляем общее количество тем в правой панели
        const totalTopics = computeTotalTopics(filtered);
        totalTopicsSpan.innerText = totalTopics;

        if (filtered.length === 0) {
            forumsContainer.innerHTML = `<div class="empty-message">&#128533; Нет форумов в этой категории. Попробуйте другой раздел!</div>`;
            return;
        }

        // генерируем HTML для каждого форума
        let html = '';
        filtered.forEach(forum => {
            html += `
                <li class="forum-row">
                    <div class="forum-info">
                        <div class="forum-name">
                            <span style="font-size:1.2rem;">${forum.icon}</span> 
                            ${forum.name}
                            <span class="forum-badge">${forum.category === 'tech' ? 'Техно' : forum.category === 'gaming' ? 'Гейминг' : forum.category === 'life' ? 'Жизнь' : 'Помощь'}</span>
                        </div>
                        <div class="forum-desc">${forum.description}</div>
                    </div>
                    <div class="forum-stats">
                        <div class="stats-item">&#128204; Тем: ${forum.topics}</div>
                        <div class="stats-item">&#128172; Ответов: ${forum.posts}</div>
                    </div>
                    <div class="last-post">
                        <span>&#128338; Последнее сообщение</span>
                        ${forum.lastPost}
                    </div>
                </li>
            `;
        });
        forumsContainer.innerHTML = `<ul class="forum-items" style="list-style: none;">${html}</ul>`;
    }

    // функция обновления заголовка центрального блока (в зависимости от фильтра)
    function updateCategoryHeader(filterVal) {
        let title = '';
        let subtitle = '';
        const categoryTitleMain = document.querySelector('#categoryTitleBlock h2');
        const categoryDescP = document.querySelector('#categoryTitleBlock p');

        switch(filterVal) {
            case 'all':
                title = '&#128203; Все разделы форума';
                subtitle = 'Активные обсуждения, свежие ответы и сообщества';
                break;
            case 'tech':
                title = '&#128187; Технологии и разработка';
                subtitle = 'Программирование, безопасность, IT-тренды';
                break;
            case 'gaming':
                title = '&#127918; Игровое комьюнити';
                subtitle = 'Игры, киберспорт, ретро и новинки';
                break;
            case 'life':
                title = '&#9749; Жизнь и увлечения';
                subtitle = 'Несерьёзные темы, рецепты, хобби';
                break;
            case 'help':
                title = '&#128736; Вопросы и помощь';
                subtitle = 'Поддержка, решения проблем, новички';
                break;
            default: title = 'Форумы'; subtitle = 'Обсуждения';
        }
        if(categoryTitleMain) {
            categoryTitleMain.innerHTML = `<span>${title.split(' ')[0]}</span> ${title.substring(title.indexOf(' ')+1)}`;
        }
        if(categoryDescP) categoryDescP.innerText = subtitle;
    }

    // обработка кликов по левым кнопкам (фильтрация)
    filterButtons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            const filterValue = this.getAttribute('data-filter');
            if(!filterValue) return;
            // обновляем активный класс
            filterButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            activeFilter = filterValue;
            renderForums(activeFilter);
            updateCategoryHeader(activeFilter);
        });
    });

    // кнопка "Новые темы" (имитация)
    document.getElementById('newTopicsBtn')?.addEventListener('click', () => {
        alert('&#128276; Здесь будет список самых свежих тем по всем форумам (демо-функция).');
        // можно расширить, но по ТЗ левая панель с кнопками — структура готова
        // Для демонстрации просто показываем уведомление
    });
    // кнопка "Популярное"
    document.getElementById('popularBtn')?.addEventListener('click', () => {
        alert('&#11088; Популярные темы за неделю: "Искусственный интеллект в играх", "Лучшие практики Python" и другие.');
    });

    // кнопка "Создать новую тему"
    const createBtn = document.getElementById('createTopicBtn');
    if(createBtn) {
        createBtn.addEventListener('click', () => {
            alert('&#10024; Открыть форму создания новой темы (демонстрация). Здесь можно добавлять обсуждения в выбранный форум.');
        });
    }

    // дополнительно: слегка оживим список онлайн пользователей (рандомный аватар показ не требуется)
    // также выводим общее количество начальных тем при загрузке
    function init() {
        renderForums('all');       // стартовый рендер всех форумов
        updateCategoryHeader('all');
        // дополнительная установка количества тем в правой панели – уже сделано внутри renderForums
        // но для красоты обновим базу
        const totalAllTopics = forumsData.reduce((sum, f) => sum + f.topics, 0);
        totalTopicsSpan.innerText = totalAllTopics;
    }

    // Можно добавить рандомное обновление статуса онлайн (просто визуально)
    function dynamicOnlineUsers() {
        const users = ['AnnaTech', 'GamerPro', 'CoffeeLover', 'DevMike', 'HelperBot', 'Alex_Dev', 'JuliCoder'];
        const randomSlice = users.sort(() => 0.5 - Math.random()).slice(0, 5);
        const onlineBlock = document.getElementById('onlineUsersBlock');
        if(onlineBlock) {
            onlineBlock.innerHTML = randomSlice.map(u => `<span class="online-user">${u}</span>`).join('');
        }
    }
    // обновляем список онлайн каждые 15 секунд для живости (опционально)
    setInterval(dynamicOnlineUsers, 15000);

    init();
</script>
</body>
</html>