Решено Решение проблемы HTML

INTXEN · Понедельник в 15:52

Всем привет, кто сможет помочь решить данную проблему?

код:

<xf:title>{{ phrase('account_upgrades') }}</xf:title>

<div class="block-container">
  <div class="block-body">
    
    <!-- Анимированный фон -->
    <div class="animated-background">
      <div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.05), transparent);"></div>
      <div class="glow-orb" style="width: 24rem; height: 24rem; background: rgba(16, 185, 129, 0.2); top: 0; left: 25%; animation-delay: 0s;"></div>
      <div class="glow-orb" style="width: 20rem; height: 20rem; background: rgba(168, 85, 247, 0.2); top: 25%; right: 25%; animation-delay: 2s;"></div>
      <div class="glow-orb" style="width: 16rem; height: 16rem; background: rgba(16, 185, 129, 0.15); bottom: 25%; left: 33%; animation-delay: 4s;"></div>
    </div>

    <!-- Генерация звезд через JavaScript -->
    <xf:js>
      !function() {
        const bg = document.querySelector('.animated-background');
        if (!bg) return;
        for (let i = 0; i < 30; i++) {
          const star = document.createElement('div');
          star.className = 'star';
          star.style.width = (Math.random() * 3 + 1) + 'px';
          star.style.height = (Math.random() * 3 + 1) + 'px';
          star.style.top = (Math.random() * 100) + '%';
          star.style.left = (Math.random() * 100) + '%';
          star.style.animationDelay = (Math.random() * 3) + 's';
          star.style.animationDuration = (Math.random() * 2 + 2) + 's';
          bg.appendChild(star);
        }
      }();
    </xf:js>

    <!-- Hero секция -->
    <div style="position: relative; padding: 4rem 0;">
      <div style="max-width: 1280px; margin: 0 auto; padding: 0 1rem;">
        
        <!-- Заголовок -->
        <div style="text-align: center; margin-bottom: 4rem;">
          <h1 style="font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem; line-height: 1.2;">
            <span style="color: #f3f4f6;">Выведите свой опыт</span><br>
            <span style="color: #10b981;">на новый уровень</span>
          </h1>
          <p style="color: #9ca3af; font-size: 1.125rem; max-width: 48rem; margin: 0 auto;">
            Обновите свой аккаунт, чтобы получить доступ к эксклюзивным преимуществам и специальным привилегиям
          </p>
        </div>

        <!-- Карточки цен -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;">
          
          <!-- ============= КАРТОЧКА: ОСНОВНОЙ ============= -->
          <div class="pricing-card">
            
            <!-- Бейдж -->
            <div style="margin-bottom: 1.5rem;">
              <span class="badge-upgrade">
                <svg style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.25rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Доступное обновление
              </span>
            </div>

            <!-- Заголовок -->
            <h3 style="font-size: 1.875rem; font-weight: bold; color: #f3f4f6; margin-bottom: 1.5rem;">Основной</h3>

            <!-- Premium баннер -->
            <div style="text-align: center; margin-bottom: 1.5rem;">
              <div class="forum-banner-premium"><strong>PREMIUM</strong></div>
            </div>

            <!-- Цена -->
            <div style="margin-bottom: 1.5rem;">
              <div style="display: flex; align-items: baseline; gap: 0.25rem;">
                <span style="font-size: 3rem; font-weight: bold; color: #f3f4f6;">150</span>
                <span style="color: #9ca3af; font-size: 1.5rem;">₽</span>
              </div>
              <p style="color: #9ca3af; margin-top: 0.5rem;">Навсегда</p>
            </div>

            <!-- Кнопки действий -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem;">
              <a href="#" class="btn-upgrade">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Обновление
              </a>
              <a href="#" class="btn-secondary">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>
                </svg>
                Подарок
              </a>
            </div>

            <!-- Функции -->
            <div style="margin-bottom: 1.5rem;">
              <div class="feature-row">
                <span style="color: #9ca3af;">PREMIUM цвет группы:</span>
                <span class="text-premium">Ваш никнейм</span>
              </div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Значок:</span>
                <span>💎</span>
              </div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Мощность представителя:</span>
                <span>VIP</span>
              </div>
            </div>

            <!-- Информация о пользователе -->
            <div style="margin-bottom: 1rem; font-size: 0.875rem;">
              <span style="color: #9ca3af;">K</span>
              <span class="text-premium">Morti_Freeze</span>
              <span class="vip-badge">VIP</span>
            </div>

            <!-- Голоса -->
            <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem;">
              <div>
                <svg style="width: 1rem; height: 1rem; color: #10b981; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>
                </svg>
                <span style="color: #10b981; font-weight: 500;">+1</span>
              </div>
              <div>
                <svg style="width: 1rem; height: 1rem; color: #ef4444; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>
                </svg>
                <span style="color: #ef4444; font-weight: 500;">-1</span>
              </div>
            </div>

            <!-- Бонусные баллы -->
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(255,255,255,0.05); border-radius: 0.5rem;">
              <span style="color: #9ca3af; font-size: 0.875rem; flex: 1;">Бонус битов</span>
              <svg style="width: 1.25rem; height: 1.25rem; color: #10b981;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
              </svg>
              <span style="color: #10b981; font-weight: bold;">1500</span>
            </div>

            <!-- Преимущества -->
            <div>
              <h4 style="font-size: 0.875rem; font-weight: 600; color: #f3f4f6; margin-bottom: 0.75rem;">Обновление включает в себя:</h4>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Создание собственной гильдии</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Загрузка фона форума</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Загрузка GIF баннеров и аватарок</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Редактор box-VIP</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Редактор пользовательского CSS (цвет никнейма)</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Нет ограничений на количество тем и сообщений</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Убраны все проверки на флуд</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Доступ ко всем наградам и значкам</span>
              </div>
            </div>
          </div>

          <!-- ============= КАРТОЧКА: БОЖЕСТВЕННЫЙ ============= -->
          <div class="pricing-card">
            
            <!-- Бейдж -->
            <div style="margin-bottom: 1.5rem; text-align: right;">
              <span class="badge-prime">
                <svg style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.25rem;" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
                </svg>
                Требуется Prime
              </span>
            </div>

            <!-- Заголовок -->
            <h3 style="font-size: 1.875rem; font-weight: bold; color: #f3f4f6; margin-bottom: 1.5rem;">Божественный</h3>

            <!-- Premium баннер -->
            <div style="text-align: center; margin-bottom: 1.5rem;">
              <div class="forum-banner-premium"><strong>PREMIUM</strong></div>
            </div>

            <!-- Цена -->
            <div style="margin-bottom: 1.5rem;">
              <div style="display: flex; align-items: baseline; gap: 0.25rem;">
                <span style="font-size: 3rem; font-weight: bold; color: #f3f4f6;">24.95</span>
                <span style="color: #9ca3af; font-size: 1.5rem;">₽</span>
              </div>
              <p style="color: #9ca3af; margin-top: 0.5rem;">Продолжительность жизни</p>
            </div>

            <!-- Кнопки действий -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem;">
              <a href="#" class="btn-upgrade">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Обновление
              </a>
              <a href="#" class="btn-secondary">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>
                </svg>
                Подарок
              </a>
            </div>

            <!-- Функции -->
            <div style="margin-bottom: 1.5rem;">
              <div class="feature-row"><span style="color: #9ca3af;">Цвет группы</span></div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Премия</span>
                <span>💎</span>
              </div>
              <div class="feature-row"><span style="color: #9ca3af;">Мощность представителя</span></div>
            </div>

            <!-- Информация о пользователе -->
            <div style="margin-bottom: 1rem; font-size: 0.875rem;">
              <span style="color: #9ca3af;">K</span>
              <span class="text-premium">Morti_Freeze</span>
              <span class="vip-badge">VIP</span>
            </div>

            <!-- Голоса -->
            <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem;">
              <div>
                <svg style="width: 1rem; height: 1rem; color: #10b981; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>
                </svg>
                <span style="color: #10b981; font-weight: 500;">+3</span>
              </div>
              <div>
                <svg style="width: 1rem; height: 1rem; color: #ef4444; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>
                </svg>
                <span style="color: #ef4444; font-weight: 500;">-3</span>
              </div>
            </div>

            <!-- Бонусные баллы -->
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(255,255,255,0.05); border-radius: 0.5rem;">
              <span style="color: #9ca3af; font-size: 0.875rem; flex: 1;">Бонус битов</span>
              <svg style="width: 1.25rem; height: 1.25rem; color: #10b981;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
              </svg>
              <span style="color: #10b981; font-weight: bold;">3500</span>
            </div>

            <!-- Преимущества -->
            <div>
              <h4 style="font-size: 0.875rem; font-weight: 600; color: #f3f4f6; margin-bottom: 0.75rem;">Все, что есть в Prime, плюс:</h4>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Удалить сообщения в собственной теме</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Сортировать награды</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Скрыть статус прочтения беседы</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Доступ к хранилищу имен пользователей</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Просмотр без рекламы</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Умножитель битов (1,5x)</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

