- Дек
- 155
- 14
Пользователь
F
Платон дарова вопрос есть,ты же знаеш вход управления к п/у у них там другой какой-то знаеш как они могли это сделать если знаеш мог бы сделать тутор пожалуйста?HTML:<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Выберите Премиум Подписку</title> <!-- Подключение шрифта Inter с Google Fonts для современного вида --> <link href="t.me/forumcrmpm_bot"> <style> /* CSS-переменные для удобства изменения цветов */ :root { /* --bg-color: #0A0A0A; */ /* Этот цвет фона теперь не используется для основного контейнера */ --card-bg: #1A1D20; --text-color: #E0E0E0; --light-text-color: #B0B0B0; --accent-blue: #4A90E2; /* Основной акцентный цвет */ --button-hover: #5B9FEF; --border-radius: 12px; --gold-color: #FFD700; /* Для VIP/Ultimate обозначений */ --green-checkmark: #28A745; /* Цвет галочки */ } /* --- Изменения для XenForo --- */ body { margin: 0; padding: 0; background-color: transparent; /* Убедимся, что фон body прозрачен */ font-family: 'Inter', sans-serif; color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Новый wrapper, который займет всю доступную ширину в XenForo */ .xenforo-premium-wrapper { background-color: transparent; /* ФОН УБРАН: Сделан прозрачным */ padding: 20px 0; /* Вертикальный отступ для секции */ width: 100%; /* Растягиваем на всю доступную ширину родительского элемента XenForo */ box-sizing: border-box; /* Учитываем padding в ширине */ } /* --- Конец изменений для XenForo --- */ .container { max-width: 900px; /* Уменьшаем максимальную ширину контейнера, чтобы 2 карточки выглядели уместно */ width: 100%; margin: 0 auto; /* Центрируем карточки внутри xenforo-premium-wrapper */ padding: 0 20px; /* Добавляем горизонтальный отступ внутри контейнера */ box-sizing: border-box; } h1 { font-size: 36px; font-weight: 700; color: var(--text-color); text-align: center; margin-bottom: 40px; } .premium-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* ДВЕ КАРТОЧКИ В СТРОЧКУ */ gap: 30px; /* Отступ между карточками */ justify-content: center; align-items: stretch; /* Растягивает карточки по высоте */ } .premium-card { background-color: var(--card-bg); border-radius: var(--border-radius); padding: 20px 15px; /* УМЕНЬШЕННЫЙ ПАДДИНГ: Сделает карточки меньше */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; text-align: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .premium-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); } .card-name { font-size: 24px; /* УМЕНЬШЕННЫЙ ШРИФТ */ font-weight: 600; margin-bottom: 12px; /* Меньший отступ */ color: var(--text-color); } /* Особые стили для VIP и Alpha тарифов */ .card-name.vip { color: var(--gold-color); } .card-name.alpha { color: var(--accent-blue); text-shadow: 0 0 8px rgba(74, 144, 226, 0.5); } .card-price { display: flex; justify-content: center; align-items: baseline; gap: 6px; /* Меньший отступ */ margin-bottom: 20px; /* Меньший отступ */ } .price-amount { font-size: 40px; /* УМЕНЬШЕННЫЙ ШРИФТ */ font-weight: 700; color: white; line-height: 1; } .price-duration { font-size: 16px; /* УМЕНЬШЕННЫЙ ШРИФТ */ font-weight: 400; color: var(--light-text-color); } .card-features { list-style: none; padding: 0; margin: 0 0 25px 0; /* Меньший отступ */ text-align: left; flex-grow: 1; } .card-features li { display: flex; align-items: flex-start; /* Изменено на flex-start для лучшего выравнивания при многострочном тексте */ margin-bottom: 10px; /* Меньший отступ */ font-size: 14px; /* УМЕНЬШЕННЫЙ ШРИФТ */ color: var(--light-text-color); line-height: 1.3; } .card-features li:last-child { margin-bottom: 0; } .feature-icon { color: var(--green-checkmark); margin-right: 8px; /* Меньший отступ */ font-size: 16px; /* УМЕНЬШЕННЫЙ ШРИФТ */ min-width: 16px; /* Для единообразного отступа */ text-align: center; position: relative; top: 2px; /* Небольшая корректировка для выравнивания галочки */ } .buy-button { width: 100%; padding: 12px 18px; /* УМЕНЬШЕННЫЙ ПАДДИНГ */ background-color: var(--accent-blue); color: white; border: none; border-radius: var(--border-radius); font-size: 16px; /* УМЕНЬШЕННЫЙ ШРИФТ */ font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; text-decoration: none; display: block; } .buy-button:hover { background-color: var(--button-hover); transform: translateY(-2px); } .buy-button:active { transform: translateY(0); } /* Адаптивность для мобильных устройств */ @media (max-width: 768px) { h1 { font-size: 28px; margin-bottom: 25px; } .premium-cards-grid { grid-template-columns: 1fr; /* Одна колонка на маленьких экранах */ gap: 20px; } .premium-card { padding: 20px 15px; } .card-name { font-size: 22px; } .price-amount { font-size: 36px; } .price-duration { font-size: 15px; } .card-features li { font-size: 13px; } .buy-button { padding: 10px 12px; font-size: 15px; } } /* Адаптивность для очень маленьких экранов */ @media (max-width: 480px) { .container { padding: 0 10px; } h1 { font-size: 24px; } .premium-card { padding: 15px 10px; } .card-name { font-size: 20px; } .price-amount { font-size: 32px; } .price-duration { font-size: 14px; } .card-features li { font-size: 12px; } .feature-icon { font-size: 14px; min-width: 14px; margin-right: 6px; } .buy-button { font-size: 14px; } } </style> </head> <body> <div class="xenforo-premium-wrapper"> <div class="container"> <h1>Выберите услугу для себя</h1> <div class="premium-cards-grid"> <!-- Тариф 1: Mini --> <div class="premium-card"> <h2 class="card-name">Почетный Пользователь</h2> <div class="card-price"> <span class="price-amount">500₽</span> <span class="price-duration">/бессрочно</span> </div> <ul class="card-features"> <li><span class="feature-icon">✓</span> Выделение среди пользователей (CRMP.ONLINE)</li> <li><span class="feature-icon">✓</span> Стиль форумного профиля </li> <li><span class="feature-icon">✓</span> Статус проверености </li> <li><span class="feature-icon">✓</span> Больше внимания пользователей</li> </ul> <button class="buy-button" data-link="https://t.me/forumcrmpm_bot">Приобрести</button> </div> <!-- Тариф 2: Starter --> <div class="premium-card"> <h2 class="card-name">Личный покрас</h2> <div class="card-price"> <span class="price-amount">1500₽</span> <span class="price-duration">/Бессрочно</span> </div> <ul class="card-features"> <li><span class="feature-icon">✓</span> Личный стиль форумного аккаунта </li> <li><span class="feature-icon">✓</span> Связь с руководством проекта </li> <li><span class="feature-icon">✓</span> Выделение среди пользователей (CRMP.ONLINE) </li> <li><span class="feature-icon">✓</span> Больше внимания пользователей </li> <li><span class="feature-icon">✓</span> Статус проверености </li> </ul> <button class="buy-button" data-link="https://t.me/forumcrmpm_bot"> Приобрести </button> </div> <!-- Тариф 3: Premium --> <div class="premium-card"> <h2 class="card-name vip">Роспись от руководителя</h2> <div class="card-price"> <span class="price-amount">400₽</span> <span class="price-duration">/за 1шт.</span> </div> <ul class="card-features"> <li><span class="feature-icon">✓</span> Роспись от руководителя проекта по вашим просьбам</li> <li><span class="feature-icon">✓</span><div style="color: red;"><b>роспись оставит сам Alexander_Mayorov</b></div></li> </ul> <button class="buy-button" data-link="https://t.me/forumcrmpm_bot">Приобрести</button> </div> <!-- Тариф 4: Ultimate --> <div class="premium-card"> <h2 class="card-name alpha">Верификация</h2> <div class="card-price"> <span class="price-amount">999₽</span> <span class="price-duration">/месяц</span> </div> <ul class="card-features"> <li><span class="feature-icon">✓</span> Верификация после Nick-Name</li> <li><span class="feature-icon">✓</span> Статус проверенного пользователя</li> <li><span class="feature-icon">✓</span> Связь с руководством </li> </ul> <button class="buy-button" data-link="https://t.me/forumcrmpm_bot">Приобрести</button> </div> </div> </div> </div> <script> // Получаем все кнопки с классом 'buy-button' const buyButtons = document.querySelectorAll('.buy-button'); // Для каждой кнопки добавляем слушатель события клика buyButtons.forEach(button => { button.addEventListener('click', function() { // Получаем ссылку из атрибута data-link текущей кнопки const targetLink = this.dataset.link; // Проверяем, что ссылка существует if (targetLink) { // Открываем ссылку в новой вкладке window.open(targetLink, '_blank'); // Если нужно открыть в текущей вкладке, используйте: // window.location.href = targetLink; } else { console.error('Ссылка для этой кнопки не указана!'); alert('Ошибка: ссылка для покупки не найдена.'); } }); }); </script> </body> </html>