Модификации шаблона accounts_updates

INTXEN · 27 Окт 2025

Всем привет, один из первых делаю такой слив абсолютно бесплатно хотя дизайн был сделан с нуля но и благодаря ИИ исправления самого HTML. Здесь уже почти все готовое осталось немного поправить действий кнопок, я делаю их для платёжного профиля "DragonByte Credits" но пока без успехов, данная версия не первая и не последняя в будущем будем обновлять и читать данную тему для доработки шаблона. Пожалуй не откажусь от поддержки с вашей стороны, так как ещё такого никто не сливал)

P.s. дам вам один такой спойлер - следующий слив будет на модификацию шаблона DragonByte Shop Item)

CSS + HTML:

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

<xf:css>
/* ============= ПЕРЕМЕННЫЕ ============= */
:root {
    --background: 220 15% 8%;
    --foreground: 0 0% 95%;
    --card: 220 15% 12%;
    --card-hover: 220 15% 14%;
    --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%;
    --accent-glow: 0 0% 100% / 0.1;
}

/* ============= АНИМАЦИИ XENFORO 2.3 ============= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

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

/* ============= АНИМАЦИЯ ПАДАЮЩИХ ЗВЕЗД ============= */
@keyframes fallingStar {
    0% {
        transform: translateY(-100px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: fallingStar linear infinite;
}

/* ============= ОСНОВНЫЕ СТИЛИ ============= */
.account-upgrades-container {
    position: relative;
    min-height: 100vh;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}

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

.animated-background-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(232, 125, 203, 0.05) 0%, transparent 50%);
}

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

.glow-orb-1 {
    width: 30rem;
    height: 30rem;
    background:
        radial-gradient(circle,
            rgba(16, 185, 129, 0.3) 0%,
            rgba(16, 185, 129, 0.1) 50%,
            transparent 100%);
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.glow-orb-2 {
    width: 25rem;
    height: 25rem;
    background:
        radial-gradient(circle,
            rgba(168, 85, 247, 0.25) 0%,
            rgba(168, 85, 247, 0.1) 50%,
            transparent 100%);
    top: 30%;
    right: 20%;
    animation-delay: 2s;
}

.glow-orb-3 {
    width: 20rem;
    height: 20rem;
    background:
        radial-gradient(circle,
            rgba(232, 125, 203, 0.2) 0%,
            rgba(232, 125, 203, 0.05) 50%,
            transparent 100%);
    bottom: 20%;
    left: 25%;
    animation-delay: 4s;
}

/* ============= SVG ИКОНКИ ============= */
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.svg-icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.svg-icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.svg-icon-xl {
    width: 1.5em;
    height: 1.5em;
}

/* ============= VIP BADGE & PREMIUM TEXT ============= */
.vip-badge {
    margin-left: 5px;
    color: white;
    background: linear-gradient(135deg, #e87dcb, #d926a9, #e87dcb);
    background-size: 400% 400%;
    border-radius: 8px;
    border: none;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px -2px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.5px;
    animation: rainbow 3s ease infinite, pulseGlow 2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 8px rgba(217, 38, 169, 0.3);
}

.text-premium {
    color: #e87dcb;
    text-shadow: 0 0 10px rgba(217, 38, 169, 0.5);
    font-weight: 600;
}

.forum-banner-premium {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 14rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 2px solid rgba(232, 125, 203, 0.3);
    background: linear-gradient(
        135deg,
        rgba(232, 125, 203, 0.9) 0%,
        rgba(217, 38, 169, 0.7) 100%
    );
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.2),
        0 0 20px rgba(232, 125, 203, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulseGlow 3s ease-in-out infinite;
}

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

.forum-banner-premium:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 2px 12px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(232, 125, 203, 0.5);
    border-color: rgba(232, 125, 203, 0.6);
}

.forum-banner-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.2) 100%
    );
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* ============= КАРТОЧКИ ТАРИФОВ ============= */
.pricing-card {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--card-hover)) 100%);
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    animation: fadeInUp 0.8s ease-out;
    max-width: 450px;
    margin: 0 auto;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.6s;
}

.pricing-card:hover::before {
    left: 100%;
}

.pricing-card:hover {
    border-color: hsl(var(--upgrade) / 0.6);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(16, 185, 129, 0.2);
}

