LIVE SAMP

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

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

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

Зарегистрироваться!
INTXEN

INTXEN

Честь - не слово, это путь к истинне
Активный
Регистрация
28 Дек 2023
Сообщения
412
Всем привет, один из первых делаю такой слив абсолютно бесплатно хотя дизайн был сделан с нуля но и благодаря ИИ исправления самого HTML. Здесь уже почти все готовое осталось немного поправить действий кнопок, я делаю их для платёжного профиля "DragonByte Credits" но пока без успехов, данная версия не первая и не последняя в будущем будем обновлять и читать данную тему для доработки шаблона. Пожалуй не откажусь от поддержки с вашей стороны, так как ещё такого никто не сливал)
1000494894.jpg
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

INTXEN

Честь - не слово, это путь к истинне
Активный
Регистрация
28 Дек 2023
Сообщения
412
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 не нужно вставать!
Нажмите для раскрытия...
1000494896.jpg
Еще будет вот такая фича на проверку имеет ли пользователь группу прав PREMIUM.
 
viovit

viovit

Активный
Регистрация
26 Апр 2022
Сообщения
1,088
а вы знали что не обязательно мучать бедный шаблон чтоб он потом взорвался, а что можно просто создать МОДИФИКАЦИЮ ШАБЛОНА???
 
INTXEN

INTXEN

Честь - не слово, это путь к истинне
Активный
Регистрация
28 Дек 2023
Сообщения
412
viovit написал(а):
а вы знали что не обязательно мучать бедный шаблон чтоб он потом взорвался, а что можно просто создать МОДИФИКАЦИЮ ШАБЛОНА???
Нажмите для раскрытия...
OFFTOP

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

 
viovit

viovit

Активный
Регистрация
26 Апр 2022
Сообщения
1,088
INTXEN написал(а):
OFFTOP

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

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

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

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

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

Anonimed

Пользователь
Регистрация
15 Фев 2025
Сообщения
192
INTXEN написал(а):
OFFTOP

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

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

viovit

Активный
Регистрация
26 Апр 2022
Сообщения
1,088
INTXEN написал(а):
OFFTOP

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

Нажмите для раскрытия...
спасибо говорят если это используют, а этот товарищ наврятли будет подобное использовать, как и я
 
INTXEN

INTXEN

Честь - не слово, это путь к истинне
Активный
Регистрация
28 Дек 2023
Сообщения
412
shama crime написал(а):
бля братан я тож могу с помощью ии это за 5 минут написать и слить «Этого еще никто не делал это юксклюзив»
Нажмите для раскрытия...
OFFTOP

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

 
viovit

viovit

Активный
Регистрация
26 Апр 2022
Сообщения
1,088
INTXEN написал(а):
OFFTOP

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

Нажмите для раскрытия...
если что на данном форуме не одобряется практика с ИИ
 
INTXEN

INTXEN

Честь - не слово, это путь к истинне
Активный
Регистрация
28 Дек 2023
Сообщения
412
viovit написал(а):
если что на данном форуме не одобряется практика с ИИ
Нажмите для раскрытия...
OFFTOP

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

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

 
Anonimed

Anonimed

Пользователь
Регистрация
15 Фев 2025
Сообщения
192
INTXEN написал(а):
OFFTOP

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

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

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

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

viovit

Активный
Регистрация
26 Апр 2022
Сообщения
1,088
INTXEN написал(а):
OFFTOP

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

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

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

pikamonov

𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,460
INTXEN написал(а):
OFFTOP

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

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

Нажмите для раскрытия...
1761592782050.png
 
Войдите или зарегистрируйтесь для ответа.
Сверху