Регистрация

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

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

#Bumble Bee | Система повышения модераций
Bumble Bee Информация

Curtis_Weston · 2025-09-25T19:40:52+00:00

Система повышений модераторов class ModeratorPromotionSystem extends HTMLElement { constructor() { super(); // Создаем Shadow DOM const shadow = this.attachShadow({ mode: 'open' }); // Создаем контейнер const container = document.createElement('div'); container.className = 'container'; // Добавляем стили в Shadow DOM const style = document.createElement('style'); style.textContent = ` * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :host { display: block; color: #f1f1f1; min-height: 100vh; padding: 30px 20px; position: relative; overflow-x: hidden; } :host::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); z-index: -1; } .container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } header { text-align: center; margin-bottom: 60px; padding: 40px 30px; background: rgba(255, 255, 255, 0.08); border-radius: 25px; backdrop-filter: blur(15px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3); } h1 { font-size: 3.2rem; margin-bottom: 15px; background: linear-gradient(90deg, #ffd700, #ffec8b, #fffacd); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); letter-spacing: 0.5px; } .subtitle { font-size: 1.3rem; opacity: 0.9; max-width: 800px; margin: 0 auto 25px; line-height: 1.6; } .intro-box { background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 25px; margin-top: 25px; border-left: 4px solid #4ecdc4; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); } .intro-box p { margin-bottom: 10px; font-size: 1.1rem; line-height: 1.7; } /* Карточки */ .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 35px; margin-bottom: 60px; } .card { background: rgba(255, 255, 255, 0.07); border-radius: 25px; overflow: hidden; transition: all 0.5s ease; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; padding-bottom: 25px; } .card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 25px 25px 0 0; } .card-1::before { background: linear-gradient(90deg, #1dd1a1, #10ac84); } .card-2::before { background: linear-gradient(90deg, #54a0ff, #2e86de); } .card-3::before { background: linear-gradient(90deg, #f368e0, #ff9ff3); } .card-4::before { background: linear-gradient(90deg, #ff9f43, #ff6b6b); } .card-header { padding: 30px 30px 20px; position: relative; text-align: center; } /* ОБНОВЛЕННЫЕ КРУЖОЧКИ-ИКОНКИ ДЛЯ КАРТОЧЕК */ .card-icon { width: 85px; height: 85px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3); position: relative; z-index: 1; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-1 .card-icon { background: linear-gradient(135deg, #1dd1a1, #10ac84, #1dd1a1); color: white; } .card-2 .card-icon { background: linear-gradient(135deg, #54a0ff, #2e86de, #54a0ff); color: white; } .card-3 .card-icon { background: linear-gradient(135deg, #f368e0, #ff9ff3, #f368e0); color: white; } .card-4 .card-icon { background: linear-gradient(135deg, #ff9f43, #ff6b6b, #ff9f43); color: white; } .card:hover .card-icon { transform: scale(1.15) rotate(10deg); animation: cardIconGlow 2s infinite alternate; } @keyframes cardIconGlow { 0% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3); } 100% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.4); } } /* Анимированная обводка для иконок */ .card-icon::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 50%; z-index: -1; animation: rotate 3s linear infinite; opacity: 0.8; } .card-1 .card-icon::before { background: conic-gradient(from 0deg, #1dd1a1, #10ac84, #1dd1a1); } .card-2 .card-icon::before { background: conic-gradient(from 0deg, #54a0ff, #2e86de, #54a0ff); } .card-3 .card-icon::before { background: conic-gradient(from 0deg, #f368e0, #ff9ff3, #f368e0); } .card-4 .card-icon::before { background: conic-gradient(from 0deg, #ff9f43, #ff6b6b, #ff9f43); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card-title { font-size: 1.6rem; margin-bottom: 10px; font-weight: 700; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .card-subtitle { font-size: 1rem; opacity: 0.8; margin-bottom: 5px; } .card-arrow { font-size: 1.5rem; margin: 10px 0; opacity: 0.7; position: relative; display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); animation: arrowBounce 2s infinite; } @keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .card-body { padding: 0 30px; } .requirements { list-style: none; margin: 20px 0; } .requirement-item { padding: 12px 15px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border-left: 3px solid; transition: all 0.3s ease; display: flex; align-items: center; } .requirement-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } .card-1 .requirement-item { border-left-color: #1dd1a1; } .card-2 .requirement-item { border-left-color: #54a0ff; } .card-3 .requirement-item { border-left-color: #f368e0; } .card-4 .requirement-item { border-left-color: #ff9f43; } /* ОБНОВЛЕННЫЕ ИКОНКИ ТРЕБОВАНИЙ */ .requirement-icon { margin-right: 12px; font-size: 1.1rem; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; position: relative; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .card-1 .requirement-icon { background: linear-gradient(135deg, rgba(29, 209, 161, 0.9), rgba(16, 172, 132, 0.9)); color: white; box-shadow: 0 4px 15px rgba(29, 209, 161, 0.3); } .card-2 .requirement-icon { background: linear-gradient(135deg, rgba(84, 160, 255, 0.9), rgba(46, 134, 222, 0.9)); color: white; box-shadow: 0 4px 15px rgba(84, 160, 255, 0.3); } .card-3 .requirement-icon { background: linear-gradient(135deg, rgba(243, 104, 224, 0.9), rgba(255, 159, 243, 0.9)); color: white; box-shadow: 0 4px 15px rgba(243, 104, 224, 0.3); } .card-4 .requirement-icon { background: linear-gradient(135deg, rgba(255, 159, 67, 0.9), rgba(255, 107, 107, 0.9)); color: white; box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3); } .requirement-item:hover .requirement-icon { transform: scale(1.15) rotate(5deg); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } /* Эффект пульсации для иконок требований */ .requirement-icon::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .requirement-item:hover .requirement-icon::after { opacity: 0.5; animation: requirementPulse 1.5s infinite; } @keyframes requirementPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.3; } } .requirement-text { flex-grow: 1; font-size: 0.95rem; line-height: 1.5; } .card-footer { padding: 20px 30px 0; margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .note { padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; font-style: italic; position: relative; border-left: 3px solid #feca57; transition: all 0.3s ease; } .note:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(254, 202, 87, 0.2); } .note::before { content: '💡'; margin-right: 10px; font-style: normal; font-size: 1.2rem; } .footer { text-align: center; padding: 30px; margin-top: 40px; background: rgba(255, 255, 255, 0.05); border-radius: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .footer p { margin-bottom: 10px; font-size: 1rem; opacity: 0.8; } @media (max-width: 1100px) { .cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } @media (max-width: 768px) { h1 { font-size: 2.5rem; } .cards-container { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto 60px; } .card { max-width: 100%; } .card-icon { width: 75px; height: 75px; font-size: 2rem; } } @media (max-width: 480px) { h1 { font-size: 2rem; } .card-header, .card-body, .card-footer { padding-left: 20px; padding-right: 20px; } .requirement-icon { width: 34px; height: 34px; font-size: 1rem; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeInUp 0.7s ease forwards; opacity: 0; } .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; } .card:nth-child(4) { animation-delay: 0.4s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .card:hover .card-icon { animation: float 2s ease-in-out infinite, cardIconGlow 2s infinite alternate; } `; // HTML структура container.innerHTML = ` Система повышений модераторов Ознакомьтесь с регламентом повышений на вашем посту. Каждый шаг — это новые возможности и ответственность. Добро пожаловать в тему ознакомления для повышений действующего модератора нашего сервера. Здесь модератор может ознакомиться с регламентом повышений на своем посту. Система повышения делится на следующие этапы: Модератор Повышение до Старший Модератор Активность: не менее 7 дней на посту Минимум сообщений: 50 сообщений Дисциплина: отсутствие нарушений Это начальный этап карьерного роста. Покажите свою активность и ответственность. Старший Модератор Повышение до Куратор Модерации Активность: не менее 14 дней на посту Минимум сообщений: 150 сообщений Дисциплина: отсутствие нарушений Согласование: одобрение руководителя на повышение На этом этапе важны не только активность, но и качество работы, лидерские качества. Куратор Модерации Повышение до Заместитель Главного Модератора Решение руководства: повышение на усмотрение руководства Результативность: оценка эффективности работы команды Лидерские качества: умение управлять и мотивировать команду Это уровень управленческих решений. Кандидат оценивается по многим параметрам, включая лидерские качества и результаты работы команды. Заместитель Главного Модератора Повышение до Главный Модератор Решение руководства: повышение на усмотрение руководства Стратегическое мышление: способность к планированию и развитию Ответственность: готовность принимать ключевые решения Высшая ступень карьерной лестницы модератора. Требует максимальной ответственности и стратегического видения. Система повышений разработана для обеспечения прозрачности и справедливости карьерного роста модераторов. Каждый этап требует больше ответственности, опыта и лидерских качеств. © Система модерации сервера `; // Добавляем стили и контент в Shadow DOM shadow.appendChild(style); shadow.appendChild(container); // Инициализируем JavaScript функционал this.initScripts(shadow); } initScripts(shadow) { // Добавляем интерактивность карточкам const cards = shadow.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mouseenter', () => { card.style.zIndex = '10'; }); card.addEventListener('mouseleave', () => { card.style.zIndex = '1'; }); }); } } // Регистрируем кастомный элемент customElements.define('moderator-promotion-system', ModeratorPromotionSystem);

От Curtis_Weston 25 Сен 2025 Модерация VK

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

Curtis_Weston

♡ Бᴩᴀᴛʙᴀ ᴩʙᴇᴛᴄя ᴋ ʙᴧᴀᴄᴛи ♡

Главный модератор VK

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

Ведущий

25 Сен 2025

Система повышений модераторов

Последнее редактирование модератором: Суббота в 00:06

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

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

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

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

Сверху

#Bumble Bee | Система повышения модераций Bumble Bee Информация

Curtis_Weston

♡ Бᴩᴀᴛʙᴀ ᴩʙᴇᴛᴄя ᴋ ʙᴧᴀᴄᴛи ♡

#Bumble Bee | Система повышения модераций
Bumble Bee Информация