كود كود معلومات العضو في القائمة الجانبية

<xf:if is="$xf.visitor.user_id">
    <div class="visitor-panel-new">
        <div class="visitor">
            <div class="contentRow-figure">
                <xf:avatar user="{$xf.visitor}" size="m" href="" notooltip="true" update="{{ link('account/avatar', $xf.visitor) }}" />
            </div>
            <h3 class="contentRow-header">
                <xf:username user="$xf.visitor" rich="true" notooltip="true" />
            </h3>
            <div class="contentRow-lesser">
                <xf:usertitle user="$xf.visitor" />
            </div>
            <div class="button-prem" data-sale="عضوية VIP">
                <a href="account/upgrades" target="_blank">
                    <span>الترقية إلى العضوية المميزة</span><span>إجراء الدفع</span>
                </a>
            </div>
        </div>
        <div class="stats">
            <div class="column">
                <div>
                    <i class="bi bi-chat-dots" title="{{ phrase('messages') }}"></i>
                </div>
                <div>{$xf.visitor.message_count|number}</div>
            </div>
            <div class="column">
                <div>
                    <i class="bi bi-hand-thumbs-up" title="{{ phrase('likes') }}"></i>
                </div>
                <div>{$xf.visitor.like_count|number}</div>
            </div>
            <div class="column">
                <div>
                    <i class="bi bi-award" title="{{ phrase('trophy_points') }}"></i>
                </div>
                <div>{$xf.visitor.trophy_points|number}</div>
            </div>
        </div>
    </div>
<xf:else />
    <div class="visitor-panel-new">
        <h3>مرحبًا بك! لتتمكن من الاستفادة من جميع ميزات موقعنا، يرجى تسجيل الدخول أو إنشاء حساب جديد.</h3>
        <div class="button-login">
            <a href="login" target="_blank"><i class="bi bi-lock"></i>تسجيل الدخول</a>
        </div>
        <div class="button-register">
            <a href="register" target="_blank"><i class="bi bi-person-plus"></i>إنشاء حساب</a>
        </div>
    </div>
</xf:if>

@vpn-background: @xf-contentBg;
@vpn-border-color: @xf-borderColor;

.visitor-panel-new {
    background: @vpn-background;
    padding: 10px;
    margin-bottom: 20px;

    .visitor {
        text-align: center;

        div {
            &:nth-of-type(1) {
                margin-bottom: 10px;
            }
        }

        .button-prem {
            font-size: .8em;
            font-weight: 500;
            text-transform: uppercase;
            position: relative;
            padding: 10px 0;
            margin: 15px 0 10px;
            border: 2px solid @vpn-border-color;

            &:hover {
                border-color: @xf-textColorAttention;
            
                span {
                    &:nth-of-type(1) {
                        font-size: 0;
                        opacity: 0;
                        transition: .3s ease-out;
                    }

                    &:nth-of-type(2) {
                        font-size: inherit;
                        opacity: 1;
                        transition: .3s ease-out;
                    }
                }

                &:before {
                    opacity: 1;
                }
            }

            a {
                &:hover {
                    text-decoration: none;
                    color: @xf-textColorAttention;
                }
            }

            span {
                &:nth-of-type(2) {
                    font-size: 0;
                    opacity: 0;
                    transition: .3s ease-out;
                }

                &:nth-of-type(1) {
                    font-size: inherit;
                    opacity: 1;
                    transition: .3s ease-out;
                }
            }

            &:before {
                display: block;
                font-size: .8em;
                position: absolute;
                content: attr(data-sale);
                top: -15px;
                left: 5px;
                background: @xf-contentAccentBg;
                color: @xf-textColorAccentContent;
                padding: 3px 5px;
                border: 2px solid @xf-textColorAttention;
                transform: rotate(0deg) scale(1, 1) skew(-10deg, 0deg) translate(0, 0);
                opacity: 0;
                transition: opacity .6s ease-out;
            }
        }
    }

    .stats {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border: 1px solid @vpn-border-color;

        .column {
            flex-basis: calc(100% / 3);
            font-size: .85em;
            text-align: center;
            padding: 5px;
            margin: 5px 0;
            border-left: 1px solid @vpn-border-color;

            &:nth-of-type(1) {
                border: none;
            }

            div {
                &:nth-of-type(2) {
                    font-size: 1.1em;
                    font-weight: 500;
                }
            }

            /* Add Bootstrap icons with tooltips */
            .bi {
                font-size: 1.5em;
                margin-bottom: 5px;
            }

            /* Tooltip */
            [data-bs-toggle="tooltip"] {
                position: relative;
                cursor: pointer;
            }
        }
    }

    /* Responsive styling */
    @media (max-width: 768px) {
        .stats {
            flex-direction: column;

            .column {
                flex-basis: 100%;
                border-left: none;
                border-top: 1px solid @vpn-border-color;
            }
        }
    }
}


.button-login,
.button-register {
    display: inline-block;
    margin: 10px;
}

.button-login a,
.button-register a {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    color: #fff; /* White text color */
    transition: background-color 0.3s, transform 0.3s;
}

.button-login a {
    background-color: #d8b4e2; /* Purple for login */
}

.button-register a {
    background-color: #3DD598; /* Green for register */
}

.button-login a:hover,
.button-register a:hover {
    background-color: #c88ce1; /* Darker purple for login hover */
    transform: translateY(-2px);
}

.button-register a:hover {
    background-color: #34b88a; /* Darker green for register hover */
}

.button-login a .bi,
.button-register a .bi {
    margin-right: 8px; /* Space between icon and text */
}

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">