INTXEN · Понедельник в 16:02

INTXEN написал(а):

Всем привет, кто сможет помочь решить данную проблему?
Посмотреть вложение 14917

код:

<xf:title>{{ phrase('account_upgrades') }}</xf:title>

<div class="block-container">
  <div class="block-body">
   
    <!-- Анимированный фон -->
    <div class="animated-background">
      <div style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16, 185, 129, 0.05), transparent);"></div>
      <div class="glow-orb" style="width: 24rem; height: 24rem; background: rgba(16, 185, 129, 0.2); top: 0; left: 25%; animation-delay: 0s;"></div>
      <div class="glow-orb" style="width: 20rem; height: 20rem; background: rgba(168, 85, 247, 0.2); top: 25%; right: 25%; animation-delay: 2s;"></div>
      <div class="glow-orb" style="width: 16rem; height: 16rem; background: rgba(16, 185, 129, 0.15); bottom: 25%; left: 33%; animation-delay: 4s;"></div>
    </div>

    <!-- Генерация звезд через JavaScript -->
    <xf:js>
      !function() {
        const bg = document.querySelector('.animated-background');
        if (!bg) return;
        for (let i = 0; i < 30; i++) {
          const star = document.createElement('div');
          star.className = 'star';
          star.style.width = (Math.random() * 3 + 1) + 'px';
          star.style.height = (Math.random() * 3 + 1) + 'px';
          star.style.top = (Math.random() * 100) + '%';
          star.style.left = (Math.random() * 100) + '%';
          star.style.animationDelay = (Math.random() * 3) + 's';
          star.style.animationDuration = (Math.random() * 2 + 2) + 's';
          bg.appendChild(star);
        }
      }();
    </xf:js>

    <!-- Hero секция -->
    <div style="position: relative; padding: 4rem 0;">
      <div style="max-width: 1280px; margin: 0 auto; padding: 0 1rem;">
       
        <!-- Заголовок -->
        <div style="text-align: center; margin-bottom: 4rem;">
          <h1 style="font-size: 3.5rem; font-weight: bold; margin-bottom: 1rem; line-height: 1.2;">
            <span style="color: #f3f4f6;">Выведите свой опыт</span><br>
            <span style="color: #10b981;">на новый уровень</span>
          </h1>
          <p style="color: #9ca3af; font-size: 1.125rem; max-width: 48rem; margin: 0 auto;">
            Обновите свой аккаунт, чтобы получить доступ к эксклюзивным преимуществам и специальным привилегиям
          </p>
        </div>

        <!-- Карточки цен -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;">
         
          <!-- ============= КАРТОЧКА: ОСНОВНОЙ ============= -->
          <div class="pricing-card">
           
            <!-- Бейдж -->
            <div style="margin-bottom: 1.5rem;">
              <span class="badge-upgrade">
                <svg style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.25rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Доступное обновление
              </span>
            </div>

            <!-- Заголовок -->
            <h3 style="font-size: 1.875rem; font-weight: bold; color: #f3f4f6; margin-bottom: 1.5rem;">Основной</h3>

            <!-- Premium баннер -->
            <div style="text-align: center; margin-bottom: 1.5rem;">
              <div class="forum-banner-premium"><strong>PREMIUM</strong></div>
            </div>

            <!-- Цена -->
            <div style="margin-bottom: 1.5rem;">
              <div style="display: flex; align-items: baseline; gap: 0.25rem;">
                <span style="font-size: 3rem; font-weight: bold; color: #f3f4f6;">150</span>
                <span style="color: #9ca3af; font-size: 1.5rem;">₽</span>
              </div>
              <p style="color: #9ca3af; margin-top: 0.5rem;">Навсегда</p>
            </div>

            <!-- Кнопки действий -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem;">
              <a href="#" class="btn-upgrade">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Обновление
              </a>
              <a href="#" class="btn-secondary">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>
                </svg>
                Подарок
              </a>
            </div>

            <!-- Функции -->
            <div style="margin-bottom: 1.5rem;">
              <div class="feature-row">
                <span style="color: #9ca3af;">PREMIUM цвет группы:</span>
                <span class="text-premium">Ваш никнейм</span>
              </div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Значок:</span>
                <span>💎</span>
              </div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Мощность представителя:</span>
                <span>VIP</span>
              </div>
            </div>

            <!-- Информация о пользователе -->
            <div style="margin-bottom: 1rem; font-size: 0.875rem;">
              <span style="color: #9ca3af;">K</span>
              <span class="text-premium">Morti_Freeze</span>
              <span class="vip-badge">VIP</span>
            </div>

            <!-- Голоса -->
            <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem;">
              <div>
                <svg style="width: 1rem; height: 1rem; color: #10b981; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>
                </svg>
                <span style="color: #10b981; font-weight: 500;">+1</span>
              </div>
              <div>
                <svg style="width: 1rem; height: 1rem; color: #ef4444; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>
                </svg>
                <span style="color: #ef4444; font-weight: 500;">-1</span>
              </div>
            </div>

            <!-- Бонусные баллы -->
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(255,255,255,0.05); border-radius: 0.5rem;">
              <span style="color: #9ca3af; font-size: 0.875rem; flex: 1;">Бонус битов</span>
              <svg style="width: 1.25rem; height: 1.25rem; color: #10b981;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
              </svg>
              <span style="color: #10b981; font-weight: bold;">1500</span>
            </div>

            <!-- Преимущества -->
            <div>
              <h4 style="font-size: 0.875rem; font-weight: 600; color: #f3f4f6; margin-bottom: 0.75rem;">Обновление включает в себя:</h4>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Создание собственной гильдии</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Загрузка фона форума</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Загрузка GIF баннеров и аватарок</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Редактор box-VIP</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Редактор пользовательского CSS (цвет никнейма)</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Нет ограничений на количество тем и сообщений</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Убраны все проверки на флуд</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Доступ ко всем наградам и значкам</span>
              </div>
            </div>
          </div>

          <!-- ============= КАРТОЧКА: БОЖЕСТВЕННЫЙ ============= -->
          <div class="pricing-card">
           
            <!-- Бейдж -->
            <div style="margin-bottom: 1.5rem; text-align: right;">
              <span class="badge-prime">
                <svg style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.25rem;" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
                </svg>
                Требуется Prime
              </span>
            </div>

            <!-- Заголовок -->
            <h3 style="font-size: 1.875rem; font-weight: bold; color: #f3f4f6; margin-bottom: 1.5rem;">Божественный</h3>

            <!-- Premium баннер -->
            <div style="text-align: center; margin-bottom: 1.5rem;">
              <div class="forum-banner-premium"><strong>PREMIUM</strong></div>
            </div>

            <!-- Цена -->
            <div style="margin-bottom: 1.5rem;">
              <div style="display: flex; align-items: baseline; gap: 0.25rem;">
                <span style="font-size: 3rem; font-weight: bold; color: #f3f4f6;">24.95</span>
                <span style="color: #9ca3af; font-size: 1.5rem;">₽</span>
              </div>
              <p style="color: #9ca3af; margin-top: 0.5rem;">Продолжительность жизни</p>
            </div>

            <!-- Кнопки действий -->
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem;">
              <a href="#" class="btn-upgrade">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Обновление
              </a>
              <a href="#" class="btn-secondary">
                <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/>
                </svg>
                Подарок
              </a>
            </div>

            <!-- Функции -->
            <div style="margin-bottom: 1.5rem;">
              <div class="feature-row"><span style="color: #9ca3af;">Цвет группы</span></div>
              <div class="feature-row">
                <span style="color: #9ca3af;">Премия</span>
                <span>💎</span>
              </div>
              <div class="feature-row"><span style="color: #9ca3af;">Мощность представителя</span></div>
            </div>

            <!-- Информация о пользователе -->
            <div style="margin-bottom: 1rem; font-size: 0.875rem;">
              <span style="color: #9ca3af;">K</span>
              <span class="text-premium">Morti_Freeze</span>
              <span class="vip-badge">VIP</span>
            </div>

            <!-- Голоса -->
            <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem;">
              <div>
                <svg style="width: 1rem; height: 1rem; color: #10b981; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>
                </svg>
                <span style="color: #10b981; font-weight: 500;">+3</span>
              </div>
              <div>
                <svg style="width: 1rem; height: 1rem; color: #ef4444; vertical-align: middle;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/>
                </svg>
                <span style="color: #ef4444; font-weight: 500;">-3</span>
              </div>
            </div>

            <!-- Бонусные баллы -->
            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(255,255,255,0.05); border-radius: 0.5rem;">
              <span style="color: #9ca3af; font-size: 0.875rem; flex: 1;">Бонус битов</span>
              <svg style="width: 1.25rem; height: 1.25rem; color: #10b981;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
              </svg>
              <span style="color: #10b981; font-weight: bold;">3500</span>
            </div>

            <!-- Преимущества -->
            <div>
              <h4 style="font-size: 0.875rem; font-weight: 600; color: #f3f4f6; margin-bottom: 0.75rem;">Все, что есть в Prime, плюс:</h4>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Удалить сообщения в собственной теме</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Сортировать награды</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Скрыть статус прочтения беседы</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Доступ к хранилищу имен пользователей</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Просмотр без рекламы</span>
              </div>
              <div class="benefit-item">
                <svg style="width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>Умножитель битов (1,5x)</span>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

