Wiki Владимир:Авторские права: различия между версиями

Материал из wiki Владимир
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
<big><i><font size="5" color=ff0000><center>''' Наша команда: Железная логика'''</center></font></big><br>
<big><i><font size="5" color=ff0000><center>''' Наша команда: Железная логика'''</center></font></big><br>
<font color=#0000FF>
<font color=#0000FF>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Участники конкурса</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
       
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
       
        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            min-height: 90vh;
        }
       
        /* Левая панель с участниками */
        .participants-panel {
            width: 35%;
            background-color: #2c3e50;
            color: white;
            padding: 30px 20px;
            overflow-y: auto;
        }
       
        .participants-panel h2 {
            text-align: center;
            margin-bottom: 25px;
            font-size: 28px;
            color: #ecf0f1;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }
       
        .participant-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
       
        .participant-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
       
        .participant-item:hover {
            background-color: rgba(255, 255, 255, 0.15);
            transform: translateX(5px);
        }
       
        .participant-item.active {
            background-color: rgba(52, 152, 219, 0.3);
            border-left: 4px solid #3498db;
        }
       
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            border: 3px solid #3498db;
        }
       
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
       
        .participant-info {
            flex-grow: 1;
        }
       
        .participant-name {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 5px;
        }
       
        .participant-category {
            font-size: 14px;
            color: #bdc3c7;
        }
       
        /* Правая панель с описанием */
        .description-panel {
            width: 65%;
            padding: 40px;
            overflow-y: auto;
        }
       
        .description-panel h2 {
            color: #2c3e50;
            font-size: 32px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }
       
        .participant-category-badge {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            margin-bottom: 25px;
        }
       
        .description-content {
            margin-top: 20px;
        }
       
        .description-text {
            line-height: 1.6;
            font-size: 16px;
            margin-bottom: 25px;
            color: #555;
        }
       
        .participant-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
       
        .detail-item {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }
       
        .detail-item h4 {
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 16px;
        }
       
        .detail-item p {
            color: #666;
            font-size: 14px;
        }
       
        .participant-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
       
        .stat-item {
            text-align: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
            flex: 1;
            margin: 0 10px;
        }
       
        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
        }
       
        .stat-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 5px;
        }
       
        .no-selection {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #7f8c8d;
            text-align: center;
        }
       
        .no-selection i {
            font-size: 60px;
            margin-bottom: 20px;
            color: #bdc3c7;
        }
       
        .no-selection h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }
       
        /* Адаптивность */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
                max-width: 95%;
            }
           
            .participants-panel, .description-panel {
                width: 100%;
            }
           
            .participants-panel {
                max-height: 40vh;
            }
           
            .description-panel {
                max-height: 60vh;
            }
           
            .participant-details {
                grid-template-columns: 1fr;
            }
        }
       
        @media (max-width: 576px) {
            .participant-stats {
                flex-direction: column;
                gap: 15px;
            }
           
            .stat-item {
                margin: 0;
            }
           
            .description-panel {
                padding: 25px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Левая панель с участниками -->
        <div class="participants-panel">
            <h2>Участники конкурса</h2>
            <div class="participant-list">
                <!-- Участник 1 -->
                <div class="participant-item active" data-id="1">
                    <div class="avatar">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Александр Петров">
                    </div>
                    <div class="participant-info">
                        <div class="participant-name">Александр Петров</div>
                        <div class="participant-category">Дизайн интерьеров</div>
                    </div>
                </div>
               
                <!-- Участник 2 -->
                <div class="participant-item" data-id="2">
                    <div class="avatar">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Мария Смирнова">
                    </div>
                    <div class="participant-info">
                        <div class="participant-name">Мария Смирнова</div>
                        <div class="participant-category">Графический дизайн</div>
                    </div>
                </div>
               
                <!-- Участник 3 -->
                <div class="participant-item" data-id="3">
                    <div class="avatar">
                        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Дмитрий Иванов">
                    </div>
                    <div class="participant-info">
                        <div class="participant-name">Дмитрий Иванов</div>
                        <div class="participant-category">Веб-разработка</div>
                    </div>
                </div>
               
                <!-- Участник 4 -->
                <div class="participant-item" data-id="4">
                    <div class="avatar">
                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Екатерина Козлова">
                    </div>
                    <div class="participant-info">
                        <div class="participant-name">Екатерина Козлова</div>
                        <div class="participant-category">Фотография</div>
                    </div>
                </div>
               
                <!-- Участник 5 -->
                <div class="participant-item" data-id="5">
                    <div class="avatar">
                        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Илья Соколов">
                    </div>
                    <div class="participant-info">
                        <div class="participant-name">Илья Соколов</div>
                        <div class="participant-category">Видеомонтаж</div>
                    </div>
                </div>
            </div>
        </div>
       
        <!-- Правая панель с описанием -->
        <div class="description-panel">
            <!-- Первый участник выбран по умолчанию -->
            <div id="description-1" class="participant-description">
                <h2>Александр Петров</h2>
                <div class="participant-category-badge">Дизайн интерьеров</div>
               
                <div class="description-content">
                    <div class="description-text">
                        Александр — талантливый дизайнер интерьеров с более чем 10-летним опытом работы.
                        Специализируется на создании современных жилых и коммерческих пространств,
                        сочетающих функциональность и эстетику. Его работы отмечены несколькими
                        профессиональными наградами в области дизайна.
                    </div>
                   
                    <div class="participant-details">
                        <div class="detail-item">
                            <h4>Образование</h4>
                            <p>Московский архитектурный институт, факультет дизайна интерьеров</p>
                        </div>
                        <div class="detail-item">
                            <h4>Опыт работы</h4>
                            <p>12 лет в сфере дизайна интерьеров, 5 лет преподавания</p>
                        </div>
                        <div class="detail-item">
                            <h4>Специализация</h4>
                            <p>Жилые интерьеры, офисные пространства, рестораны и кафе</p>
                        </div>
                        <div class="detail-item">
                            <h4>Награды</h4>
                            <p>3 премии "Дизайнер года", 2 золотых медали на международных выставках</p>
                        </div>
                    </div>
                   
                    <div class="participant-stats">
                        <div class="stat-item">
                            <div class="stat-value">150+</div>
                            <div class="stat-label">Завершенных проектов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">98%</div>
                            <div class="stat-label">Довольных клиентов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">12</div>
                            <div class="stat-label">Профессиональных наград</div>
                        </div>
                    </div>
                </div>
            </div>
           
            <!-- Описания остальных участников (скрыты по умолчанию) -->
            <div id="description-2" class="participant-description" style="display: none;">
                <h2>Мария Смирнова</h2>
                <div class="participant-category-badge">Графический дизайн</div>
               
                <div class="description-content">
                    <div class="description-text">
                        Мария — креативный графический дизайнер с уникальным чувством стиля и цвета.
                        Она создает визуальные идентификации для брендов, разрабатывает упаковку
                        и рекламные материалы. Её работы отличаются чистотой линий и концептуальной
                        целостностью.
                    </div>
                   
                    <div class="participant-details">
                        <div class="detail-item">
                            <h4>Образование</h4>
                            <p>Британская высшая школа дизайна, курс графического дизайна</p>
                        </div>
                        <div class="detail-item">
                            <h4>Опыт работы</h4>
                            <p>8 лет в графическом дизайне, 3 года арт-директор в студии</p>
                        </div>
                        <div class="detail-item">
                            <h4>Специализация</h4>
                            <p>Брендинг, айдентика, дизайн упаковки, иллюстрация</p>
                        </div>
                        <div class="detail-item">
                            <h4>Награды</h4>
                            <p>Победитель конкурса Red Dot Award, финалист ADC Awards</p>
                        </div>
                    </div>
                   
                    <div class="participant-stats">
                        <div class="stat-item">
                            <div class="stat-value">80+</div>
                            <div class="stat-label">Брендовых проектов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">95%</div>
                            <div class="stat-label">Рост узнаваемости брендов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">7</div>
                            <div class="stat-label">Международных наград</div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div id="description-3" class="participant-description" style="display: none;">
                <h2>Дмитрий Иванов</h2>
                <div class="participant-category-badge">Веб-разработка</div>
               
                <div class="description-content">
                    <div class="description-text">
                        Дмитрий — senior full-stack разработчик с глубокими знаниями современных
                        технологий. Специализируется на создании высоконагруженных веб-приложений
                        и сложных интерфейсов. Его код отличается чистотой, эффективностью и
                        масштабируемостью.
                    </div>
                   
                    <div class="participant-details">
                        <div class="detail-item">
                            <h4>Образование</h4>
                            <p>МГТУ им. Баумана, факультет информатики и систем управления</p>
                        </div>
                        <div class="detail-item">
                            <h4>Опыт работы</h4>
                            <p>10 лет в веб-разработке, ведущий разработчик в IT-компании</p>
                        </div>
                        <div class="detail-item">
                            <h4>Специализация</h4>
                            <p>React, Node.js, Python, базы данных, микросервисная архитектура</p>
                        </div>
                        <div class="detail-item">
                            <h4>Достижения</h4>
                            <p>Автор 5 популярных open-source проектов на GitHub</p>
                        </div>
                    </div>
                   
                    <div class="participant-stats">
                        <div class="stat-item">
                            <div class="stat-value">200+</div>
                            <div class="stat-label">Разработанных проектов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">99.9%</div>
                            <div class="stat-label">Доступность систем</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">15k+</div>
                            <div class="stat-label">Звёзд на GitHub</div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div id="description-4" class="participant-description" style="display: none;">
                <h2>Екатерина Козлова</h2>
                <div class="participant-category-badge">Фотография</div>
               
                <div class="description-content">
                    <div class="description-text">
                        Екатерина — профессиональный фотограф с художественным образованием.
                        Специализируется на fashion и портретной фотографии. Её работы публиковались
                        в ведущих глянцевых изданиях и выставлялись на международных фотовыставках.
                    </div>
                   
                    <div class="participant-details">
                        <div class="detail-item">
                            <h4>Образование</h4>
                            <p>Санкт-Петербургская академия художеств, курс фотографии</p>
                        </div>
                        <div class="detail-item">
                            <h4>Опыт работы</h4>
                            <p>7 лет в профессиональной фотографии, сотрудничество с модными брендами</p>
                        </div>
                        <div class="detail-item">
                            <h4>Специализация</h4>
                            <p>Fashion-фотография, портреты, художественная фотография</p>
                        </div>
                        <div class="detail-item">
                            <h4>Публикации</h4>
                            <p>Работы опубликованы в Vogue, Harper's Bazaar, Elle</p>
                        </div>
                    </div>
                   
                    <div class="participant-stats">
                        <div class="stat-item">
                            <div class="stat-value">50+</div>
                            <div class="stat-label">Модных съёмок</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">12</div>
                            <div class="stat-label">Выставок фотографии</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">100+</div>
                            <div class="stat-label">Публикаций в журналах</div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div id="description-5" class="participant-description" style="display: none;">
                <h2>Илья Соколов</h2>
                <div class="participant-category-badge">Видеомонтаж</div>
               
                <div class="description-content">
                    <div class="description-text">
                        Илья — видеомонтажер и режиссёр монтажа с уникальным чувством ритма и повествования.
                        Работает над музыкальными клипами, рекламными роликами и короткометражными фильмами.
                        Его монтаж отличается динамикой и эмоциональной насыщенностью.
                    </div>
                   
                    <div class="participant-details">
                        <div class="detail-item">
                            <h4>Образование</h4>
                            <p>ВГИК, факультет режиссуры и монтажа</p>
                        </div>
                        <div class="detail-item">
                            <h4>Опыт работы</h4>
                            <p>9 лет в видеомонтаже, работа на телеканалах и в продакшн-студиях</p>
                        </div>
                        <div class="detail-item">
                            <h4>Специализация</h4>
                            <p>Музыкальные клипы, реклама, короткометражное кино, документалистика</p>
                        </div>
                        <div class="detail-item">
                            <h4>Награды</h4>
                            <p>Победитель фестиваля "Кинотавр" в номинации "Лучший монтаж"</p>
                        </div>
                    </div>
                   
                    <div class="participant-stats">
                        <div class="stat-item">
                            <div class="stat-value">300+</div>
                            <div class="stat-label">Смонтированных видео</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">50+</div>
                            <div class="stat-label">Музыкальных клипов</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">8</div>
                            <div class="stat-label">Кинофестивальных наград</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const participantItems = document.querySelectorAll('.participant-item');
            const participantDescriptions = document.querySelectorAll('.participant-description');
           
            // Функция для переключения активного участника
            function setActiveParticipant(participantId) {
                // Убираем активный класс у всех участников
                participantItems.forEach(item => {
                    item.classList.remove('active');
                });
               
                // Добавляем активный класс выбранному участнику
                const selectedItem = document.querySelector(`.participant-item[data-id="${participantId}"]`);
                selectedItem.classList.add('active');
               
                // Скрываем все описания
                participantDescriptions.forEach(desc => {
                    desc.style.display = 'none';
                });
               
                // Показываем описание выбранного участника
                const selectedDescription = document.getElementById(`description-${participantId}`);
                selectedDescription.style.display = 'block';
            }
           
            // Добавляем обработчики событий для каждого участника
            participantItems.forEach(item => {
                item.addEventListener('click', function() {
                    const participantId = this.getAttribute('data-id');
                    setActiveParticipant(participantId);
                });
            });
           
            // Инициализация с первым активным участником
            setActiveParticipant(1);
        });
    </script>
</body>
</html>

Версия 07:22, 5 февраля 2026

Наша команда: Железная логика


<!DOCTYPE html> <html lang="ru"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Участники конкурса</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       }
       
       body {
           background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
           color: #333;
           min-height: 100vh;
           padding: 20px;
       }
       
       .container {
           display: flex;
           max-width: 1400px;
           margin: 0 auto;
           background-color: white;
           border-radius: 15px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           min-height: 90vh;
       }
       
       /* Левая панель с участниками */
       .participants-panel {
           width: 35%;
           background-color: #2c3e50;
           color: white;
           padding: 30px 20px;
           overflow-y: auto;
       }
       
       .participants-panel h2 {
           text-align: center;
           margin-bottom: 25px;
           font-size: 28px;
           color: #ecf0f1;
           padding-bottom: 15px;
           border-bottom: 2px solid #3498db;
       }
       
       .participant-list {
           display: flex;
           flex-direction: column;
           gap: 15px;
       }
       
       .participant-item {
           display: flex;
           align-items: center;
           padding: 15px;
           background-color: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
           cursor: pointer;
           transition: all 0.3s ease;
           border-left: 4px solid transparent;
       }
       
       .participant-item:hover {
           background-color: rgba(255, 255, 255, 0.15);
           transform: translateX(5px);
       }
       
       .participant-item.active {
           background-color: rgba(52, 152, 219, 0.3);
           border-left: 4px solid #3498db;
       }
       
       .avatar {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           overflow: hidden;
           margin-right: 15px;
           border: 3px solid #3498db;
       }
       
       .avatar img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }
       
       .participant-info {
           flex-grow: 1;
       }
       
       .participant-name {
           font-weight: 600;
           font-size: 18px;
           margin-bottom: 5px;
       }
       
       .participant-category {
           font-size: 14px;
           color: #bdc3c7;
       }
       
       /* Правая панель с описанием */
       .description-panel {
           width: 65%;
           padding: 40px;
           overflow-y: auto;
       }
       
       .description-panel h2 {
           color: #2c3e50;
           font-size: 32px;
           margin-bottom: 10px;
           padding-bottom: 10px;
           border-bottom: 2px solid #3498db;
       }
       
       .participant-category-badge {
           display: inline-block;
           background-color: #3498db;
           color: white;
           padding: 5px 15px;
           border-radius: 20px;
           font-size: 14px;
           margin-bottom: 25px;
       }
       
       .description-content {
           margin-top: 20px;
       }
       
       .description-text {
           line-height: 1.6;
           font-size: 16px;
           margin-bottom: 25px;
           color: #555;
       }
       
       .participant-details {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
           margin-bottom: 30px;
       }
       
       .detail-item {
           background-color: #f8f9fa;
           padding: 15px;
           border-radius: 8px;
           border-left: 4px solid #3498db;
       }
       
       .detail-item h4 {
           color: #2c3e50;
           margin-bottom: 8px;
           font-size: 16px;
       }
       
       .detail-item p {
           color: #666;
           font-size: 14px;
       }
       
       .participant-stats {
           display: flex;
           justify-content: space-between;
           margin-top: 30px;
       }
       
       .stat-item {
           text-align: center;
           padding: 15px;
           background-color: #f8f9fa;
           border-radius: 10px;
           flex: 1;
           margin: 0 10px;
       }
       
       .stat-value {
           font-size: 28px;
           font-weight: 700;
           color: #2c3e50;
       }
       
       .stat-label {
           font-size: 14px;
           color: #7f8c8d;
           margin-top: 5px;
       }
       
       .no-selection {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           height: 100%;
           color: #7f8c8d;
           text-align: center;
       }
       
       .no-selection i {
           font-size: 60px;
           margin-bottom: 20px;
           color: #bdc3c7;
       }
       
       .no-selection h3 {
           font-size: 24px;
           margin-bottom: 10px;
       }
       
       /* Адаптивность */
       @media (max-width: 992px) {
           .container {
               flex-direction: column;
               max-width: 95%;
           }
           
           .participants-panel, .description-panel {
               width: 100%;
           }
           
           .participants-panel {
               max-height: 40vh;
           }
           
           .description-panel {
               max-height: 60vh;
           }
           
           .participant-details {
               grid-template-columns: 1fr;
           }
       }
       
       @media (max-width: 576px) {
           .participant-stats {
               flex-direction: column;
               gap: 15px;
           }
           
           .stat-item {
               margin: 0;
           }
           
           .description-panel {
               padding: 25px;
           }
       }
   </style>

</head> <body>

Участники конкурса

                       <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Александр Петров">
Александр Петров
Дизайн интерьеров
                       <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Мария Смирнова">
Мария Смирнова
Графический дизайн
                       <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Дмитрий Иванов">
Дмитрий Иванов
Веб-разработка
                       <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Екатерина Козлова">
Екатерина Козлова
Фотография
                       <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Илья Соколов">
Илья Соколов
Видеомонтаж

Александр Петров

Дизайн интерьеров
                       Александр — талантливый дизайнер интерьеров с более чем 10-летним опытом работы. 
                       Специализируется на создании современных жилых и коммерческих пространств, 
                       сочетающих функциональность и эстетику. Его работы отмечены несколькими 
                       профессиональными наградами в области дизайна.

Образование

Московский архитектурный институт, факультет дизайна интерьеров

Опыт работы

12 лет в сфере дизайна интерьеров, 5 лет преподавания

Специализация

Жилые интерьеры, офисные пространства, рестораны и кафе

Награды

3 премии "Дизайнер года", 2 золотых медали на международных выставках

150+
Завершенных проектов
98%
Довольных клиентов
12
Профессиональных наград
   <script>
       document.addEventListener('DOMContentLoaded', function() {
           const participantItems = document.querySelectorAll('.participant-item');
           const participantDescriptions = document.querySelectorAll('.participant-description');
           
           // Функция для переключения активного участника
           function setActiveParticipant(participantId) {
               // Убираем активный класс у всех участников
               participantItems.forEach(item => {
                   item.classList.remove('active');
               });
               
               // Добавляем активный класс выбранному участнику
               const selectedItem = document.querySelector(`.participant-item[data-id="${participantId}"]`);
               selectedItem.classList.add('active');
               
               // Скрываем все описания
               participantDescriptions.forEach(desc => {
                   desc.style.display = 'none';
               });
               
               // Показываем описание выбранного участника
               const selectedDescription = document.getElementById(`description-${participantId}`);
               selectedDescription.style.display = 'block';
           }
           
           // Добавляем обработчики событий для каждого участника
           participantItems.forEach(item => {
               item.addEventListener('click', function() {
                   const participantId = this.getAttribute('data-id');
                   setActiveParticipant(participantId);
               });
           });
           
           // Инициализация с первым активным участником
           setActiveParticipant(1);
       });
   </script>

</body> </html>

Источник — https://wiki.i-edu.ru/mediawiki/index.php?title=Wiki_Владимир:Авторские_права&oldid=76482