как сделать страницу бана

Серега Пират · 16 Май 2026

Как сделать что-бы круг двигался и сам код тож нужен
форум "CRMP ONLINE" - ФОРУМ

ник Ded Cybers пароль 2276633as акк с баном
какие коды сливали там круг не двигается

8LvFyrWH1n9zBRcppvOpcTjGg5OpW-16EDROzhzAqQ3arg9uIoiCWzVReiPoLOnfkVu2kQCMyf5DflVWytPX3b8_.jpg

Kolpak · 20 Май 2026

HTML:

<div class="mcbi-wrap">
    <div class="mcbi-ban-section">
        <div class="mcbi-ban-header">
            <div class="mcbi-ban-icon">
                <xf:fa icon="fa-ban" />
            </div>

            <div class="mcbi-ban-text">
                <div class="mcbi-title">
                    {{ phrase('mcbi_access_to_site_is_restricted') }}
                </div>

                <div class="mcbi-sub">
                    Если вы считаете блокировку ошибочной — свяжитесь с администрацией.
                </div>
            </div>
        </div>

        <div class="mcbi-panel">
            <xf:if is="$xf.options.mcbiShowDefaultError && $error">
                <div class="mcbi-error">
                    {$error|raw}
                </div>
            </xf:if>

            <div class="mcbi-grid">
                <div class="mcbi-card">
                    <xf:fa icon="fa-user-circle" />

                    <div class="mcbi-meta">
                        <div class="mcbi-label">
                            {{ phrase('banned_by') }}
                        </div>

                        <div class="mcbi-value">
                            <xf:username user="{$xf.visitor.Ban.BanUser}" rich="true" notooltip="true" />
                        </div>
                    </div>
                </div>

                <div class="mcbi-card">
                    <xf:fa icon="fa-calendar" />

                    <div class="mcbi-meta">
                        <div class="mcbi-label">
                            {{ phrase('ban_started') }}
                        </div>

                        <div class="mcbi-value">
                            {{ date($xf.visitor.Ban.ban_date) }}
                        </div>
                    </div>
                </div>

                <div class="mcbi-card">
                    <xf:fa icon="fa-flag" />

                    <div class="mcbi-meta">
                        <div class="mcbi-label">
                            {{ phrase('ban_ends') }}
                        </div>

                        <div class="mcbi-value">
                            {{ $xf.visitor.Ban.end_date ? date($xf.visitor.Ban.end_date) : phrase('never') }}
                        </div>
                    </div>
                </div>

                <div class="mcbi-card">
                    <xf:fa icon="fa-comment" />

                    <div class="mcbi-meta">
                        <div class="mcbi-label">
                            {{ phrase('reason_for_ban') }}
                        </div>

                        <div class="mcbi-value">
                            {{ structured_text($xf.visitor.Ban.user_reason) ?: phrase('n_a') }}
                        </div>
                    </div>
                </div>

                <div class="mcbi-card">
                    <xf:fa icon="fa-fire" />

                    <div class="mcbi-meta">
                        <div class="mcbi-label">
                            {{ phrase('mcbi_automatically_triggered') }}
                        </div>

                        <div class="mcbi-value">
                            {{ $xf.visitor.Ban.triggered ? phrase('yes') : phrase('no') }}
                        </div>
                    </div>
                </div>
            </div>

            <xf:if is="$xf.options.mcbiShowContactInformation && $xf.options.mcbiAdministratorContacts">
                <div class="mcbi-contacts-wrapper">
                    <div class="mcbi-contacts-title">
                        <xf:fa icon="fa-envelope" />
                        {{ phrase('mcbi_more_information__contacts_on_ban') }}
                    </div>

                    <div class="mcbi-contacts-sub">
                        Для получения дополнительной информации о блокировке обращайтесь к администрации.
                    </div>

                    <div class="mcbi-contacts">
                        <xf:foreach loop="$xf.options.mcbiAdministratorContacts" key="$i" value="$contact">
                            <div class="mcbi-contact">
                                <div class="mcbi-contact-method">
                                    {$contact.word}
                                </div>

                                <div class="mcbi-contact-value">
                                    {$contact.replace}
                                </div>
                            </div>
                        </xf:foreach>
                    </div>
                </div>
            </xf:if>

            <div class="mcbi-footer">
                <xf:fa icon="fa-lock" />
            </div>
        </div>
    </div>
