Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Arizona RP Black Edition XenForo Icon Pack AI KILLGPT

Dolpanowr

Dolpanowr

Ноя
14
10
Пользователь
1782494059753.png

Что нового:​

  1. Выбор иконки: Теперь можно выбрать либо Лого Arizona RP, либо одну из иконок FontAwesome (Щит, Звезда, Корона и т.д.).
  2. HTML-код с иконкой: Код в поле №2 теперь содержит либо тег <img> (для логотипа), либо тег <i> (для шрифтовых иконок).
  3. Автоматический отступ: В коде уже прописан margin-right: 5px, чтобы иконка не "прилипала" к тексту.

Как пользоваться:​

  • Если выбираешь "Логотип Arizona", скопируй HTML и вставь его в поле "Текст баннера" в админке.
  • Если выбираешь "Щит" или "Звезду", убедись, что на твоем форуме включен FontAwesome (на XenForo 2.x он включен по умолчанию).

HTML: 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Arizona RP ГЕНЕРАЦИЯ</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
    <style>
        :root { --az-orange: #ff8c00; --az-dark: #07070a; --glass: rgba(15, 15, 20, 0.95); }
        body { margin: 0; font-family: 'Montserrat', sans-serif; background: var(--az-dark); color: #fff; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
        #particles-js { position: fixed; width: 100%; height: 100%; z-index: 1; }
        
        .main-ui {
            position: relative;
            z-index: 10;
            width: 900px;
            background: var(--glass);
            border: 1px solid rgba(255, 140, 0, 0.15);
            border-radius: 24px;
            padding: 40px;
            backdrop-filter: blur(20px);
            box-shadow: 0 30px 100px rgba(0,0,0,0.9);
            overflow: hidden;
        }

        /* Фон внутри рамки - анимированные частицы */
        .main-ui::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(255, 140, 0, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(255, 140, 0, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 50% 0%, rgba(255, 140, 0, 0.02) 0%, transparent 40%);
            pointer-events: none;
            z-index: 0;
        }

        /* Сетка линий внутри */
        .main-ui::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                linear-gradient(rgba(255, 140, 0, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 140, 0, 0.02) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }
        .header h1 {
            letter-spacing: 5px;
            color: var(--az-orange);
            text-transform: uppercase;
            font-size: 20px;
            margin: 0;
        }
        .header h1 span {
            color: #fff;
            font-weight: 300;
        }

        .preview-zone {
            background: rgba(0, 0, 0, 0.6);
            height: 140px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 35px;
            border: 1px solid rgba(255, 140, 0, 0.1);
            position: relative;
            z-index: 1;
            backdrop-filter: blur(10px);
        }

        /* Анимация свечения для превью */
        .preview-zone::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 16px;
            background: linear-gradient(45deg, transparent, rgba(255, 140, 0, 0.1), transparent);
            z-index: -1;
            animation: borderGlow 3s ease-in-out infinite;
        }

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

        .userBanner {
            padding: 6px 15px;
            border-radius: 4px;
            font-weight: 900;
            font-size: 13px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }
        .userBanner i { font-size: 14px; }
        .userBanner img { width: 16px; height: 16px; }

        .banner--red {
            background: linear-gradient(90deg, #ff0000, #7a0000);
            color: #fff;
            box-shadow: 0 0 30px rgba(255,0,0,0.2);
        }
        .banner--blue {
            background: linear-gradient(90deg, #00b4db, #0083b0);
            color: #fff;
            box-shadow: 0 0 30px rgba(0, 180, 219, 0.2);
        }
        .banner--gold {
            background: linear-gradient(90deg, #ffd700, #b8860b);
            color: #000;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
        }
        .banner--green {
            background: linear-gradient(90deg, #2ecc71, #27ae60);
            color: #fff;
            box-shadow: 0 0 30px rgba(46, 204, 113, 0.2);
        }

        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
            position: relative;
            z-index: 1;
        }
        .field { display: flex; flex-direction: column; gap: 8px; }
        label {
            font-size: 10px;
            color: #666;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        input, select {
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.05);
            padding: 12px;
            border-radius: 8px;
            color: #fff;
            outline: none;
            font-size: 12px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        input:focus, select:focus {
            border-color: var(--az-orange);
            box-shadow: 0 0 20px rgba(255, 140, 0, 0.1);
        }

        .code-title {
            margin-top: 20px;
            font-size: 11px;
            color: var(--az-orange);
            font-weight: bold;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }
        .output-box {
            background: rgba(0, 0, 0, 0.8);
            padding: 12px;
            border-radius: 6px;
            font-family: monospace;
            color: #0f0;
            font-size: 11px;
            border: 1px solid rgba(255, 255, 255, 0.03);
            margin-top: 5px;
            white-space: pre-wrap;
            word-break: break-all;
            position: relative;
            z-index: 1;
            backdrop-filter: blur(10px);
            min-height: 60px;
        }
        .btn-copy {
            background: var(--az-orange);
            color: #000;
            padding: 10px;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 5px;
            font-size: 10px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .btn-copy:hover {
            background: #fff;
            transform: scale(1.02);
            box-shadow: 0 0 30px rgba(255, 140, 0, 0.3);
        }
        .btn-copy:active { transform: scale(0.98); }

        /* Floating particles inside */
        .float-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--az-orange);
            border-radius: 50%;
            opacity: 0.1;
            animation: floatParticle 8s linear infinite;
            z-index: 0;
        }

        @keyframes floatParticle {
            0% { transform: translateY(100%) translateX(0px); opacity: 0; }
            10% { opacity: 0.1; }
            90% { opacity: 0.1; }
            100% { transform: translateY(-100%) translateX(50px); opacity: 0; }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .main-ui {
                width: 95%;
                padding: 20px;
                margin: 10px;
                border-radius: 16px;
            }
            .controls {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .preview-zone {
                height: 100px;
                margin-bottom: 20px;
            }
            .header h1 { font-size: 14px; }
        }
    </style>
</head>
<body>

<div id="particles-js"></div>

<div class="main-ui">
    <!-- Внутренние плавающие частицы -->
    <div class="float-particle" style="left: 10%; animation-delay: 0s;"></div>
    <div class="float-particle" style="left: 30%; animation-delay: 2s;"></div>
    <div class="float-particle" style="left: 50%; animation-delay: 4s;"></div>
    <div class="float-particle" style="left: 70%; animation-delay: 1s;"></div>
    <div class="float-particle" style="left: 90%; animation-delay: 3s;"></div>

    <div class="header">
        <h1>Arizona RP <span>ИКОНКИ БАННЕРОВ</span></h1>
    </div>

    <div class="preview-zone">
        <div id="preview" class="userBanner banner--red">
            <span id="icon-place"><img src="https://arizona-rp.com/assets/img/logo-bottom.png"></span>
            <span id="label">Администратор</span>
        </div>
    </div>

    <div class="controls">
        <div class="field">
            <label><i class="fas fa-pen" style="margin-right: 5px;"></i>Текст</label>
            <input type="text" id="inpText" value="Администратор" oninput="update()">
        </div>
      
        <div class="field">
            <label><i class="fas fa-palette" style="margin-right: 5px;"></i>Цвет баннера</label>
            <select id="inpStyle" onchange="update()">
                <option value="banner--red">Красный (Админ)</option>
                <option value="banner--blue">Синий (МЮ)</option>
                <option value="banner--gold">Золотой (Лидер)</option>
                <option value="banner--green">Зеленый (МЗ/МО)</option>
            </select>
        </div>

        <div class="field">
            <label><i class="fas fa-icons" style="margin-right: 5px;"></i>Выбор иконки</label>
            <select id="inpIcon" onchange="update()">
                <option value="img-az">Лого Arizona</option>
                <option value="fa-shield-halved">Щит (Защита)</option>
                <option value="fa-star">Звезда (Почет)</option>
                <option value="fa-crown">Корона (VIP)</option>
                <option value="fa-gavel">Молоток (Суд)</option>
                <option value="fa-heart">Сердце (МЗ)</option>
            </select>
        </div>
    </div>

    <div class="code-title"><i class="fas fa-code"></i> 1. extra.less (Вставить в стиль)</div>
    <div class="output-box" id="cssOutput"></div>
    <button class="btn-copy" onclick="copy('cssOutput')"><i class="fas fa-copy"></i> Копировать CSS</button>

    <div class="code-title"><i class="fas fa-file-code"></i> 2. Текст баннера (В настройки группы пользователей)</div>
    <div class="output-box" id="htmlOutput"></div>
    <button class="btn-copy" onclick="copy('htmlOutput')"><i class="fas fa-copy"></i> Копировать HTML</button>
</div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
    particlesJS("particles-js", {
        "particles": {
            "number": { "value": 80 },
            "color": { "value": "#ff8c00" },
            "opacity": { "value": 0.15 },
            "move": { "enable": true, "speed": 1.5, "direction": "top" },
            "size": { "value": 2 }
        }
    });

    function update() {
        const text = document.getElementById('inpText').value || 'Текст';
        const style = document.getElementById('inpStyle').value;
        const iconVal = document.getElementById('inpIcon').value;
      
        const preview = document.getElementById('preview');
        const iconPlace = document.getElementById('icon-place');
      
        document.getElementById('label').innerText = text;
        preview.className = `userBanner ${style}`;

        let iconHtml = "";
        if(iconVal === 'img-az') {
            iconHtml = `<img src="https://arizona-rp.com/assets/img/logo-bottom.png">`;
        } else {
            iconHtml = `<i class="fas ${iconVal}"></i>`;
        }
        iconPlace.innerHTML = iconHtml;

        const css = `/* Arizona RP Banner */
.userBanner.${style} {
    background: ${getGradient(style)};
    color: ${style === 'banner--gold' ? '#000' : '#fff'};
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 4px;
}`;
        document.getElementById('cssOutput').innerText = css;

        let htmlFinal = "";
        if(iconVal === 'img-az') {
            htmlFinal = `<img src="https://arizona-rp.com/assets/img/logo-bottom.png" style="width:16px; vertical-align:middle; margin-right:5px;"> ${text}`;
        } else {
            htmlFinal = `<i class="fas ${iconVal}" style="margin-right:5px;"></i> ${text}`;
        }
        document.getElementById('htmlOutput').innerText = htmlFinal;
    }

    function getGradient(style) {
        if(style === 'banner--red') return 'linear-gradient(90deg, #ff0000, #7a0000)';
        if(style === 'banner--blue') return 'linear-gradient(90deg, #00b4db, #0083b0)';
        if(style === 'banner--gold') return 'linear-gradient(90deg, #ffd700, #b8860b)';
        if(style === 'banner--green') return 'linear-gradient(90deg, #2ecc71, #27ae60)';
    }

    function copy(id) {
        const text = document.getElementById(id).innerText;
        navigator.clipboard.writeText(text).then(() => {
            const btn = event.target.closest('.btn-copy');
            const original = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-check"></i> Скопировано!';
            setTimeout(() => btn.innerHTML = original, 2000);
        });
    }

    update();
</script>
</body>
</html>


Скачайте notepad++ создайте файл test.html, отредактируйте файл с помощью notepad++вставьте код выше и сохраните - откройте любым браузером и наслаждайтесь ))
 
Последнее редактирование:
KeoFox

KeoFox

Июл
1,270
1,721
Пользователь
что за жалкая пародия?

[Не поддерживается] Сайт для создания баннера в стиле ArizonaRP со своей "изюминкой"

Вы также можете использовать сайт прямо сейчас, без надобности в его установке: banner.spolzer.xyz Был разработан сайт на React благодаря которому вы можете создать баннер со своей иконкой (Font Awesome 6) и текстом. Принцип простой - Вам...
pawno-help.ru
 
Dolpanowr

Dolpanowr

Ноя
14
10
Пользователь
KeoFox написал(а):
что за жалкая пародия?

[Не поддерживается] Сайт для создания баннера в стиле ArizonaRP со своей "изюминкой"

Вы также можете использовать сайт прямо сейчас, без надобности в его установке: banner.spolzer.xyz Был разработан сайт на React благодаря которому вы можете создать баннер со своей иконкой (Font Awesome 6) и текстом. Принцип простой - Вам...
pawno-help.ru
Нажмите для раскрытия...
Даже не близко
 
KeoFox

KeoFox

Июл
1,270
1,721
Пользователь
Dolpanowr написал(а):
Даже не близко
Нажмите для раскрытия...
ну да, там вменяемая реализация, здесь какой то сплошной костыль

уже молча о том что font awesome можно как бы и через CSS в баннер вставлять, а не играть с бубном в настройках текста баннера
 
Войдите или зарегистрируйтесь для ответа.
Сверху