Раздел навигации

Новые сообщения

Добро пожаловать!

lucifer ledyanoy · 2026-03-09T16:48:54+00:00

Состав редакции сервера Москва /* Минимальные стили для body, чтобы страница выглядела нормально */ body { margin: 0; padding: 0; background: transparent; /* Прозрачный фон */ min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; } /* Контейнер для Shadow DOM занимает всю ширину */ #spring-edition-host { width: 100%; min-height: 100vh; position: relative; } /* Загрузочный индикатор на случай медленной загрузки */ .loading { color: #333; text-align: center; padding: 50px; font-size: 1.2rem; } 🌸 Загружаем весеннюю редакцию... (function() { // Данные сотрудников (полностью изолированы внутри Shadow DOM) const teamData = { sections: [ { id: "curator", title: "Куратор Отделов", positionType: "curator", members: [ { name: "Nursultan_Jomart", position: "Куратор Отдела", quote: "Вдохновляю команду на новые свершения и слежу за общим настроением", vk: "n.jomart", forum: "3276", avatar: "https://forum.keeper-nexus.com/data/avatars/o/3/3276.jpg?1772795202" } ] }, { id: "curator", title: "Заместитель Куратора Отделов", positionType: "curator", members: [ { name: "omar suvorov", position: "Заместитель Куратора Отделов", quote: "Вдохновляю команду на новые свершения и слежу за общим настроением", vk: "k_5504", forum: "534", avatar: "https://forum.keeper-nexus.com/data/avatars/o/0/534.jpg?1769970164" } ] }, { id: "chief-editor", title: "Руководство редакции", positionType: "chief", members: [ { name: "lucifer ledyanoy", position: "Главный Редактор", quote: "Маленькие шаги ведут к великому 🌍", vk: "tricknight", forum: "1640", avatar: "https://forum.keeper-nexus.com/data/avatars/o/1/1640.jpg?1772053373" } ] }, { name: "Spencer_Majestic", position: "Заместитель Главного Редактора", quote: "Координирую процессы и помогаю воплощать идеи в жизнь", vk: "hakari_ll", forum: "3305", avatar: "https://forum.keeper-nexus.com/data/avatars/o/3/3305.jpg?1772195183" } ] }, { id: "news-editor", title: "Редакторы Новостей", positionType: "editor", members: [ { name: "Evgenya_Nesterova", position: "Редактор Новостей", quote: "парам пам", vk: "id685212499", forum: "3604", avatar: "https://forum.keeper-nexus.com/data/avatars/o/3/3604.jpg?1772373349" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" }, { name: "", position: "Редактор Новостей", quote: "", vk: "", forum: "", avatar: "" } ] } ] }; // Функция для создания Shadow DOM и рендеринга всего приложения function initShadowApp() { const host = document.getElementById('spring-edition-host'); if (!host) return; // Очищаем хост от загрузочного сообщения host.innerHTML = ''; // Создаём Shadow root с режимом open const shadowRoot = host.attachShadow({ mode: 'open' }); // Создаём контейнер для всего приложения внутри Shadow DOM const appContainer = document.createElement('div'); appContainer.id = 'spring-edition-shadow-app'; shadowRoot.appendChild(appContainer); // Все стили будут жить внутри Shadow DOM - полная изоляция const styleElement = document.createElement('style'); styleElement.textContent = ` /* Сброс стилей внутри Shadow DOM */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Импорт шрифта */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap'); :host { all: initial; display: block; font-family: 'Inter', sans-serif; } #spring-edition-shadow-app { width: 100%; min-height: 100vh; color: #f0f0f0; padding: 40px 20px; position: relative; z-index: 10; background: transparent; /* Полностью прозрачный фон */ font-family: 'Inter', sans-serif; overflow-x: hidden; } /* Аккуратно падающие лепестки - улучшенная анимация */ .petal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: hidden; } .petal { position: absolute; color: rgba(255, 200, 220, 0.4); font-size: 1.2rem; animation: fallAdvanced linear infinite; user-select: none; opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 200, 220, 0.3)); } @keyframes fallAdvanced { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg) scale(1); opacity: 0; } 5% { opacity: 0.6; transform: translateY(-5vh) translateX(5px) rotate(10deg) scale(1.1); } 25% { transform: translateY(20vh) translateX(10px) rotate(45deg) scale(1); } 50% { transform: translateY(45vh) translateX(-10px) rotate(90deg) scale(0.9); } 75% { transform: translateY(70vh) translateX(15px) rotate(180deg) scale(1.1); } 95% { opacity: 0.4; transform: translateY(95vh) translateX(-5px) rotate(270deg) scale(0.8); } 100% { transform: translateY(110vh) translateX(0) rotate(360deg) scale(1); opacity: 0; } } /* Декоративные цветочные уголки с улучшенной анимацией */ .flower-corner { position: fixed; font-size: 5rem; opacity: 0.15; pointer-events: none; z-index: 4; animation: gentleFloatAdvanced 8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)); color: #aaa; } .flower-tl { top: 10px; left: 10px; transform: rotate(-10deg); } .flower-tr { top: 10px; right: 10px; transform: rotate(10deg); } .flower-bl { bottom: 10px; left: 10px; transform: rotate(170deg); } .flower-br { bottom: 10px; right: 10px; transform: rotate(190deg); } @keyframes gentleFloatAdvanced { 0%, 100% { transform: rotate(-10deg) translateY(0) scale(1); filter: drop-shadow(0 0 5px rgba(255, 200, 220, 0.2)); } 25% { transform: rotate(-5deg) translateY(-8px) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 200, 220, 0.4)); } 50% { transform: rotate(-8deg) translateY(-12px) scale(1.1); filter: drop-shadow(0 0 20px rgba(255, 200, 220, 0.5)); } 75% { transform: rotate(-3deg) translateY(-5px) scale(1.02); filter: drop-shadow(0 0 10px rgba(255, 200, 220, 0.3)); } } .flower-tr { animation: gentleFloatReverseAdvanced 8s ease-in-out infinite; } .flower-bl { animation: gentleFloatBLAdvanced 8s ease-in-out infinite; } .flower-br { animation: gentleFloatBRAdvanced 8s ease-in-out infinite; } @keyframes gentleFloatReverseAdvanced { 0%, 100% { transform: rotate(10deg) translateY(0) scale(1); } 25% { transform: rotate(15deg) translateY(-8px) scale(1.05); } 50% { transform: rotate(12deg) translateY(-12px) scale(1.1); } 75% { transform: rotate(17deg) translateY(-5px) scale(1.02); } } @keyframes gentleFloatBLAdvanced { 0%, 100% { transform: rotate(170deg) translateY(0) scale(1); } 25% { transform: rotate(165deg) translateY(-8px) scale(1.05); } 50% { transform: rotate(168deg) translateY(-12px) scale(1.1); } 75% { transform: rotate(163deg) translateY(-5px) scale(1.02); } } @keyframes gentleFloatBRAdvanced { 0%, 100% { transform: rotate(190deg) translateY(0) scale(1); } 25% { transform: rotate(195deg) translateY(-8px) scale(1.05); } 50% { transform: rotate(192deg) translateY(-12px) scale(1.1); } 75% { transform: rotate(197deg) translateY(-5px) scale(1.02); } } /* Основной контент */ .content { max-width: 1400px; margin: 0 auto; position: relative; z-index: 20; text-align: center; } /* Заголовок с улучшенной анимацией */ .main-title { font-size: 3.5rem; font-weight: 800; text-align: center; margin-bottom: 20px; background: linear-gradient(135deg, #d4af37, #b76e79, #9b6b9b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 2px; text-shadow: 0 0 30px rgba(255, 215, 0, 0.3); position: relative; display: inline-block; width: 100%; animation: titleGlow 3s ease-in-out infinite; } @keyframes titleGlow { 0%, 100% { filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3)); } 50% { filter: drop-shadow(0 0 40px rgba(183, 110, 121, 0.5)); } } .main-title::before { content: '🌸'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.8; animation: flowerSway 3s ease-in-out infinite; color: #ffb6c1; } .main-title::after { content: '🌼'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.8; animation: flowerSway 3s ease-in-out infinite reverse; color: #ffd700; } @keyframes flowerSway { 0%, 100% { transform: translateY(-50%) rotate(-15deg) scale(1); } 25% { transform: translateY(-60%) rotate(0deg) scale(1.1); } 50% { transform: translateY(-50%) rotate(15deg) scale(1.2); } 75% { transform: translateY(-40%) rotate(0deg) scale(1.1); } } .main-title span { display: inline-block; margin: 0 15px; animation: bounce 2s infinite; } @keyframes bounce { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-8px); } 50% { transform: translateY(-12px); } 75% { transform: translateY(-5px); } } .subtitle { font-size: 1.2rem; color: #ccc; margin-bottom: 50px; font-style: italic; background: rgba(30, 30, 30, 0.3); display: inline-block; padding: 12px 40px; border-radius: 50px; backdrop-filter: blur(5px); border: 2px solid rgba(212, 175, 55, 0.3); position: relative; animation: subtitlePulse 2s ease-in-out infinite; } @keyframes subtitlePulse { 0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); } 50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.4); } } .subtitle::before { content: '🌿'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; opacity: 0.8; animation: leafWave 2s ease-in-out infinite; } .subtitle::after { content: '🍃'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; opacity: 0.8; animation: leafWave 2s ease-in-out infinite reverse; } @keyframes leafWave { 0%,100% { transform: translateY(-50%) rotate(0deg); } 25% { transform: translateY(-60%) rotate(10deg); } 50% { transform: translateY(-50%) rotate(20deg); } 75% { transform: translateY(-40%) rotate(10deg); } } /* Навигация */ .nav-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin: 40px 0 60px; } .filter-btn { background: rgba(40, 40, 40, 0.7); backdrop-filter: blur(10px); border: 2px solid #d4af37; border-radius: 40px; padding: 12px 28px; font-weight: 600; font-size: 1rem; color: #f0f0f0; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); letter-spacing: 1px; text-transform: uppercase; position: relative; overflow: hidden; animation: btnFloat 4s ease-in-out infinite; } @keyframes btnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .filter-btn:nth-child(1) { animation-delay: 0s; } .filter-btn:nth-child(2) { animation-delay: 0.2s; } .filter-btn:nth-child(3) { animation-delay: 0.4s; } .filter-btn:nth-child(4) { animation-delay: 0.6s; } .filter-btn:nth-child(5) { animation-delay: 0.8s; } .filter-btn::before { content: '🌸'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); font-size: 1rem; opacity: 0; transition: all 0.4s ease; } .filter-btn::after { content: '🌼'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 1rem; opacity: 0; transition: all 0.4s ease; } .filter-btn.active::before, .filter-btn:hover::before { left: 5px; opacity: 0.8; animation: spin 0.6s ease; } .filter-btn.active::after, .filter-btn:hover::after { right: 5px; opacity: 0.8; animation: spin 0.6s ease reverse; } @keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } .filter-btn.active, .filter-btn:hover { background: #d4af37; border-color: #f0f0f0; color: #1a1a1a; transform: translateY(-5px) scale(1.05); box-shadow: 0 0 40px #d4af37; padding-left: 40px; padding-right: 40px; } /* Секции */ .department-section { margin: 80px 0; transition: opacity 0.5s ease; } .department-section.hidden { display: none; } .section-title { font-size: 2.4rem; font-weight: 700; margin-bottom: 40px; padding: 0 20px 15px; display: inline-block; color: #f0f0f0; border-bottom: 3px solid; text-shadow: 0 0 20px currentColor; position: relative; animation: titleSlideIn 0.8s ease-out; } @keyframes titleSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } .department-section[data-section="curator"] .section-title { color: #ffb6c1; border-bottom-color: #d88a8a; } .department-section[data-section="chief"] .section-title { color: #b0e0b0; border-bottom-color: #7aa87a; } .department-section[data-section="editor"] .section-title { color: #ffb347; border-bottom-color: #ff8c1a; } .section-title::before { content: '🌱'; position: absolute; left: -35px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; opacity: 0.8; animation: growRotateAdvanced 3s ease-in-out infinite; } .section-title::after { content: '🌿'; position: absolute; right: -35px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; opacity: 0.8; animation: growRotateAdvanced 3s ease-in-out infinite reverse; } @keyframes growRotateAdvanced { 0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); } 25% { transform: translateY(-60%) scale(1.2) rotate(15deg); } 50% { transform: translateY(-50%) scale(1.4) rotate(30deg); } 75% { transform: translateY(-40%) scale(1.2) rotate(15deg); } } /* Сетка карточек */ .cards-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; align-items: stretch; } /* Карточка сотрудника - тёмные версии */ .member-card { width: 300px; border-radius: 60px 60px 40px 40px; padding: 25px 20px 20px; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.375); display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; min-height: 520px; animation: cardAppear 0.6s ease-out backwards; } @keyframes cardAppear { from { opacity: 0; transform: translateY(50px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } .member-card:nth-child(1) { animation-delay: 0.1s; } .member-card:nth-child(2) { animation-delay: 0.2s; } .member-card:nth-child(3) { animation-delay: 0.3s; } .member-card:nth-child(4) { animation-delay: 0.4s; } .member-card:nth-child(5) { animation-delay: 0.5s; } /* Цветочные уголки на карточках с анимацией */ .member-card::before { content: '🌸'; position: absolute; top: 10px; left: 10px; font-size: 1.2rem; opacity: 0.3; transition: all 0.4s ease; z-index: 1; animation: flowerSpin 6s linear infinite; } .member-card::after { content: '🌼'; position: absolute; bottom: 10px; right: 10px; font-size: 1.2rem; opacity: 0.3; transition: all 0.4s ease; z-index: 1; animation: flowerSpin 6s linear infinite reverse; } .flower-corner-card { position: absolute; font-size: 1rem; opacity: 0.25; transition: all 0.4s ease; z-index: 1; animation: flowerSpin 8s linear infinite; pointer-events: none; } .fc-tr { top: 10px; right: 10px; animation: flowerSpin 8s linear infinite reverse; } .fc-bl { bottom: 10px; left: 10px; animation: flowerSpin 8s linear infinite; } @keyframes flowerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .member-card:hover::before { opacity: 0.9; transform: rotate(360deg) scale(1.5); top: 5px; left: 5px; animation: none; } .member-card:hover::after { opacity: 0.9; transform: rotate(-360deg) scale(1.5); bottom: 5px; right: 5px; animation: none; } .member-card:hover .flower-corner-card.fc-tr { opacity: 0.8; transform: rotate(-360deg) scale(1.4); top: 5px; right: 5px; animation: none; } .member-card:hover .flower-corner-card.fc-bl { opacity: 0.8; transform: rotate(360deg) scale(1.4); bottom: 5px; left: 5px; animation: none; } /* Цвета карточек - тёмные пастельные тона */ .member-card[data-position="curator"] { background: #3a2a2a; /* Тёмный розово-коричневый */ border: 4px solid #d88a8a; } .member-card[data-position="chief"] { background: #2a3a2a; /* Тёмный зелёный */ border: 4px solid #7aa87a; } .member-card[data-position="editor"] { background: #3a322a; /* Тёмный оранжево-коричневый */ border: 4px solid #ff8c1a; } .member-card:hover { transform: translateY(-18px) scale(1.05); border-width: 6px; } /* СВЕЧЕНИЕ КАРТОЧЕК ПРИ НАВЕДЕНИИ */ .member-card[data-position="curator"]:hover { box-shadow: 0 40px 50px -15px #000, 0 0 50px #d88a8a; } .member-card[data-position="chief"]:hover, .member-card[data-position="deputy"]:hover { box-shadow: 0 40px 50px -15px #000, 0 0 50px #7aa87a; } .member-card[data-position="editor"]:hover { box-shadow: 0 40px 50px -15px #000, 0 0 50px #ff8c1a; } .avatar-wrapper { width: 140px; height: 140px; border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; overflow: hidden; margin-bottom: 20px; border: 4px solid rgba(255, 255, 255, 0.3); transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); background: #4a4a4a; position: relative; animation: avatarFloat 3s ease-in-out infinite; } @keyframes avatarFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-2deg); } 75% { transform: translateY(-3px) rotate(1deg); } } .avatar-wrapper::before { content: '✨'; position: absolute; top: -10px; right: -10px; font-size: 1.5rem; opacity: 0; transition: all 0.4s ease; animation: sparkle 2s ease-in-out infinite; } @keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0; } 50% { transform: scale(1.5) rotate(15deg); opacity: 0.8; } } .member-card:hover .avatar-wrapper::before { opacity: 0.9; top: -15px; right: -15px; animation: sparkle 1s ease-in-out infinite; } .member-card:hover .avatar-wrapper { transform: scale(1.1) rotate(8deg) translateY(-5px); border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%; border-color: rgba(255, 255, 255, 0.6); animation: none; } /* СВЕЧЕНИЕ АВАТАРКИ ПРИ НАВЕДЕНИИ */ .member-card[data-position="curator"]:hover .avatar-wrapper { box-shadow: 0 0 50px #d88a8a; } .member-card[data-position="chief"]:hover .avatar-wrapper, .member-card[data-position="deputy"]:hover .avatar-wrapper { box-shadow: 0 0 50px #7aa87a; } .member-card[data-position="editor"]:hover .avatar-wrapper { box-shadow: 0 0 50px #ff8c1a; } .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-fallback { width: 100%; height: 100%; background: #3a4a3a; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #c0d0c0; } .member-name { font-size: 1.6rem; font-weight: 700; margin: 8px 0 5px; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); position: relative; display: inline-block; transition: transform 0.3s ease; } .member-name::before, .member-name::after { display: none; content: none; } .member-card:hover .member-name { transform: scale(1.1); } .member-card[data-position="curator"] .member-name { color: #ffb6c1; } .member-card[data-position="chief"] .member-name, .member-card[data-position="deputy"] .member-name { color: #b0e0b0; } .member-card[data-position="editor"] .member-name { color: #ffb347; } .member-position { font-size: 1rem; background: rgba(0, 0, 0, 0.5); padding: 8px 20px; border-radius: 40px; color: #f0f0f0; border: 2px solid rgba(255, 255, 255, 0.2); margin: 12px 0; font-weight: 600; backdrop-filter: blur(2px); position: relative; overflow: hidden; transition: all 0.4s ease; } .member-position::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.6s ease; } .member-card:hover .member-position { transform: scale(1.05); border-color: rgba(255, 255, 255, 0.4); } .member-card:hover .member-position::before { left: 100%; } .social-links { display: flex; justify-content: center; gap: 20px; margin: 15px 0; } .social-link { background: rgba(0, 0, 0, 0.4); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.375); text-decoration: none; position: relative; overflow: hidden; animation: socialPulse 2s ease-in-out infinite; } @keyframes socialPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .social-link:nth-child(1) { animation-delay: 0s; } .social-link:nth-child(2) { animation-delay: 0.2s; } .vk-icon { width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A76A8'%3E%3Cpath d='M15.684 0H8.316C2.834 0 0 2.834 0 8.316v7.368C0 21.166 2.834 24 8.316 24h7.368C21.166 24 24 21.166 24 15.684V8.316C24 2.834 21.166 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.036-1.003-1.492-1.13-1.744-1.13-.356 0-.457.102-.457.593v1.56c0 .424-.136.678-1.254.678-1.847 0-3.886-1.118-5.313-3.22-2.21-3.114-2.814-5.452-2.814-5.93 0-.254.102-.491.576-.491h1.745c.44 0 .61.203.78.678.864 2.422 2.32 4.546 2.915 4.546.22 0 .322-.102.322-.66V9.97c-.068-1.186-.695-1.287-.695-1.71 0-.203.169-.406.44-.406h2.746c.372 0 .508.203.508.644v3.474c0 .372.153.508.254.508.22 0 .406-.136.847-.593 1.103-1.22 1.898-3.101 1.898-3.101.085-.237.254-.457.66-.457h1.744c.492 0 .61.254.508.61-.22 1.017-2.388 4.054-2.388 4.054-.186.29-.237.44 0 .78.186.254 1.018 1.56 1.4 2.22.288.49.44.915.44 1.186-.017.508-.39.678-.864.678z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: all 0.3s ease; } .forum-icon { width: 28px; height: 28px; background-image: url("https://forum.keeper-nexus.com/data/assets/logo_default/.png"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.3s ease; filter: brightness(0) saturate(100%) invert(78%) sepia(74%) saturate(425%) hue-rotate(2deg) brightness(170%) contrast(90%); } .social-link:hover .vk-icon { filter: brightness(1.2); } .social-link:hover .forum-icon { filter: brightness(0) saturate(100%) invert(78%) sepia(74%) saturate(425%) hue-rotate(2deg) brightness(200%) contrast(85%) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); } .social-link::before { content: '🌸'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; opacity: 0; transition: all 0.4s ease; } .social-link::after { content: '🌼'; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; opacity: 0; transition: all 0.4s ease; } .social-link:hover::before { top: -15px; opacity: 0.8; animation: spin 0.6s ease; } .social-link:hover::after { bottom: -15px; opacity: 0.8; animation: spin 0.6s ease reverse; } .social-link:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-8px) scale(1.2); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); animation: none; } .quote-container { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease; width: 100%; margin-top: 10px; } .member-card:hover .quote-container { max-height: 200px; opacity: 1; } .quote-text { padding: 15px 20px; border-radius: 40px; font-style: italic; font-size: 0.95rem; color: #f0f0f0; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); position: relative; line-height: 1.5; transform: translateY(0); transition: transform 0.4s ease; animation: quoteGlow 2s ease-in-out infinite; } @keyframes quoteGlow { 0%, 100% { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); } } .member-card:hover .quote-text { transform: translateY(-5px); } .member-card[data-position="curator"] .quote-text { background: #7200a3; border-left: 6px solid #7200a3; } .member-card[data-position="chief"] .quote-text, .member-card[data-position="deputy"] .quote-text { background: #4a5a4a; border-left: 6px solid #7aa87a; } .member-card[data-position="editor"] .quote-text { background: #5a4a3a; border-left: 6px solid #ff8c1a; } .footer-modern { margin-top: 100px; padding: 50px 30px; background: rgba(30, 30, 30, 0.7); backdrop-filter: blur(10px); border-radius: 80px 80px 30px 30px; border: 3px solid #d4af37; text-align: center; position: relative; overflow: hidden; animation: footerGlow 3s ease-in-out infinite; } @keyframes footerGlow { 0%, 100% { box-shadow: 0 -20px 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(212, 175, 55, 0.2); } 50% { box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(212, 175, 55, 0.4); } } .footer-modern::before { content: '🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼'; position: absolute; top: 10px; left: 0; width: 100%; font-size: 1.8rem; opacity: 0.2; animation: slideFlowersAdvanced 20s linear infinite; white-space: nowrap; color: #ffb6c1; } .footer-modern::after { content: '🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼🌸🌼'; position: absolute; bottom: 10px; left: 0; width: 100%; font-size: 1.8rem; opacity: 0.2; animation: slideFlowersReverseAdvanced 25s linear infinite; white-space: nowrap; color: #b0e0b0; } @keyframes slideFlowersAdvanced { 0% { transform: translateX(-50%); } 50% { transform: translateX(-25%); } 100% { transform: translateX(0%); } } @keyframes slideFlowersReverseAdvanced { 0% { transform: translateX(0%); } 50% { transform: translateX(-25%); } 100% { transform: translateX(-50%); } } .footer-title { font-size: 2.8rem; font-weight: 700; color: #f0f0f0; text-shadow: 0 0 30px #d4af37; margin-bottom: 20px; position: relative; display: inline-block; z-index: 2; animation: titlePulse 2s ease-in-out infinite; } @keyframes titlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .footer-title::before { content: '🌸'; position: absolute; left: -40px; top: 50%; transform: translateY(-50%); font-size: 2rem; opacity: 0.7; animation: flowerFloat 3s ease-in-out infinite; } .footer-title::after { content: '🌼'; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); font-size: 2rem; opacity: 0.7; animation: flowerFloat 3s ease-in-out infinite reverse; } @keyframes flowerFloat { 0%, 100% { transform: translateY(-50%) rotate(-10deg) scale(1); } 25% { transform: translateY(-60%) rotate(0deg) scale(1.1); } 50% { transform: translateY(-50%) rotate(10deg) scale(1.2); } 75% { transform: translateY(-40%) rotate(0deg) scale(1.1); } } .footer-text { color: #ccc; font-size: 1.3rem; max-width: 800px; margin: 0 auto 20px; line-height: 1.6; position: relative; z-index: 2; } .footer-signature { font-size: 1.8rem; color: #ffb347; font-weight: 500; position: relative; z-index: 2; animation: signatureGlow 2s ease-in-out infinite; } @keyframes signatureGlow { 0%, 100% { text-shadow: 0 0 10px #ffb347; } 50% { text-shadow: 0 0 30px #ffb347; } } @media (max-width: 768px) { .main-title { font-size: 2.5rem; padding: 0 50px; } .main-title::before, .main-title::after { font-size: 1.8rem; } .subtitle { font-size: 1rem; } .filter-btn { padding: 10px 20px; font-size: 0.9rem; } .filter-btn.active, .filter-btn:hover { padding-left: 35px; padding-right: 35px; } .section-title { font-size: 2rem; } .member-card { width: 280px; min-height: 500px; } .footer-title { font-size: 2.2rem; } .footer-title::before, .footer-title::after { font-size: 1.5rem; left: -30px; right: -30px; } } @media (max-width: 480px) { .main-title { font-size: 2rem; padding: 0 45px; } .main-title::before, .main-title::after { font-size: 1.5rem; } .avatar-wrapper { width: 120px; height: 120px; } .footer-title { font-size: 1.8rem; } .footer-text { font-size: 1.1rem; } .footer-title::before, .footer-title::after { display: none; } } .hidden { display: none; } `; appContainer.appendChild(styleElement); // Создаём контейнер для падающих лепестков const petalContainer = document.createElement('div'); petalContainer.className = 'petal-container'; appContainer.appendChild(petalContainer); // Создаём падающие лепестки const petals = ['🌸', '🌼', '🌸', '🌼', '🌸', '🌺', '🌸', '🌼']; for (let i = 0; i < 45; i++) { const petal = document.createElement('div'); petal.className = 'petal'; petal.textContent = petals[Math.floor(Math.random() * petals.length)]; petal.style.left = Math.random() * 100 + '%'; petal.style.animationDelay = Math.random() * 15 + 's'; petal.style.animationDuration = (Math.random() * 12 + 10) + 's'; petal.style.fontSize = (Math.random() * 1 + 0.8) + 'rem'; petalContainer.appendChild(petal); } // Создаём декоративные цветочные уголки const corners = [ { className: 'flower-corner flower-tl', content: '🌸🌿' }, { className: 'flower-corner flower-tr', content: '🌼🍃' }, { className: 'flower-corner flower-bl', content: '🌺🌱' }, { className: 'flower-corner flower-br', content: '🌸🌿' } ]; corners.forEach(corner => { const cornerEl = document.createElement('div'); cornerEl.className = corner.className; cornerEl.textContent = corner.content; appContainer.appendChild(cornerEl); }); // Создаём основной контент const content = document.createElement('div'); content.className = 'content'; // Заголовок const title = document.createElement('h1'); title.className = 'main-title'; title.innerHTML = ' 📰 Состав редакции новостей 📰 '; content.appendChild(title); const subtitle = document.createElement('div'); subtitle.className = 'subtitle'; subtitle.textContent = 'Весна 2026 • Свежий взгляд на новости'; content.appendChild(subtitle); // Навигация const nav = document.createElement('div'); nav.className = 'nav-filter'; const allBtn = document.createElement('button'); allBtn.className = 'filter-btn active'; allBtn.setAttribute('data-filter', 'all'); allBtn.textContent = 'Все'; nav.appendChild(allBtn); teamData.sections.forEach(s => { const btn = document.createElement('button'); btn.className = 'filter-btn'; btn.setAttribute('data-filter', s.id); btn.textContent = s.title; nav.appendChild(btn); }); content.appendChild(nav); // Функция создания карточки function createCard(member, positionType) { const card = document.createElement('div'); card.className = 'member-card'; card.setAttribute('data-position', positionType); // Добавляем дополнительные цветочные элементы const flowerTr = document.createElement('div'); flowerTr.className = 'flower-corner-card fc-tr'; flowerTr.textContent = '🌺'; card.appendChild(flowerTr); const flowerBl = document.createElement('div'); flowerBl.className = 'flower-corner-card fc-bl'; flowerBl.textContent = '🌷'; card.appendChild(flowerBl); // Аватар const avatarWrapper = document.createElement('div'); avatarWrapper.className = 'avatar-wrapper'; if (member.avatar) { const img = document.createElement('img'); img.className = 'avatar-img'; img.src = member.avatar; img.alt = member.name; img.onerror = function() { this.style.display = 'none'; const fallback = document.createElement('div'); fallback.className = 'avatar-fallback'; fallback.textContent = '👤'; avatarWrapper.appendChild(fallback); }; avatarWrapper.appendChild(img); } else { avatarWrapper.innerHTML = ' 👤 '; } card.appendChild(avatarWrapper); // Имя const name = document.createElement('div'); name.className = 'member-name'; name.textContent = member.name; card.appendChild(name); // Должность const position = document.createElement('div'); position.className = 'member-position'; position.textContent = member.position; card.appendChild(position); // Социальные ссылки const socialLinks = document.createElement('div'); socialLinks.className = 'social-links'; if (member.vk) { const vkLink = document.createElement('a'); vkLink.href = `https://vk.com/${member.vk}`; vkLink.target = '_blank'; vkLink.className = 'social-link'; const vkIcon = document.createElement('span'); vkIcon.className = 'vk-icon'; vkLink.appendChild(vkIcon); socialLinks.appendChild(vkLink); } if (member.forum) { const forumLink = document.createElement('a'); forumLink.href = `https://forum.keeper-nexus.com/members/${member.forum}/`; forumLink.target = '_blank'; forumLink.className = 'social-link'; const forumIcon = document.createElement('span'); forumIcon.className = 'forum-icon'; forumLink.appendChild(forumIcon); socialLinks.appendChild(forumLink); } card.appendChild(socialLinks); // Цитата const quoteContainer = document.createElement('div'); quoteContainer.className = 'quote-container'; quoteContainer.innerHTML = ` ${member.quote} `; card.appendChild(quoteContainer); return card; } // Создание секций teamData.sections.forEach(section => { const sectionEl = document.createElement('section'); sectionEl.id = section.id; sectionEl.className = 'department-section'; sectionEl.setAttribute('data-section', section.positionType); const sectionTitle = document.createElement('h2'); sectionTitle.className = 'section-title'; sectionTitle.textContent = section.title; sectionEl.appendChild(sectionTitle); const grid = document.createElement('div'); grid.className = 'cards-grid'; section.members.forEach(member => { grid.appendChild(createCard(member, section.positionType)); }); sectionEl.appendChild(grid); content.appendChild(sectionEl); }); // Футер const footer = document.createElement('footer'); footer.className = 'footer-modern'; footer.innerHTML = ` Весенняя редакция Свежие новости, тёплые встречи и вдохновение Москва • 2026 `; content.appendChild(footer); appContainer.appendChild(content); // Фильтрация const filterButtons = appContainer.querySelectorAll('.filter-btn'); const sections = appContainer.querySelectorAll('.department-section'); function filterSections(filterValue) { sections.forEach(section => { if (filterValue === 'all' || section.id === filterValue) { section.classList.remove('hidden'); } else { section.classList.add('hidden'); } }); } filterButtons.forEach(btn => { btn.addEventListener('click', function() { filterButtons.forEach(b => b.classList.remove('active')); this.classList.add('active'); filterSections(this.dataset.filter); }); }); filterSections('all'); } // Запускаем приложение после полной загрузки страницы if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initShadowApp); } else { initShadowApp(); } })();

Зарегистрировавшись у нас, вы сможете обсуждать, делиться личными сообщениями с другими участниками нашего сообщества.

Регистрируйтесь прямо сейчас!

JavaScript отключён. Чтобы полноценно использовать наш сайт, включите JavaScript в своём браузере.

Важно #Москва || Состав редакции новостей

Автор темы lucifer ledyanoy
Дата начала 9 Мар 2026

Статус: В этой теме нельзя размещать новые ответы.

lucifer ledyanoy

Заместитель ГМ VK

Старший Модератор

Руководитель Ведущих

9 Мар 2026

Состав редакции сервера Москва

🌸 Загружаем весеннюю редакцию...

Последнее редактирование модератором: 13 Мар 2026

Статус: В этой теме нельзя размещать новые ответы.

Facebook X Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Электронная почта Ссылка

На данном сайте используются файлы cookie, чтобы персонализировать контент и сохранить Ваш вход в систему, если Вы зарегистрируетесь.
Продолжая использовать этот сайт, Вы соглашаетесь на использование наших файлов cookie.

Принять Узнать больше...

Сверху Снизу