</div>

Less:

.mcbi-wrap
{
    max-width: 1280px;
    margin: 30px auto;
    background: transparent;
}

.mcbi-ban-section
{
    background: rgba(26, 26, 35, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 32px;
    border: 1px solid rgba(255, 184, 43, 0.1);
    overflow: hidden;
    box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.6);
}

.mcbi-ban-header
{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 36px;
    background: linear-gradient(145deg, rgba(255, 184, 43, 0.08) 0%, rgba(255, 184, 43, 0.02) 100%);
    border-bottom: 1px solid rgba(255, 184, 43, 0.1);
    flex-wrap: wrap;
}

.mcbi-ban-icon
{
    flex-shrink: 0;

    .fa--xf
    {
        font-size: 85px;
        color: #ffb82b;
        filter: drop-shadow(0 0 15px rgba(255, 184, 43, 0.5));
        animation: mcbi-iconPulse 2.2s ease-in-out infinite;
    }
}

.mcbi-ban-text
{
    flex: 1;
}

.mcbi-title
{
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(120deg, #ffb347, #ff8c00);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.mcbi-sub
{
    font-size: 15px;
    color: #a0a8b8;
    line-height: 1.4;
}

.mcbi-panel
{
    padding: 28px 32px;
}

.mcbi-error
{
    margin-bottom: 22px;
    padding: 16px 18px;
    background: rgba(255, 184, 43, 0.08);
    border: 1px solid rgba(255, 184, 43, 0.2);
    border-radius: 18px;
    color: #e8eef2;
    font-size: 14px;
    line-height: 1.5;
}

.mcbi-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.mcbi-card
{
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: rgba(20, 20, 28, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 184, 43, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);

    &:hover
    {
        transform: translateY(-3px);
        border-color: #ffb82b;
        background: rgba(35, 35, 45, 0.7);
        box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
    }

    .fa--xf
    {
        font-size: 34px;
        color: #ffb82b;
        min-width: 44px;
        text-align: center;
        filter: drop-shadow(0 0 6px rgba(255, 184, 43, 0.4));
    }
}

.mcbi-meta
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mcbi-label
{
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #ffb82b;
    opacity: 0.85;
}

.mcbi-value
{
    font-size: 14px;
    font-weight: 500;
    color: #e8eef2;
    word-break: break-word;
    line-height: 1.4;

    a
    {
        color: #ffb82b;
        text-decoration: none;
        font-weight: 600;

        &:hover
        {
            text-decoration: underline;
        }
    }
}

.mcbi-contacts-wrapper
{
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 184, 43, 0.15);
}

.mcbi-contacts-title
{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;

    .fa--xf
    {
        color: #ffb82b;
        margin-right: 8px;
    }
}

.mcbi-contacts-sub
{
    text-align: center;
    color: #a0a8b8;
    font-size: 13px;
    margin-bottom: 20px;
}

.mcbi-contacts
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.mcbi-contact
{
    min-width: 180px;
    padding: 12px 18px;
    text-align: center;
    background: rgba(255, 184, 43, 0.08);
    border: 1px solid rgba(255, 184, 43, 0.35);
    border-radius: 16px;
    transition: all 0.2s;
    flex: 1;

    &:hover
    {
        background: rgba(255, 184, 43, 0.15);
        transform: translateY(-2px);
        border-color: #ffb82b;
    }
}

.mcbi-contact-method
{
    font-weight: 700;
    color: #ffb82b;
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.mcbi-contact-value
{
    font-size: 13px;
    color: #e8eef2;
    word-break: break-word;

    a
    {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px dotted rgba(255, 184, 43, 0.5);

        &:hover
        {
            color: #ffb82b;
            border-bottom-color: #ffb82b;
        }
    }
}

.mcbi-footer
{
    margin-top: 28px;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);

    .fa--xf
    {
        color: #ffb82b;
        font-size: 20px;
        opacity: 0.7;
    }
}

@keyframes mcbi-iconPulse
{
    0%
    {
        transform: scale(1);
        opacity: 0.95;
        filter: drop-shadow(0 0 0 rgba(255, 184, 43, 0));
    }

    50%
    {
        transform: scale(1.08);
        opacity: 1;
        filter: drop-shadow(0 0 20px rgba(255, 184, 43, 0.6));
    }

    100%
    {
        transform: scale(1);
        opacity: 0.95;
        filter: drop-shadow(0 0 0 rgba(255, 184, 43, 0));
    }
}

@media (min-width: @xf-responsiveWide)
{
    .mcbi-wrap
    {
        max-width: 1400px;
    }

    .mcbi-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .mcbi-card
    {
        padding: 22px 26px;

        .fa--xf
        {
            font-size: 38px;
        }
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .mcbi-ban-header
    {
        padding: 24px 20px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .mcbi-title
    {
        font-size: 26px;
    }

    .mcbi-sub
    {
        font-size: 13px;
    }

    .mcbi-panel
    {
        padding: 20px;
    }

    .mcbi-grid
    {
        gap: 14px;
    }

    .mcbi-card
    {
        padding: 14px 16px;

        .fa--xf
        {
            font-size: 28px;
            min-width: 36px;
        }
    }

    .mcbi-value
    {
        font-size: 13px;
    }

    .mcbi-contacts-wrapper
    {
        padding: 18px;
    }

    .mcbi-contact
    {
        min-width: 140px;
        padding: 10px 14px;
    }
}

@media (max-width: @xf-responsiveNarrow)
{
    .mcbi-title
    {
        font-size: 22px;
    }

    .mcbi-ban-icon
    {
        .fa--xf
        {
            font-size: 65px;
        }
    }

    .mcbi-grid
    {
        grid-template-columns: 1fr;
    }

    .mcbi-card
    {
        gap: 12px;
    }

    .mcbi-contacts
    {
        flex-direction: column;
        align-items: stretch;
    }

    .mcbi-contact
    {
        min-width: auto;
    }
}

Вот так окончательно должно выглядеть у них, но они кое-где перепутали классы, и у них немного коряво получилось с иконками

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

Less:

.mcbi-wrap
{
    max-width: 1280px;
    margin: 30px auto;
    background: transparent;
}

.mcbi-ban-section
{
    background: fade(@xf-contentBg, 88%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 32px;
    border: 1px solid fade(@xf-paletteAccent1, 18%);
    overflow: hidden;
    box-shadow: 0 25px 45px -12px fade(#000, 60%);
}

.mcbi-ban-header
{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 36px;
    background: linear-gradient(145deg, fade(@xf-paletteAccent1, 10%) 0%, fade(@xf-paletteAccent1, 3%) 100%);
    border-bottom: 1px solid fade(@xf-paletteAccent1, 16%);
    flex-wrap: wrap;
}

.mcbi-ban-icon
{
    flex-shrink: 0;

    .fa--xf
    {
        font-size: 85px;
        color: @xf-paletteAccent1;
        filter: drop-shadow(0 0 15px fade(@xf-paletteAccent1, 50%));
        animation: mcbi-iconPulse 2.2s ease-in-out infinite;
    }
}

.mcbi-ban-text
{
    flex: 1;
}

.mcbi-title
{
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(120deg, @xf-paletteAccent1, @xf-paletteAccent2);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.mcbi-sub
{
    font-size: 15px;
    color: @xf-textColorMuted;
    line-height: 1.4;
}

.mcbi-panel
{
    padding: 28px 32px;
}

.mcbi-error
{
    margin-bottom: 22px;
    padding: 16px 18px;
    background: fade(@xf-paletteAccent1, 8%);
    border: 1px solid fade(@xf-paletteAccent1, 22%);
    border-radius: 18px;
    color: @xf-textColor;
    font-size: 14px;
    line-height: 1.5;
}

.mcbi-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.mcbi-card
{
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: fade(@xf-contentAltBg, 62%);
    border-radius: 20px;
    border: 1px solid fade(@xf-paletteAccent1, 24%);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);

    &:hover
    {
        transform: translateY(-3px);
        border-color: @xf-paletteAccent1;
        background: fade(@xf-contentAltBg, 82%);
        box-shadow: 0 12px 24px -12px fade(#000, 50%);
    }

    .fa--xf
    {
        font-size: 34px;
        color: @xf-paletteAccent1;
        min-width: 44px;
        text-align: center;
        filter: drop-shadow(0 0 6px fade(@xf-paletteAccent1, 40%));
    }
}

.mcbi-meta
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mcbi-label
{
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: @xf-paletteAccent1;
    opacity: 0.9;
}

.mcbi-value
{
    font-size: 14px;
    font-weight: 500;
    color: @xf-textColor;
    word-break: break-word;
    line-height: 1.4;

    a
    {
        color: @xf-paletteAccent1;
        text-decoration: none;
        font-weight: 600;

        &:hover
        {
            color: @xf-paletteAccent2;
            text-decoration: underline;
        }
    }
}

.mcbi-contacts-wrapper
{
    margin-top: 8px;
    background: fade(@xf-contentAltBg, 55%);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid fade(@xf-paletteAccent1, 18%);
}

.mcbi-contacts-title
{
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: @xf-textColor;
    margin-bottom: 16px;

    .fa--xf
    {
        color: @xf-paletteAccent1;
        margin-right: 8px;
    }
}

.mcbi-contacts-sub
{
    text-align: center;
    color: @xf-textColorMuted;
    font-size: 13px;
    margin-bottom: 20px;
}

.mcbi-contacts
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.mcbi-contact
{
    min-width: 180px;
    padding: 12px 18px;
    text-align: center;
    background: fade(@xf-paletteAccent1, 8%);
    border: 1px solid fade(@xf-paletteAccent1, 35%);
    border-radius: 16px;
    transition: all 0.2s;
    flex: 1;

    &:hover
    {
        background: fade(@xf-paletteAccent1, 15%);
        transform: translateY(-2px);
        border-color: @xf-paletteAccent1;
    }
}

.mcbi-contact-method
{
    font-weight: 700;
    color: @xf-paletteAccent1;
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.mcbi-contact-value
{
    font-size: 13px;
    color: @xf-textColor;
    word-break: break-word;

    a
    {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px dotted fade(@xf-paletteAccent1, 50%);

        &:hover
        {
            color: @xf-paletteAccent1;
            border-bottom-color: @xf-paletteAccent1;
        }
    }
}

.mcbi-footer
{
    margin-top: 28px;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid fade(@xf-borderColor, 45%);

    .fa--xf
    {
        color: @xf-paletteAccent1;
        font-size: 20px;
        opacity: 0.7;
    }
}

@keyframes mcbi-iconPulse
{
    0%
    {
        transform: scale(1);
        opacity: 0.95;
        filter: drop-shadow(0 0 0 fade(@xf-paletteAccent1, 0%));
    }

    50%
    {
        transform: scale(1.08);
        opacity: 1;
        filter: drop-shadow(0 0 20px fade(@xf-paletteAccent1, 60%));
    }

    100%
    {
        transform: scale(1);
        opacity: 0.95;
        filter: drop-shadow(0 0 0 fade(@xf-paletteAccent1, 0%));
    }
}

@media (min-width: @xf-responsiveWide)
{
    .mcbi-wrap
    {
        max-width: 1400px;
    }

    .mcbi-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .mcbi-card
    {
        padding: 22px 26px;

        .fa--xf
        {
            font-size: 38px;
        }
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .mcbi-ban-header
    {
        padding: 24px 20px;
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .mcbi-title
    {
        font-size: 26px;
    }

    .mcbi-sub
    {
        font-size: 13px;
    }

    .mcbi-panel
    {
        padding: 20px;
    }

    .mcbi-grid
    {
        gap: 14px;
    }

    .mcbi-card
    {
        padding: 14px 16px;

        .fa--xf
        {
            font-size: 28px;
            min-width: 36px;
        }
    }

    .mcbi-value
    {
        font-size: 13px;
    }

    .mcbi-contacts-wrapper
    {
        padding: 18px;
    }

    .mcbi-contact
    {
        min-width: 140px;
        padding: 10px 14px;
    }
}

@media (max-width: @xf-responsiveNarrow)
{
    .mcbi-title
    {
        font-size: 22px;
    }

    .mcbi-ban-icon
    {
        .fa--xf
        {
            font-size: 65px;
        }
    }

    .mcbi-grid
    {
        grid-template-columns: 1fr;
    }

    .mcbi-card
    {
        gap: 12px;
    }

    .mcbi-contacts
    {
        flex-direction: column;
        align-items: stretch;
    }

    .mcbi-contact
    {
        min-width: auto;
    }
}

Поиск

Welcome!

как сделать страницу бана

Серега Пират

Kolpak

Kolpak