Arizona RP ГЕНЕРАЦИЯ

:root { --az-orange: #ff8c00; --az-dark: #07070a; --glass: rgba(15, 15, 20, 0.98); }
        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); }
        .header { text-align: center; margin-bottom: 30px; }
        .header h1 { letter-spacing: 5px; color: var(--az-orange); text-transform: uppercase; font-size: 20px; margin: 0; }
      
        .preview-zone { background: #000; height: 140px; border-radius: 16px; display: flex; justify-content: center; align-items: center; margin-bottom: 35px; border: 1px solid #111; }

        .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); }
        .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 10px rgba(255,0,0,0.3); }
        .banner--blue { background: linear-gradient(90deg, #00b4db, #0083b0); color: #fff; }
        .banner--gold { background: linear-gradient(90deg, #ffd700, #b8860b); color: #000; }
        .banner--green { background: linear-gradient(90deg, #2ecc71, #27ae60); color: #fff; }

        .controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
        .field { display: flex; flex-direction: column; gap: 8px; }
        label { font-size: 10px; color: #555; font-weight: 900; text-transform: uppercase; }
        input, select { background: #0a0a0a; border: 1px solid #222; padding: 12px; border-radius: 8px; color: #fff; outline: none; font-size: 12px; }
      
        .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; }
        .output-box { background: #000; padding: 12px; border-radius: 6px; font-family: monospace; color: #0f0; font-size: 11px; border: 1px solid #111; margin-top: 5px; white-space: pre-wrap; word-break: break-all; }
        .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: 0.2s; }
        .btn-copy:hover { background: #fff; }

Arizona RP

ИКОНКИ БАННЕРОВ

Администратор

Текст

Цвет баннера

Красный (Админ)

Синий (МЮ)

Золотой (Лидер)

Зеленый (МЗ/МО)

Выбор иконки

Лого Arizona

Щит (Защита)

Звезда (Почет)

Корона (VIP)

Молоток (Суд)

Сердце (МЗ)

1. extra.less (Вставить в стиль)

Копировать CSS

2. Текст баннера (В настройки группы пользователей)

Копировать HTML

particlesJS("particles-js", { "particles": { "number": { "value": 60 }, "color": { "value": "#ff8c00" }, "opacity": { "value": 0.2 }, "move": { "enable": true, "speed": 1, "direction": "top" } } });

    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 = ``;
        } else {
            iconHtml = ``;
        }
        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 = `${text}`;
        } else {
            htmlFinal = `${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) {
        navigator.clipboard.writeText(document.getElementById(id).innerText);
        alert("Скопировано!");
    }

    update();