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

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

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

Curtis_Weston · 2026-01-03T18:13:53+00:00

Бонусный магазин - стеклянный стиль * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; min-height: 100vh; color: #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; } h1 { text-align: center; color: #ffffff; margin-bottom: 20px; font-size: 2.5rem; text-shadow: 0 2px 10px rgba(100, 150, 255, 0.3); } .description { text-align: center; max-width: 800px; margin: 0 auto 40px; color: #94a3b8; line-height: 1.6; font-size: 1.1rem; } #bonus-store { width: 100%; max-width: 900px; margin: 0 auto; } @media (max-width: 768px) { body { padding: 10px; } h1 { font-size: 1.8rem; } .description { font-size: 1rem; } } ✨ Бонусный магазин Обменивайте бонусы на игровую валюту через безопасную сделку на острове Vice City // Создаем веб-компонент class BonusStore extends HTMLElement { constructor() { super(); // Создаем Shadow DOM с открытым режимом (лучше для отладки) this.attachShadow({ mode: 'open' }); // Определяем стили const styles = ` :host { display: block; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --primary-color: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --accent-color: #8b5cf6; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-lg: 16px; --border-radius-xl: 20px; --transition-fast: 150ms; --transition-normal: 300ms; --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.2); --shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.3); --glow-primary: 0 0 15px rgba(59, 130, 246, 0.5); --glow-accent: 0 0 15px rgba(139, 92, 246, 0.5); } .glass-container { background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); backdrop-filter: blur(20px); border-radius: var(--border-radius-xl); border: 1px solid var(--glass-border); padding: var(--spacing-xl); box-shadow: var(--shadow-heavy), inset 0 1px 0 rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .glass-container:hover { transform: translateY(-2px); box-shadow: var(--shadow-heavy), 0 0 30px rgba(59, 130, 246, 0.2); } .glass-header { text-align: center; margin-bottom: var(--spacing-xl); } .glass-header h1 { font-size: 2.2rem; margin: 0 0 var(--spacing-sm) 0; background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); } .subtitle { color: var(--text-secondary); font-size: 1rem; opacity: 0.8; } .glass-content { display: flex; flex-direction: column; gap: var(--spacing-xl); } .glass-card { background: rgba(255, 255, 255, 0.03); border-radius: var(--border-radius-lg); padding: var(--spacing-lg); border: 1px solid var(--glass-border); transition: all var(--transition-normal); } .glass-card.highlight { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(59, 130, 246, 0.2); } .card-header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap; } .icon-wrapper { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; box-shadow: var(--glow-primary); } /* Стили для кастомного значка обмена */ .exchange-icon { width: 32px; height: 32px; animation: rotate 4s linear infinite; } .exchange-icon circle { fill: none; stroke: white; stroke-width: 2; opacity: 0.3; } .exchange-icon path { fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .glass-card:hover .exchange-icon { animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card-header h2 { margin: 0; font-size: 1.5rem; color: var(--text-primary); flex: 1; } .badge { background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); color: white; padding: 6px 12px; border-radius: var(--border-radius-sm); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge.pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } } .conversion-rate { text-align: center; margin: var(--spacing-lg) 0; padding: var(--spacing-lg); background: rgba(0, 0, 0, 0.2); border-radius: var(--border-radius-md); border: 1px solid var(--glass-border); } .rate-display { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .bonus-amount { color: var(--accent-color); } .equals { color: var(--text-secondary); } .currency-amount { color: var(--success-color); } .currency-symbol { color: var(--warning-color); font-size: 2rem; } .rate-label { color: var(--text-secondary); font-size: 0.9rem; opacity: 0.8; } .application-form { display: flex; flex-direction: column; gap: var(--spacing-lg); } .form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); } .form-group label { color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: var(--spacing-sm); } .glass-input { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: var(--border-radius-md); padding: var(--spacing-md); color: var(--text-primary); font-size: 1rem; transition: all var(--transition-fast); } .glass-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .glass-input::placeholder { color: var(--text-muted); } .bonus-info { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); } .max-bonus { color: var(--primary-light); cursor: pointer; text-decoration: underline; transition: color var(--transition-fast); } .max-bonus:hover { color: var(--primary-color); } .result-preview { text-align: center; padding: var(--spacing-lg); background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1)); border-radius: var(--border-radius-md); border: 1px solid rgba(16, 185, 129, 0.2); margin: var(--spacing-lg) 0; } .arrow-down { color: var(--success-color); font-size: 1.5rem; margin-bottom: var(--spacing-sm); animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .result-amount { font-size: 2.2rem; font-weight: 800; color: var(--success-color); margin-bottom: var(--spacing-xs); display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); transition: transform var(--transition-fast); } .result-label { color: var(--text-secondary); font-size: 0.9rem; } .warning-note { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.05)); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--border-radius-md); padding: var(--spacing-md); display: flex; gap: var(--spacing-md); align-items: flex-start; } .warning-note .icon { color: var(--warning-color); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; } .warning-note div { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } .glass-button { background: linear-gradient(135deg, var(--accent-color), var(--primary-dark)); color: white; border: none; border-radius: var(--border-radius-md); padding: var(--spacing-md) var(--spacing-xl); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); position: relative; overflow: hidden; margin-top: var(--spacing-lg); } .glass-button:hover { transform: translateY(-2px); box-shadow: var(--glow-accent); } .glass-button:active { transform: translateY(0); } .copy-button { background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); } .process-info { display: flex; justify-content: space-between; margin-top: var(--spacing-xl); position: relative; } .process-step { flex: 1; text-align: center; position: relative; padding: 0 var(--spacing-md); } .process-step:not(:last-child)::after { content: ''; position: absolute; top: 25px; right: -50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); z-index: 1; } .step-number { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.2rem; margin: 0 auto var(--spacing-sm); position: relative; z-index: 2; } .step-text { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; } .info-list { list-style: none; padding: 0; margin: var(--spacing-md) 0 0 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .info-list li { color: var(--text-secondary); padding-left: var(--spacing-lg); position: relative; line-height: 1.5; } .info-list li::before { content: '✓'; position: absolute; left: 0; color: var(--success-color); font-weight: bold; } .icon { display: inline-flex; align-items: center; justify-content: center; } /* Адаптивность */ @media (max-width: 768px) { .glass-container { padding: var(--spacing-lg); } .glass-header h1 { font-size: 1.8rem; } .rate-display { font-size: 2rem; } .result-amount { font-size: 1.8rem; } .process-info { flex-direction: column; gap: var(--spacing-lg); } .process-step:not(:last-child)::after { display: none; } .process-step::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 2px; height: 30px; background: linear-gradient(to bottom, var(--primary-color), transparent); } .glass-button { width: 100%; } .icon-wrapper { width: 50px; height: 50px; font-size: 1.5rem; } .exchange-icon { width: 28px; height: 28px; } } /* Стили для уведомлений */ .notification { position: fixed; top: 20px; right: 20px; z-index: 1000; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--border-radius-md); background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-medium); animation: slideIn 0.3s ease-out; max-width: 300px; color: var(--text-primary); } .notification-success { border-left: 4px solid var(--success-color); } .notification-warning { border-left: 4px solid var(--warning-color); } .notification-header { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; margin-bottom: var(--spacing-xs); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; // Создаем HTML структуру const html = ` 💎 БОНУСНЫЙ МАГАЗИН Премиум пространство для обмена ваших достижений Конвертация в игровую валюту Популярно 1 = 80.000 $ Текущий курс обмена 👤 Игровой ник: 🖥️ Сервер: 💰 Кол-во конвертируемых бонусов: ▼ 80.000 $ Сумма к получению ⚠️ Важное примечание: Данные действия безопасны, для этого у нас есть разрешения от ГА 27 и другого сервера откуда будут передаваться вирты. Данное действие будет проходить через остров Vice City. 📋 Копировать заявку 1 Заполнение заявки 2 Подтверждение на острове Vice City 3 Получение валюты ℹ️ Как это работает? Бонусы начисляются за активность и достижения в игре Конвертация проходит через безопасную сделку на острове Vice City Курс обмена фиксирован: 1 бонус = 80.000 $ Максимальная сумма конвертации за раз: 150 бонусов Следящий за темой - Alexey Alkashnikov `; // Добавляем стили и HTML в Shadow DOM this.shadowRoot.innerHTML = ` ${styles} ${html} `; // Инициализируем переменные this.playerNameInput = null; this.serverInput = null; this.bonusAmountInput = null; this.currencyResult = null; this.copyButton = null; this.applicationForm = null; this.setMaxBonusLink = null; this.maxBonus = 100; this.exchangeRate = 80000; } connectedCallback() { // Получаем элементы из Shadow DOM this.playerNameInput = this.shadowRoot.getElementById('playerName'); this.serverInput = this.shadowRoot.getElementById('server'); this.bonusAmountInput = this.shadowRoot.getElementById('bonusAmount'); this.currencyResult = this.shadowRoot.getElementById('currencyResult'); this.copyButton = this.shadowRoot.getElementById('copyButton'); this.applicationForm = this.shadowRoot.getElementById('applicationForm'); this.setMaxBonusLink = this.shadowRoot.getElementById('setMaxBonus'); // Устанавливаем обработчики событий this.setupEventListeners(); // Инициализируем конвертацию this.updateConversion(); } setupEventListeners() { // Обработчик изменения количества бонусов this.bonusAmountInput.addEventListener('input', () => { this.updateConversion(); }); // Обработчик для установки максимального количества бонусов this.setMaxBonusLink.addEventListener('click', () => this.setMaxBonus()); // Обработчик клика по кнопке копирования this.copyButton.addEventListener('click', () => this.copyApplication()); // Обработчик отправки формы this.applicationForm.addEventListener('submit', (e) => { e.preventDefault(); this.copyApplication(); }); // Обработчики для валидации ввода this.bonusAmountInput.addEventListener('change', () => this.validateBonusInput()); // Обработчики для полей формы при нажатии Enter this.playerNameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); this.copyApplication(); } }); this.serverInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); this.copyApplication(); } }); this.bonusAmountInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); this.copyApplication(); } }); } // Обновление результата конвертации updateConversion() { const bonusValue = parseInt(this.bonusAmountInput.value) || 1; const currencyValue = bonusValue * this.exchangeRate; // Форматирование с разделителями this.currencyResult.textContent = this.formatNumber(currencyValue); // Визуальная обратная связь if (bonusValue > 0) { this.currencyResult.style.color = '#10b981'; setTimeout(() => { this.currencyResult.style.transform = 'scale(1.05)'; setTimeout(() => { this.currencyResult.style.transform = 'scale(1)'; }, 150); }, 10); } } // Установка максимального количества бонусов setMaxBonus() { this.bonusAmountInput.value = this.maxBonus; this.updateConversion(); // Анимация ссылки this.setMaxBonusLink.style.color = '#10b981'; setTimeout(() => { this.setMaxBonusLink.style.color = ''; }, 300); } // Валидация ввода бонусов validateBonusInput() { let value = parseInt(this.bonusAmountInput.value); if (isNaN(value) || value this.maxBonus) { this.bonusAmountInput.value = this.maxBonus; } this.updateConversion(); } // Копирование заявки в буфер обмена async copyApplication() { const playerName = this.playerNameInput.value; const server = this.serverInput.value; const bonusAmount = this.bonusAmountInput.value; // Проверка заполнения обязательных полей if (!playerName.trim() || !server.trim()) { this.showNotification('Заполните все обязательные поля', 'warning'); return; } const currencyAmount = this.formatNumber((parseInt(bonusAmount) || 1) * this.exchangeRate); const applicationText = `Игровой ник: ${playerName} Сервер: ${server} Кол-во конвертируемых бонусов: ${bonusAmount} Сумма к получению: ${currencyAmount}$ --- Заявка на конвертацию через Vice City ---`; try { // Используем современный API для копирования в буфер обмена await navigator.clipboard.writeText(applicationText); // Визуальная обратная связь this.copyButton.textContent = '✓ Скопировано!'; this.copyButton.style.background = 'linear-gradient(135deg, #10b981, #059669)'; this.showNotification('Заявка скопирована в буфер обмена!', 'success'); // Возвращаем исходное состояние кнопки через 2 секунды setTimeout(() => { this.copyButton.textContent = '📋 Копировать заявку'; this.copyButton.style.background = 'linear-gradient(135deg, #8b5cf6, #7c3aed)'; }, 2000); } catch (err) { // Fallback для старых браузеров const textArea = document.createElement('textarea'); textArea.value = applicationText; textArea.style.position = 'fixed'; textArea.style.left = '-999999px'; textArea.style.top = '-999999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); if (successful) { this.showNotification('Заявка скопирована в буфер обмена!', 'success'); this.copyButton.textContent = '✓ Скопировано!'; this.copyButton.style.background = 'linear-gradient(135deg, #10b981, #059669)'; setTimeout(() => { this.copyButton.textContent = '📋 Копировать заявку'; this.copyButton.style.background = 'linear-gradient(135deg, #8b5cf6, #7c3aed)'; }, 2000); } else { this.showNotification('Не удалось скопировать заявку', 'warning'); } } catch (err) { this.showNotification('Ошибка при копировании', 'warning'); } document.body.removeChild(textArea); } } // Показ уведомления showNotification(message, type = 'success') { // Удаляем предыдущие уведомления const existingNotifications = this.shadowRoot.querySelectorAll('.notification'); existingNotifications.forEach(notification => { notification.style.animation = 'slideOut 0.3s ease-out forwards'; setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 300); }); // Создаем новое уведомление const notification = document.createElement('div'); notification.className = `notification notification-${type}`; const icon = type === 'success' ? '✓' : '⚠️'; const title = type === 'success' ? 'Успешно' : 'Внимание'; notification.innerHTML = ` ${icon} ${title} ${message} `; this.shadowRoot.appendChild(notification); // Автоматическое удаление уведомления через 5 секунд setTimeout(() => { if (this.shadowRoot.contains(notification)) { notification.style.animation = 'slideOut 0.3s ease-out forwards'; setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 300); } }, 5000); } // Форматирование числа с разделителями formatNumber(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); } } // Регистрация кастомного элемента customElements.define('bonus-store', BonusStore); // Добавление компонента на страницу после загрузки document.addEventListener('DOMContentLoaded', () => { const container = document.getElementById('bonus-store'); const bonusStoreElement = document.createElement('bonus-store'); container.appendChild(bonusStoreElement); });

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

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

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

Bumble Bee #Bumble Bee | Бонусный магазин

Автор темы Curtis_Weston
Дата начала 3 Янв 2026

Curtis_Weston

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

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

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

Ведущий

3 Янв 2026

Бонусный магазин - стеклянный стиль

✨ Бонусный магазин

Обменивайте бонусы на игровую валюту через безопасную сделку на острове Vice City

Войдите или зарегистрируйтесь для ответа.

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

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

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

Сверху Снизу