.badge-upgrade {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: slideInLeft 0.6s ease-out;
}

/* ============= КНОПКИ ============= */
.btn-upgrade {
    background: linear-gradient(135deg, #10b981 0%, #0d9668 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.btn-upgrade::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s;
}

.btn-upgrade:hover::before {
    left: 100%;
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, #0d9668 0%, #0a7c55 100%);
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--border)) 100%);
    color: #f3f4f6;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    flex: 1;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, hsl(var(--border)) 0%, hsl(var(--muted)) 100%);
    text-decoration: none;
    color: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: hsl(var(--upgrade) / 0.3);
}

/* ============= СЕТКА И МАКЕТ ============= */
.upgrade-hero {
    position: relative;
    padding: 4rem 0;
}

.upgrade-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.upgrade-header {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.upgrade-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    background: linear-gradient(135deg, #f3f4f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.upgrade-description {
    color: #9ca3af;
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 500px;
    margin: 0 auto;
}

/* ============= КОМПОНЕНТЫ КАРТОЧЕК ============= */
.pricing-badge {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f3f4f6;
    margin-bottom: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #e87dcb 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-banner-container {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-section {
    margin-bottom: 2rem;
    text-align: center;
}

.price-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: #f3f4f6;
    line-height: 1;
}

.price-currency {
    color: #9ca3af;
    font-size: 1.75rem;
    font-weight: 600;
}

.price-duration {
    color: #10b981;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.features-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.feature-label {
    color: #9ca3af;
    font-weight: 500;
}

/* ============= ПРЕДПРОСМОТР ПРОФИЛЯ ============= */
.preview-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 2px dashed rgba(16, 185, 129, 0.3);
    text-align: center;
}

.preview-label {
    display: block;
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.user-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(232, 125, 203, 0.5);
    box-shadow: 0 0 15px rgba(232, 125, 203, 0.3);
}

.user-info-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-name {
    font-weight: 600;
    color: #f3f4f6;
    font-size: 1.1rem;
}

.votes-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    justify-content: center;
}

