- 238
- 56
Что нового:
- Выбор иконки: Теперь можно выбрать либо Лого Arizona RP, либо одну из иконок FontAwesome (Щит, Звезда, Корона и т.д.).
- HTML-код с иконкой: Код в поле №2 теперь содержит либо тег <img> (для логотипа), либо тег <i> (для шрифтовых иконок).
- Автоматический отступ: В коде уже прописан 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.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; }
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="main-ui">
<div class="header"><h1>Arizona RP <span style="color:#fff">ИКОНКИ БАННЕРОВ</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>Текст</label><input type="text" id="inpText" value="Администратор" oninput="update()"></div>
<div class="field">
<label>Цвет баннера</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>Выбор иконки</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')">Копировать 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')">Копировать 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": 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 = `<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) {
navigator.clipboard.writeText(document.getElementById(id).innerText);
alert("Скопировано!");
}
update();
</script>
</body>
</html>Скачайте notepad++ создайте файл test.html, отредактируйте файл с помощью notepad++вставьте код выше и сохраните - откройте любым браузером и наслаждайтесь ))
Последнее редактирование:
