|
|
| Строка 1: |
Строка 1: |
| <!DOCTYPE html>
| | {{Страница турнира Осиповского-2026}} |
| <html lang="ru">
| | <big><i><font size="5" color=ff0000><center>''' Наша команда: Железная команда'''</center></font></big><br> |
| <head>
| | <font color=#0000FF> |
| <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> | |