.vote-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.vote-up {
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vote-down {
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.vote-count {
    font-weight: 700;
    font-size: 1rem;
}

.bonus-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.bonus-label {
    color: #9ca3af;
    font-size: 0.9rem;
    flex: 1;
    font-weight: 500;
}

.bonus-amount {
    color: #10b981;
    font-weight: 800;
    font-size: 1.25rem;
}

.benefits-section {
    margin-top: 2rem;
}

.benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f3f4f6;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #d1d5db;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

/* ============= АДАПТИВНОСТЬ ============= */
@media (max-width: 768px) {
    .upgrade-title {
        font-size: 2.5rem !important;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
    
    .pricing-card {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .price-amount {
        font-size: 3rem;
    }
    
    .user-preview {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .upgrade-hero {
        padding: 2rem 0;
    }
    
    .upgrade-title {
        font-size: 2rem !important;
    }
    
    .upgrade-description {
        font-size: 1rem !important;
        padding: 0 1rem;
    }
    
    .pricing-title {
        font-size: 2rem;
    }
    
    .feature-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
    
    .votes-section {
        flex-direction: column;
        align-items: center;
    }
}
</xf:css>

<div class="account-upgrades-container">
    <div class="block-container">
        <div class="block-body">
            
            <!-- Анимированный фон с падающими звездами -->
            <div class="animated-background">
                <div class="animated-background-overlay"></div>
                <div class="glow-orb glow-orb-1"></div>
                <div class="glow-orb glow-orb-2"></div>
                <div class="glow-orb glow-orb-3"></div>
                
                <!-- CSS звезды (без JavaScript) -->
                <div class="star" style="left: 10%; animation-duration: 8s; animation-delay: 0s;"></div>
                <div class="star" style="left: 20%; animation-duration: 10s; animation-delay: 1s;"></div>
                <div class="star" style="left: 30%; animation-duration: 12s; animation-delay: 2s;"></div>
                <div class="star" style="left: 40%; animation-duration: 9s; animation-delay: 3s;"></div>
                <div class="star" style="left: 50%; animation-duration: 11s; animation-delay: 4s;"></div>
                <div class="star" style="left: 60%; animation-duration: 7s; animation-delay: 5s;"></div>
                <div class="star" style="left: 70%; animation-duration: 13s; animation-delay: 6s;"></div>
                <div class="star" style="left: 80%; animation-duration: 8s; animation-delay: 7s;"></div>
                <div class="star" style="left: 90%; animation-duration: 10s; animation-delay: 8s;"></div>
                <div class="star" style="left: 15%; animation-duration: 14s; animation-delay: 9s;"></div>
                <div class="star" style="left: 25%; animation-duration: 9s; animation-delay: 10s;"></div>
                <div class="star" style="left: 35%; animation-duration: 11s; animation-delay: 11s;"></div>
                <div class="star" style="left: 45%; animation-duration: 8s; animation-delay: 12s;"></div>
                <div class="star" style="left: 55%; animation-duration: 12s; animation-delay: 13s;"></div>
                <div class="star" style="left: 65%; animation-duration: 10s; animation-delay: 14s;"></div>
            </div>

            <!-- Hero секция -->
            <div class="upgrade-hero">
                <div class="upgrade-hero-container">
                    
                    <!-- Заголовок -->
                    <div class="upgrade-header">
                        <h1 class="upgrade-title">
                            Выведите свой опыт<br>на новый уровень
                        </h1>
                        <p class="upgrade-description">
                            Обновите свой аккаунт, чтобы получить доступ к эксклюзивным преимуществам и специальным привилегиям
                        </p>
                    </div>

                    <!-- Карточка PREMIUM -->
                    <div class="pricing-grid">
                        
                        <!-- ============= КАРТОЧКА: PREMIUM ============= -->
                        <div class="pricing-card">
                            
                            <!-- Бейдж -->
                            <div class="pricing-badge">
                                <span class="badge-upgrade">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="M5 12h14M12 5l7 7-7 7"/>
                                    </svg>
                                    Премиум обновление
                                </span>
                            </div>

                            <!-- Заголовок -->
                            <h3 class="pricing-title">PREMIUM</h3>

                            <!-- Premium баннер -->
                            <div class="premium-banner-container">
                                <div class="forum-banner-premium">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="margin-right: 8px;">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                    </svg>
                                    PREMIUM
                                </div>
                            </div>

                            <!-- Цена -->
                            <div class="pricing-section">
                                <div class="price-display">
                                    <span class="price-amount">150</span>
                                    <span class="price-currency">₽</span>
                                </div>
                                <p class="price-duration">Навсегда</p>
                            </div>

                            <!-- Кнопки действий -->
                            <div class="action-buttons">
                                <xf:button href="{{ link('account/upgrades') }}" class="btn-upgrade">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="M5 12h14M12 5l7 7-7 7"/>
                                    </svg>
                                    Обновить
                                </xf:button>
                                <xf:button href="{{ link('misc/gift-upgrade') }}" class="btn-secondary">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <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>
                                    Подарить
                                </xf:button>
                            </div>

                            <!-- Предпросмотр профиля -->
                            <div class="preview-section">
                                <span class="preview-label">Предпросмотр вашего профиля</span>
                                <div class="user-preview">
                                    <xf:avatar user="$xf.visitor" size="m" class="user-avatar" />
                                    <div class="user-info-preview">
                                        <span class="user-name">{$xf.visitor.username}</span>
                                        <span class="vip-badge">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                            VIP
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Функции -->
                            <div class="features-section">
                                <div class="feature-row">
                                    <span class="feature-label">Цвет группы:</span>
                                    <span class="text-premium">{$xf.visitor.username}</span>
                                </div>
                                <div class="feature-row">
                                    <span class="feature-label">Значок:</span>
                                    <span class="vip-badge">
                                        <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                        VIP
                                    </span>
                                </div>
                                <div class="feature-row">
                                    <span class="feature-label">Сила голоса:</span>
                                    <div class="votes-section">
                                        <div class="vote-item vote-up">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M7 10v12M15 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 class="vote-count">+1</span>
                                        </div>
                                        <div class="vote-item vote-down">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M17 14V2M9 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 class="vote-count">-1</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Бонусные баллы -->
                            <div class="bonus-section">
                                <span class="bonus-label">Бонусные биты</span>
                                <svg class="svg-icon-lg" viewBox="0 0 24 24" style="color: #10b981;">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="m9 12 2 2 4-4"/>
                                </svg>
                                <span class="bonus-amount">1500</span>
                            </div>

                            <!-- Преимущества -->
                            <div class="benefits-section">
                                <h4 class="benefits-title">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="m9 12 2 2 4-4"/>
                                        <circle cx="12" cy="12" r="10"/>
                                    </svg>
                                    Преимущества PREMIUM
                                </h4>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Создание собственной гильдии</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Загрузка фона форума</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Загрузка GIF баннеров и аватарок</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Редактор box-VIP</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Редактор пользовательского CSS</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Нет ограничений на темы и сообщения</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Убраны проверки на флуд</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Доступ ко всем наградам и значкам</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Панель управления - > Внешний вид - > Шаблоны - > account_upgrades
/admin.php?templates/account_upgrades.1662/edit&_xfRedirect=https%3A%2F%2Flegendshub.ru%2Fadmin.php%3Fstyles%2Fdefault-style.1%2Ftemplates%26type%3Dpublic

Вставляем весь код ничего в extra.less не нужно вставать!

INTXEN · 27 Окт 2025

@Alone Devman

INTXEN · 27 Окт 2025

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

Всем привет, один из первых делаю такой слив абсолютно бесплатно хотя дизайн был сделан с нуля но и благодаря ИИ исправления самого HTML. Здесь уже почти все готовое осталось немного поправить действий кнопок, я делаю их для платёжного профиля "DragonByte Credits" но пока без успехов, данная версия не первая и не последняя в будущем будем обновлять и читать данную тему для доработки шаблона. Пожалуй не откажусь от поддержки с вашей стороны, так как ещё такого никто не сливал)
Посмотреть вложение 14933
P.s. дам вам один такой спойлер - следующий слив будет на модификацию шаблона DragonByte Shop Item)

CSS + HTML:

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

<xf:css>
/* ============= ПЕРЕМЕННЫЕ ============= */
:root {
    --background: 220 15% 8%;
    --foreground: 0 0% 95%;
    --card: 220 15% 12%;
    --card-hover: 220 15% 14%;
    --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%;
    --accent-glow: 0 0% 100% / 0.1;
}

/* ============= АНИМАЦИИ XENFORO 2.3 ============= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

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

/* ============= АНИМАЦИЯ ПАДАЮЩИХ ЗВЕЗД ============= */
@keyframes fallingStar {
    0% {
        transform: translateY(-100px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: fallingStar linear infinite;
}

/* ============= ОСНОВНЫЕ СТИЛИ ============= */
.account-upgrades-container {
    position: relative;
    min-height: 100vh;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}

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

.animated-background-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(232, 125, 203, 0.05) 0%, transparent 50%);
}

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

.glow-orb-1 {
    width: 30rem;
    height: 30rem;
    background:
        radial-gradient(circle,
            rgba(16, 185, 129, 0.3) 0%,
            rgba(16, 185, 129, 0.1) 50%,
            transparent 100%);
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.glow-orb-2 {
    width: 25rem;
    height: 25rem;
    background:
        radial-gradient(circle,
            rgba(168, 85, 247, 0.25) 0%,
            rgba(168, 85, 247, 0.1) 50%,
            transparent 100%);
    top: 30%;
    right: 20%;
    animation-delay: 2s;
}

.glow-orb-3 {
    width: 20rem;
    height: 20rem;
    background:
        radial-gradient(circle,
            rgba(232, 125, 203, 0.2) 0%,
            rgba(232, 125, 203, 0.05) 50%,
            transparent 100%);
    bottom: 20%;
    left: 25%;
    animation-delay: 4s;
}

/* ============= SVG ИКОНКИ ============= */
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.svg-icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.svg-icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.svg-icon-xl {
    width: 1.5em;
    height: 1.5em;
}

/* ============= VIP BADGE & PREMIUM TEXT ============= */
.vip-badge {
    margin-left: 5px;
    color: white;
    background: linear-gradient(135deg, #e87dcb, #d926a9, #e87dcb);
    background-size: 400% 400%;
    border-radius: 8px;
    border: none;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 6px -2px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.5px;
    animation: rainbow 3s ease infinite, pulseGlow 2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 8px rgba(217, 38, 169, 0.3);
}

.text-premium {
    color: #e87dcb;
    text-shadow: 0 0 10px rgba(217, 38, 169, 0.5);
    font-weight: 600;
}

.forum-banner-premium {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 14rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 2px solid rgba(232, 125, 203, 0.3);
    background: linear-gradient(
        135deg,
        rgba(232, 125, 203, 0.9) 0%,
        rgba(217, 38, 169, 0.7) 100%
    );
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 2px 8px rgba(255, 255, 255, 0.2),
        0 0 20px rgba(232, 125, 203, 0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulseGlow 3s ease-in-out infinite;
}

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

.forum-banner-premium:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 2px 12px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(232, 125, 203, 0.5);
    border-color: rgba(232, 125, 203, 0.6);
}

.forum-banner-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.2) 100%
    );
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* ============= КАРТОЧКИ ТАРИФОВ ============= */
.pricing-card {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--card-hover)) 100%);
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    animation: fadeInUp 0.8s ease-out;
    max-width: 450px;
    margin: 0 auto;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.6s;
}

