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

Регистрация

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

Logan Kutuzov · 2024-09-25T04:41:11+00:00

Система зарплат | Ведущие Мероприятий // Создаем основной контейнер с Shadow DOM class SalaryApp extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.init(); } init() { this.render(); this.addStyles(); this.addInteractions(); } addStyles() { 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; min-height: 100vh; background: linear-gradient(135deg, #0f1c2e 0%, #2a3d5e 100%); color: #e0e0e0; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; padding: 40px 20px; margin-bottom: 40px; background: rgba(20, 35, 60, 0.7); border-radius: 20px; border: 1px solid #3a506b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); } h1 { font-size: 2.8rem; margin-bottom: 15px; color: #6ee7b7; text-shadow: 0 0 10px rgba(110, 231, 183, 0.3); background: linear-gradient(90deg, #6ee7b7, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { font-size: 1.2rem; color: #a5b4cb; max-width: 800px; margin: 0 auto; line-height: 1.6; } .main-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-bottom: 40px; } .card { background: rgba(26, 40, 65, 0.85); border-radius: 16px; padding: 30px; border: 1px solid #3a506b; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #6ee7b7, #3b82f6); } .card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); border-color: #6ee7b7; } .card-title { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; color: #6ee7b7; font-size: 1.8rem; } .card-title i { font-size: 2rem; background: linear-gradient(90deg, #6ee7b7, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .salary-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #2d3e5c; transition: transform 0.2s ease; } .salary-item:hover { transform: translateX(5px); } .salary-item:last-child { border-bottom: none; } .position { font-size: 1.2rem; font-weight: 500; flex: 1; } .coins { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #1a2740; padding: 10px 22px; border-radius: 50px; font-weight: bold; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); transition: all 0.3s ease; min-width: 120px; justify-content: center; } .coins:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); } .bonus-card { background: rgba(26, 40, 65, 0.85); border-radius: 16px; padding: 30px; border: 1px solid #3a506b; margin-bottom: 30px; backdrop-filter: blur(5px); } .bonus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .bonus-item { background: rgba(40, 60, 100, 0.5); padding: 20px; border-radius: 12px; border-left: 4px solid #6ee7b7; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .bonus-item:hover { background: rgba(40, 60, 100, 0.7); transform: translateX(5px); } .bonus-desc { font-size: 1.1rem; flex: 1; } .management-bonus { border-left-color: #f59e0b; } .highlight { color: #fbbf24; font-weight: bold; text-shadow: 0 0 5px rgba(251, 191, 36, 0.3); } footer { text-align: center; padding: 30px; margin-top: 40px; color: #a5b4cb; font-size: 0.9rem; border-top: 1px solid #2d3e5c; } .coin-icon { color: #1a2740; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(110, 231, 183, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); } } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .stats-bar { display: flex; justify-content: space-around; background: rgba(20, 35, 60, 0.5); padding: 20px; border-radius: 12px; margin: 30px 0; border: 1px solid #3a506b; } .stat-item { text-align: center; } .stat-value { font-size: 2rem; font-weight: bold; color: #6ee7b7; display: block; } .stat-label { color: #a5b4cb; font-size: 0.9rem; } @media (max-width: 768px) { :host { padding: 10px; } .main-grid { grid-template-columns: 1fr; } h1 { font-size: 2rem; } .card { padding: 20px; } .coins { min-width: 100px; padding: 8px 16px; font-size: 1.1rem; } .bonus-grid { grid-template-columns: 1fr; } .salary-item { flex-direction: column; align-items: flex-start; gap: 10px; } .coins { align-self: flex-end; } } @media (max-width: 480px) { header { padding: 20px 15px; } h1 { font-size: 1.6rem; } .card-title { font-size: 1.4rem; } .coins { min-width: 90px; padding: 6px 12px; font-size: 1rem; } } `; this.shadowRoot.appendChild(style); } render() { const container = document.createElement('div'); container.className = 'container'; container.innerHTML = ` Система Зарплат Ведущих Мероприятий В данной теме вы сможете ознакомиться с системой оплаты для ведущих мероприятий. Все суммы указаны в коинах. 4 Должности 6 Бонуса 400 Макс. зарплата Основная Зарплата Ведущий 100 Старший Ведущий 150 Куратор Ведущих 200 Заместитель Главного Ведущего до 400 Бонусы Ведущих Перевыполнение нормы (>7 МП/неделю) 65 Голосовое мероприятие (в Морозе) 14 Текстовое мероприятие 7 Проведение киновечера (в Морозе) 50 Медаль "Лучший Ведущий недели" 120 Бонусы для Руководства Проведение 1 ознакомительной беседы 15 Одобрение/отказ мероприятий (10 шт.) 7 Система оплаты актуальна на текущий момент. Вопросы по начислению зарплаты можно задать руководству. © Система ведения мероприятий `; this.shadowRoot.appendChild(container); } addInteractions() { // Анимация при прокрутке const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Применяем анимацию к карточкам setTimeout(() => { const cards = this.shadowRoot.querySelectorAll('.card, .bonus-card, .stats-bar'); cards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(card); }); }, 100); // Добавляем эффект клика на коины const coinElements = this.shadowRoot.querySelectorAll('.coins'); coinElements.forEach(coin => { coin.addEventListener('click', (e) => { e.stopPropagation(); coin.style.transform = 'scale(0.9)'; setTimeout(() => { coin.style.transform = ''; }, 200); }); }); // Интерактивные статистики this.shadowRoot.querySelectorAll('.stat-item').forEach(item => { item.addEventListener('mouseenter', () => { item.style.transform = 'scale(1.05)'; }); item.addEventListener('mouseleave', () => { item.style.transform = 'scale(1)'; }); }); } } // Регистрируем кастомный элемент customElements.define('salary-app', SalaryApp); // Создаем и добавляем приложение в DOM document.addEventListener('DOMContentLoaded', () => { const appContainer = document.getElementById('salary-app'); appContainer.innerHTML = ''; const app = document.createElement('salary-app'); appContainer.appendChild(app); });

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

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

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

Информация VM || Система зарплат Ведущих

Автор темы Logan Kutuzov
Дата начала 25 Сен 2024

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

Logan Kutuzov

#ᴇᴋʙ | sᴇɴɪᴏʀ ᴍᴏᴅᴇʀᴀᴛᴏʀ

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

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

25 Сен 2024

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

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

Ссылка

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

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

Сверху Снизу