UPD: Добавил CSS

extra.less:

:root {
  /* Основные цвета */
  --background: 220 15% 8%;
  --foreground: 0 0% 95%;
  --card: 220 15% 12%;
  --border: 220 15% 20%;
  --muted: 220 15% 15%;
  --muted-foreground: 220 10% 60%;
 
  /* Премиум цвета */
  --premium-color: 330 74% 67%;
  --premium-shadow: 327 80% 51%;
 
  /* Акценты */
  --upgrade: 160 84% 39%;
  --upgrade-foreground: 0 0% 100%;
  --prime: 270 80% 60%;
}

/* ============= АНИМАЦИИ ============= */

@keyframes rainbow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============= АНИМИРОВАННЫЙ ФОН ============= */

.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: float 6s ease-in-out infinite;
}

/* ============= VIP BADGE & PREMIUM TEXT ============= */

.vip-badge {
  margin-left: 5px;
  color: white;
  background: linear-gradient(90deg, #e87dcb, #d926a9, #e87dcb, #d926a9, #e87dcb);
  background-size: 400% 400%;
  border-radius: 7px;
  border: none;
  padding: 5px 10px;
  display: inline-block;
  margin: 0 6px -2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.5px;
  animation: rainbow 3s ease infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-family: 'Segoe UI', sans-serif;
}

.text-premium {
  color: #e87dcb;
  text-shadow: #d926a9 1px 1px 10px;
}

.forum-banner-premium {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 12rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 2px solid hsl(var(--banner-premium-border));
  background: linear-gradient(
    to bottom right,
    hsl(var(--banner-premium-start)),
    hsl(var(--banner-premium-end))
  );
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.forum-banner-premium::after {
  content: 'VIP';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.forum-banner-premium:hover {
  transform: scale(1.02);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    inset 0 2px 12px rgba(255, 255, 255, 0.15);
}

.forum-banner-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    transparent,
    rgba(0, 0, 0, 0.2)
  );
  border-radius: 1rem;
  pointer-events: none;
  z-index: 1;
}

.forum-banner-premium .userBanner-before {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  vertical-align: middle;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  &:before {
    .m-faContent("@fa-var-hat-cowboy-solid");
    speak: none;
    aria-hidden: true;
    display: inline-block;
    line-height: 1;
    text-rendering: auto;
  }
}


/* ============= КАРТОЧКИ ТАРИФОВ ============= */

.pricing-card {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: hsl(var(--upgrade) / 0.5);
}

.badge-upgrade {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-prime {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.btn-upgrade {
  background: #10b981;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-upgrade:hover {
  background: rgba(16, 185, 129, 0.9);
}

.btn-secondary {
  background: hsl(var(--muted));
  color: #f3f4f6;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(50, 57, 70, 0.8);
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

INTXEN · Понедельник в 19:44

@pikamonov

INTXEN · Понедельник в 19:50

@𝙡𝙖𝙨𝙩 𝙚𝙢𝙥𝙚𝙧𝙤𝙧.

Alone Devman · Понедельник в 20:16

Закинь в пись сик и он тебе исправит

INTXEN · Понедельник в 20:22

Alone Devman написал(а):
Закинь в пись сик и он тебе исправит

OFFTOP

ссылку

Alone Devman · Понедельник в 20:24

https://chat.deepseek.com/ наверное

INTXEN · Понедельник в 20:30

Alone Devman написал(а):
https://chat.deepseek.com/ наверное

JustAlex · Понедельник в 20:39

INTXEN написал(а):
Посмотреть вложение 14930

Скинь ему код страницы и css

INTXEN · Понедельник в 20:56

Решено

Alone Devman · Понедельник в 20:57

INTXEN написал(а):
Посмотреть вложение 14931

Решено

Ну точно не абуз решений, делись кодом

LIVE SAMP

Решено Решение проблемы HTML

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

INTXEN

Честь - не слово, это путь к истинне

INTXEN

Честь - не слово, это путь к истинне

INTXEN

Честь - не слово, это путь к истинне

INTXEN

Честь - не слово, это путь к истинне

Alone Devman

INTXEN

Честь - не слово, это путь к истинне

Alone Devman

INTXEN

Честь - не слово, это путь к истинне

JustAlex

Лучше плохо начать, чем хорошо бездействовать

INTXEN

Честь - не слово, это путь к истинне

Alone Devman