.pricing-card:hover::before {
    left: 100%;
}

.pricing-card:hover {
    border-color: hsl(var(--upgrade) / 0.6);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(16, 185, 129, 0.2);
}

.badge-upgrade {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: slideInLeft 0.6s ease-out;
}

/* ============= КНОПКИ ============= */
.btn-upgrade {
    background: linear-gradient(135deg, #10b981 0%, #0d9668 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.btn-upgrade::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s;
}

.btn-upgrade:hover::before {
    left: 100%;
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, #0d9668 0%, #0a7c55 100%);
    text-decoration: none;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--border)) 100%);
    color: #f3f4f6;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    flex: 1;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, hsl(var(--border)) 0%, hsl(var(--muted)) 100%);
    text-decoration: none;
    color: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: hsl(var(--upgrade) / 0.3);
}

/* ============= СЕТКА И МАКЕТ ============= */
.upgrade-hero {
    position: relative;
    padding: 4rem 0;
}

.upgrade-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.upgrade-header {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.upgrade-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    background: linear-gradient(135deg, #f3f4f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.upgrade-description {
    color: #9ca3af;
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 500px;
    margin: 0 auto;
}

/* ============= КОМПОНЕНТЫ КАРТОЧЕК ============= */
.pricing-badge {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f3f4f6;
    margin-bottom: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #e87dcb 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-banner-container {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-section {
    margin-bottom: 2rem;
    text-align: center;
}

.price-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: #f3f4f6;
    line-height: 1;
}

.price-currency {
    color: #9ca3af;
    font-size: 1.75rem;
    font-weight: 600;
}

.price-duration {
    color: #10b981;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.features-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.feature-label {
    color: #9ca3af;
    font-weight: 500;
}

/* ============= ПРЕДПРОСМОТР ПРОФИЛЯ ============= */
.preview-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 2px dashed rgba(16, 185, 129, 0.3);
    text-align: center;
}

.preview-label {
    display: block;
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.user-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(232, 125, 203, 0.5);
    box-shadow: 0 0 15px rgba(232, 125, 203, 0.3);
}

.user-info-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-name {
    font-weight: 600;
    color: #f3f4f6;
    font-size: 1.1rem;
}

.votes-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    justify-content: center;
}

.vote-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.vote-up {
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vote-down {
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.vote-count {
    font-weight: 700;
    font-size: 1rem;
}

.bonus-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.bonus-label {
    color: #9ca3af;
    font-size: 0.9rem;
    flex: 1;
    font-weight: 500;
}

.bonus-amount {
    color: #10b981;
    font-weight: 800;
    font-size: 1.25rem;
}

.benefits-section {
    margin-top: 2rem;
}

.benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f3f4f6;
    margin-bottom: 1rem;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #d1d5db;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

/* ============= АДАПТИВНОСТЬ ============= */
@media (max-width: 768px) {
    .upgrade-title {
        font-size: 2.5rem !important;
    }
  
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
  
    .action-buttons {
        grid-template-columns: 1fr;
    }
  
    .pricing-card {
        padding: 1.5rem;
        margin: 0 1rem;
    }
  
    .price-amount {
        font-size: 3rem;
    }
  
    .user-preview {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .upgrade-hero {
        padding: 2rem 0;
    }
  
    .upgrade-title {
        font-size: 2rem !important;
    }
  
    .upgrade-description {
        font-size: 1rem !important;
        padding: 0 1rem;
    }
  
    .pricing-title {
        font-size: 2rem;
    }
  
    .feature-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }
  
    .votes-section {
        flex-direction: column;
        align-items: center;
    }
}
</xf:css>

<div class="account-upgrades-container">
    <div class="block-container">
        <div class="block-body">
          
            <!-- Анимированный фон с падающими звездами -->
            <div class="animated-background">
                <div class="animated-background-overlay"></div>
                <div class="glow-orb glow-orb-1"></div>
                <div class="glow-orb glow-orb-2"></div>
                <div class="glow-orb glow-orb-3"></div>
              
                <!-- CSS звезды (без JavaScript) -->
                <div class="star" style="left: 10%; animation-duration: 8s; animation-delay: 0s;"></div>
                <div class="star" style="left: 20%; animation-duration: 10s; animation-delay: 1s;"></div>
                <div class="star" style="left: 30%; animation-duration: 12s; animation-delay: 2s;"></div>
                <div class="star" style="left: 40%; animation-duration: 9s; animation-delay: 3s;"></div>
                <div class="star" style="left: 50%; animation-duration: 11s; animation-delay: 4s;"></div>
                <div class="star" style="left: 60%; animation-duration: 7s; animation-delay: 5s;"></div>
                <div class="star" style="left: 70%; animation-duration: 13s; animation-delay: 6s;"></div>
                <div class="star" style="left: 80%; animation-duration: 8s; animation-delay: 7s;"></div>
                <div class="star" style="left: 90%; animation-duration: 10s; animation-delay: 8s;"></div>
                <div class="star" style="left: 15%; animation-duration: 14s; animation-delay: 9s;"></div>
                <div class="star" style="left: 25%; animation-duration: 9s; animation-delay: 10s;"></div>
                <div class="star" style="left: 35%; animation-duration: 11s; animation-delay: 11s;"></div>
                <div class="star" style="left: 45%; animation-duration: 8s; animation-delay: 12s;"></div>
                <div class="star" style="left: 55%; animation-duration: 12s; animation-delay: 13s;"></div>
                <div class="star" style="left: 65%; animation-duration: 10s; animation-delay: 14s;"></div>
            </div>

            <!-- Hero секция -->
            <div class="upgrade-hero">
                <div class="upgrade-hero-container">
                  
                    <!-- Заголовок -->
                    <div class="upgrade-header">
                        <h1 class="upgrade-title">
                            Выведите свой опыт<br>на новый уровень
                        </h1>
                        <p class="upgrade-description">
                            Обновите свой аккаунт, чтобы получить доступ к эксклюзивным преимуществам и специальным привилегиям
                        </p>
                    </div>

                    <!-- Карточка PREMIUM -->
                    <div class="pricing-grid">
                      
                        <!-- ============= КАРТОЧКА: PREMIUM ============= -->
                        <div class="pricing-card">
                          
                            <!-- Бейдж -->
                            <div class="pricing-badge">
                                <span class="badge-upgrade">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="M5 12h14M12 5l7 7-7 7"/>
                                    </svg>
                                    Премиум обновление
                                </span>
                            </div>

                            <!-- Заголовок -->
                            <h3 class="pricing-title">PREMIUM</h3>

                            <!-- Premium баннер -->
                            <div class="premium-banner-container">
                                <div class="forum-banner-premium">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="margin-right: 8px;">
                                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                    </svg>
                                    PREMIUM
                                </div>
                            </div>

                            <!-- Цена -->
                            <div class="pricing-section">
                                <div class="price-display">
                                    <span class="price-amount">150</span>
                                    <span class="price-currency">₽</span>
                                </div>
                                <p class="price-duration">Навсегда</p>
                            </div>

                            <!-- Кнопки действий -->
                            <div class="action-buttons">
                                <xf:button href="{{ link('account/upgrades') }}" class="btn-upgrade">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="M5 12h14M12 5l7 7-7 7"/>
                                    </svg>
                                    Обновить
                                </xf:button>
                                <xf:button href="{{ link('misc/gift-upgrade') }}" class="btn-secondary">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <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>
                                    Подарить
                                </xf:button>
                            </div>

                            <!-- Предпросмотр профиля -->
                            <div class="preview-section">
                                <span class="preview-label">Предпросмотр вашего профиля</span>
                                <div class="user-preview">
                                    <xf:avatar user="$xf.visitor" size="m" class="user-avatar" />
                                    <div class="user-info-preview">
                                        <span class="user-name">{$xf.visitor.username}</span>
                                        <span class="vip-badge">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                            VIP
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Функции -->
                            <div class="features-section">
                                <div class="feature-row">
                                    <span class="feature-label">Цвет группы:</span>
                                    <span class="text-premium">{$xf.visitor.username}</span>
                                </div>
                                <div class="feature-row">
                                    <span class="feature-label">Значок:</span>
                                    <span class="vip-badge">
                                        <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                        VIP
                                    </span>
                                </div>
                                <div class="feature-row">
                                    <span class="feature-label">Сила голоса:</span>
                                    <div class="votes-section">
                                        <div class="vote-item vote-up">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M7 10v12M15 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 class="vote-count">+1</span>
                                        </div>
                                        <div class="vote-item vote-down">
                                            <svg class="svg-icon-sm" viewBox="0 0 24 24">
                                                <path d="M17 14V2M9 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 class="vote-count">-1</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Бонусные баллы -->
                            <div class="bonus-section">
                                <span class="bonus-label">Бонусные биты</span>
                                <svg class="svg-icon-lg" viewBox="0 0 24 24" style="color: #10b981;">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="m9 12 2 2 4-4"/>
                                </svg>
                                <span class="bonus-amount">1500</span>
                            </div>

                            <!-- Преимущества -->
                            <div class="benefits-section">
                                <h4 class="benefits-title">
                                    <svg class="svg-icon" viewBox="0 0 24 24">
                                        <path d="m9 12 2 2 4-4"/>
                                        <circle cx="12" cy="12" r="10"/>
                                    </svg>
                                    Преимущества PREMIUM
                                </h4>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Создание собственной гильдии</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Загрузка фона форума</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Загрузка GIF баннеров и аватарок</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Редактор box-VIP</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Редактор пользовательского CSS</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Нет ограничений на темы и сообщения</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Убраны проверки на флуд</span>
                                </div>
                                <div class="benefit-item">
                                    <svg class="svg-icon" viewBox="0 0 24 24" style="color: #10b981;">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                    <span>Доступ ко всем наградам и значкам</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Панель управления - > Внешний вид - > Шаблоны - > account_upgrades
/admin.php?templates/account_upgrades.1662/edit&_xfRedirect=https%3A%2F%2Flegendshub.ru%2Fadmin.php%3Fstyles%2Fdefault-style.1%2Ftemplates%26type%3Dpublic

Вставляем весь код ничего в extra.less не нужно вставать!

Еще будет вот такая фича на проверку имеет ли пользователь группу прав PREMIUM.

viovit · 27 Окт 2025

а вы знали что не обязательно мучать бедный шаблон чтоб он потом взорвался, а что можно просто создать МОДИФИКАЦИЮ ШАБЛОНА???

INTXEN · 27 Окт 2025

viovit написал(а):
а вы знали что не обязательно мучать бедный шаблон чтоб он потом взорвался, а что можно просто создать МОДИФИКАЦИЮ ШАБЛОНА???

OFFTOP

Толку от этого? Если уже имеется готовый шаблон легче его заменить

Zenettany · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Толку от этого? Если уже имеется готовый шаблон легче его заменить

А в чем проблема сделать новый ?

INTXEN · 27 Окт 2025

Zenettany написал(а):
А в чем проблема сделать новый ?

OFFTOP

Какая разница новый или старый шаблон, зачем нагружать себя доп работай?

INTXEN · 27 Окт 2025

OFFTOP

@pikamonov где моя краска?

INTXEN · 27 Окт 2025

Zenettany написал(а):
А в чем проблема сделать новый ?

OFFTOP

Да и вместо этого можно было сказать спасибо за слив, никто ещё сливал такого

viovit · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Толку от этого? Если уже имеется готовый шаблон легче его заменить

с таким подходом, я могу сейчас пойти файлы движка редачить и сказать тоже самое, а потом сидеть с бабахнутым форумом и плакать

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

банально когда у тебя код сломался или не работает, ты же не будешь сидеть водить мышкой и удалять все это, когда можно просто в модификации шаблона просто нажать на ползунок и отключить всё

а ещё модификация шаблона применяется на абсолютно все стили, а не только на один - что тоже очень большой плюс

Anonimed · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Да и вместо этого можно было сказать спасибо за слив, никто ещё сливал такого

бля братан я тож могу с помощью ии это за 5 минут написать и слить «Этого еще никто не делал это юксклюзив»

viovit · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Да и вместо этого можно было сказать спасибо за слив, никто ещё сливал такого

спасибо говорят если это используют, а этот товарищ наврятли будет подобное использовать, как и я

viovit · 27 Окт 2025

INTXEN написал(а):
OFFTOP
@pikamonov где моя краска?

не будет, я договорюсь

INTXEN · 27 Окт 2025

shama crime написал(а):
бля братан я тож могу с помощью ии это за 5 минут написать и слить «Этого еще никто не делал это юксклюзив»

OFFTOP

И что? Ну написан он на ИИ? Трагедия прям пипец, уже все через ии делают потому что он меньше ошибок совершает, ии это прогресс мира по этому не надо говорить о том что писать код на ии плохо. Если не хочешь не используй мне то что, другие будут использовать

viovit · 27 Окт 2025

INTXEN написал(а):
OFFTOP
И что? Ну написан он на ИИ? Трагедия прям пипец, уже все через ии делают потому что он меньше ошибок совершает, ии это прогресс мира по этому не надо говорить о том что писать код на ии плохо. Если не хочешь не используй мне то что, другие будут использовать

если что на данном форуме не одобряется практика с ИИ

INTXEN · 27 Окт 2025

viovit написал(а):
если что на данном форуме не одобряется практика с ИИ

OFFTOP

Да ты что... В правилах указано что нельзя публиковать ответы которые были сгенерированны Chat GPT или иных ИИ-Моделей. Что-то я не нашёл правила которое запрещает сливать код который был сгенерирован ИИ-Моделей или Chat GPT. Может я слепой покажи мне, а может ты просто не знаешь формулировку русского языка, в чем может быть проблема незнаю.

2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.

Anonimed · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Да ты что... В правилах указано что нельзя публиковать ответы которые были сгенерированны Chat GPT или иных ИИ-Моделей. Что-то я не нашёл правила которое запрещает сливать код который был сгенерирован ИИ-Моделей или Chat GPT. Может я слепой покажи мне, а может ты просто не знаешь формулировку русского языка, в чем может быть проблема незнаю.

2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.

так какая разница , что именно запрещено от ии сливать код или формулировку

в правиле написано, что запрещено публиковать ии , ты опубликовал код сгенерированный ии т.е ChatGPT

viovit · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Да ты что... В правилах указано что нельзя публиковать ответы которые были сгенерированны Chat GPT или иных ИИ-Моделей. Что-то я не нашёл правила которое запрещает сливать код который был сгенерирован ИИ-Моделей или Chat GPT. Может я слепой покажи мне, а может ты просто не знаешь формулировку русского языка, в чем может быть проблема незнаю.

2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.

значит подниму тему что правило нужно переписать, без проблем, так и так практика с ии тут "НЕ ОДОБРЯЕТСЯ" - речь о правиле не было, сам уже придумал

pikamonov · 27 Окт 2025

INTXEN написал(а):
OFFTOP
Да ты что... В правилах указано что нельзя публиковать ответы которые были сгенерированны Chat GPT или иных ИИ-Моделей. Что-то я не нашёл правила которое запрещает сливать код который был сгенерирован ИИ-Моделей или Chat GPT. Может я слепой покажи мне, а может ты просто не знаешь формулировку русского языка, в чем может быть проблема незнаю.

2.20. Запрещено публиковать ответы, сгенерированные при помощи ChatGPT или аналогичных ИИ-моделей.

viovit · 27 Окт 2025

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

упс как же так

LIVE SAMP

Модификации шаблона accounts_updates

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

INTXEN

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

INTXEN

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

INTXEN

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

viovit

@viovit_dev

INTXEN

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

Zenettany

INTXEN

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

INTXEN

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

INTXEN

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

viovit

@viovit_dev

Anonimed

viovit

@viovit_dev

viovit

@viovit_dev

INTXEN

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

viovit

@viovit_dev

INTXEN

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

Anonimed

viovit

@viovit_dev

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.

viovit

@viovit_dev