[html]
<link rel="stylesheet" href="https://forumstatic.ru/styles/001b/b1/0e/style.1780134001.css">
<link rel="stylesheet" href="https://forumstatic.ru/styles/001b/b1/0e/style_cs.1780134001.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<div style="display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 44px; margin: 40px 0;">
<form id="profileForm" style="width:400px;min-width:340px;max-width:430px;padding:24px;background:#e6ebe6;border-radius:14px;box-shadow:0 2px 16px #273f362e;" autocomplete="off">
<h3 style="margin-top:0;color:#26483B;font-family:'Playfair Display',serif;font-weight:700;">Настрой профиля</h3>
<label>Ник: <input id="in-nick" value="Shilya"></label><br>
<label>Ранг/статус: <input id="in-status" value="Администратор"></label><br>
<label>Аватар (url): <input id="in-ava" value="https://forumavatars.ru/img/avatars/001b/b1/0e/2-1661068196.png"></label><br>
<label>Iconic (url): <input id="in-iconic" value="https://upforme.ru/uploads/001c/67/60/2/107483.png"></label><br>
<label>Сообщений: <input id="in-posts" value="41"></label><br>
<label>Репутация: <input id="in-rep" value="+0"></label><br>
<label>Деньги: <input id="in-money" value="590"></label><br>
<label>Имя: <input id="in-fld4name" value="Далли Брут"></label><br>
<label>Возраст: <input id="in-fld4age" value="36"></label><br>
<label>Способность: <input id="in-fld4info" value="пирокинез: способность управления огнём с возможностью создавать его при помощи силы мысли."></label><br>
<label>pa-fld2 (url): <input id="in-fld2" value="https://upforme.ru/uploads/001c/9a/71/19/653824.png"></label><br>
<label>Подпись (url): <input id="in-sign" value="https://forumstatic.ru/files/001b/b1/0e/19898.png"></label><br>
<div style="margin:16px 0 4px;font-weight:bold;">Фон профиля:</div>
<label>
Картинка (url):
<input type="url" id="in-bg-img" value="https://forumstatic.ru/files/001b/b1/0e/17265.png" style="width:85%">
</label>
<div style="margin-bottom:10px; margin-top:6px;" id="gradient-section">
<div style="margin-bottom:3px;">Градиент:</div>
<div>
Угол:
<input type="number" id="gradient-angle" value="0" min="0" max="360" style="width:60px;">°
</div>
<div id="gradient-colors"></div>
<button type="button" id="add-gradient-color" style="font-weight:bold;padding:0 7px;margin-right:3px;vertical-align:middle; border-radius: 6px;">+</button>
<button type="button" id="remove-gradient-color" style="font-weight:bold;padding:0 7px;vertical-align:middle; border-radius: 6px;">–</button>
</div>
<div style="margin:10px 0;">
<label>Режим размера фона:
<select id="bg-size-mode">
<option value="default">Стандартно (<b>100% auto</b>, no-repeat)</option>
<option value="cover">Обрезать по блоку (cover)</option>
<option value="contain">Вписать в блок (contain)</option>
<option value="custom">Вручную</option>
</select>
</label>
<input id="bg-size-custom" type="text" value="100% auto" style="width:100px;display:none;" placeholder="например, 100% 100%">
</div>
<button type="button" id="copy-background-css" style="width:100%; border-radius:8px;">Скопировать фон</button>
</form>
<div style="width:204.398px;">
<div class="profile_preview">
<div class="post-author online topic-starter" id="profile-preview">
<ul>
<iconic class="iconic-top-placed"><img id="out-iconic" src="https://upforme.ru/uploads/001c/67/60/2/107483.png"></iconic>
<li class="pa-author"><span class="acchide">Автор: </span><a href="#" id="out-nick">Shilya</a></li>
<li class="pa-title" id="out-status">Администратор</li>
<li class="pa-avatar item2"><img id="out-ava" src="https://forumavatars.ru/img/avatars/001b/b1/0e/2-1661068196.png" alt="Shilya"></li>
<div class="pa_info">
<li class="pa-posts"><span class="fld-name">Сообщений:</span> <span id="out-posts">41</span></li>
<li class="pa-respect"><span class="fld-name"><a href="#">Репутация</a>:</span> <span id="out-rep">+0</span></li>
<li class="pa-fld3"><span id="out-money">590</span></li>
</div>
<li class="pa-online"></li>
<li class="pa-fld4"><iconic style="display: none;"><img id="out-iconic2" src="https://upforme.ru/uploads/001c/67/60/2/107483.png"></iconic>
<name_age>
<a href="#" id="out-fld4name">Далли Брут</a>,
<a href="#" id="out-fld4age">36</a>
</name_age>
<info_bg><info id="out-fld4info">пирокинез: способность управления огнём с возможностью создавать его при помощи силы мысли.</info></info_bg>
</li>
<li class="pa-fld2"><img id="out-fld2img" src="https://upforme.ru/uploads/001c/9a/71/19/653824.png"></li>
</ul>
</div>
</div>
</div>
</div>
<script>
// --- Профиль/Превью ---
function updatePreview() {
let el = id=>document.getElementById(id);
el('out-nick').textContent = el('in-nick').value;
el('out-status').textContent = el('in-status').value;
el('out-ava').src = el('in-ava').value;
el('out-iconic').src = el('in-iconic').value;
el('out-iconic2').src = el('in-iconic').value;
el('out-posts').textContent = el('in-posts').value;
el('out-rep').textContent = el('in-rep').value;
el('out-money').textContent = el('in-money').value;
el('out-fld4name').textContent = el('in-fld4name').value;
el('out-fld4age').textContent = el('in-fld4age').value;
el('out-fld4info').textContent = el('in-fld4info').value;
el('out-fld2img').src = el('in-fld2').value;
}
document.querySelectorAll('#profileForm input').forEach(el => el.addEventListener('input', updatePreview));
window.addEventListener('DOMContentLoaded', updatePreview);
// --- Градиент с RGBA и позициями ---
function rgbaColor(hex, alpha) {
if (hex.length === 4) hex = "#" + hex[1]+hex[1]+hex[2]+hex[2]+hex[3]+hex[3];
var r = parseInt(hex.substr(1,2),16);
var g = parseInt(hex.substr(3,2),16);
var b = parseInt(hex.substr(5,2),16);
return `rgba(${r},${g},${b},${+alpha})`;
}
let defaultGradient = [
{ color: "#26483b", alpha: 1, pos: 0 },
{ color: "#ffffff", alpha: 1, pos: 100 }
];
function renderGradientControls() {
const cont = document.getElementById('gradient-colors');
cont.innerHTML = "";
window.gradientColors.forEach((g, idx) => {
let row = document.createElement("div");
row.style.display = "flex";
row.style.alignItems = "center";
row.style.gap = "4px";
row.style.margin = "2px 0";
// Цвет
let inpColor = document.createElement("input");
inpColor.type = "color";
inpColor.value = g.color;
inpColor.style.width = "32px";
// Alpha
let inpAlpha = document.createElement("input");
inpAlpha.type = "range";
inpAlpha.min = 0; inpAlpha.max = 1; inpAlpha.step = 0.01;
inpAlpha.value = g.alpha;
inpAlpha.style.width = "64px";
// Валюта альфы
let lblAlpha = document.createElement("span");
lblAlpha.textContent = Math.round(g.alpha * 100)+'%';
lblAlpha.style.width = "32px";
lblAlpha.style.fontSize = "13px";
// Position
let inpPos = document.createElement("input");
inpPos.type = "number";
inpPos.min = 0; inpPos.max = 100; inpPos.step = 1;
inpPos.value = g.pos;
inpPos.style.width = "54px";
inpPos.style.fontSize = "13px";
let lblPos = document.createElement("span");
lblPos.textContent = '%';
// События
inpColor.addEventListener("input", e => {g.color = inpColor.value; updateBackgroundPreviewAndCode();});
inpAlpha.addEventListener("input", e => {
g.alpha = +inpAlpha.value;
lblAlpha.textContent = Math.round(g.alpha * 100)+'%';
updateBackgroundPreviewAndCode();
});
inpPos.addEventListener("input", e => {g.pos = +inpPos.value; updateBackgroundPreviewAndCode();});
// В DOM
row.append(inpColor, inpAlpha, lblAlpha, inpPos, lblPos);
cont.appendChild(row);
});
}
function getGradientString() {
let angle = document.getElementById('gradient-angle').value || 0;
let parts = window.gradientColors.map(g =>
`${rgbaColor(g.color, g.alpha)} ${g.pos}%`
);
return `linear-gradient(${angle}deg, ${parts.join(', ')})`;
}
function updateBackgroundPreviewAndCode() {
let preview = document.getElementById('profile-preview');
let imgUrl = document.getElementById('in-bg-img').value.trim();
let gradientStr = getGradientString();
let bg = imgUrl ? `${gradientStr}, url('${imgUrl}'), #ADB8B3` : `${gradientStr}, #ADB8B3`;
preview.style.background = bg;
// размер
let mode = document.getElementById('bg-size-mode').value;
if (mode === "default") {
preview.style.backgroundSize = "100% auto";
} else if (mode === "cover") {
preview.style.backgroundSize = "cover";
} else if (mode === "contain") {
preview.style.backgroundSize = "contain";
} else if (mode === "custom") {
preview.style.backgroundSize = document.getElementById('bg-size-custom').value.trim();
}
preview.style.backgroundRepeat = "no-repeat";
}
// Открытие кастомного поля
document.getElementById('bg-size-mode').addEventListener('change', function() {
let custom = document.getElementById('bg-size-custom');
custom.style.display = this.value == "custom" ? "" : "none";
updateBackgroundPreviewAndCode();
});
document.getElementById('bg-size-custom').addEventListener('input', updateBackgroundPreviewAndCode);
// --- Добавление и удаление цветов ---
document.getElementById('add-gradient-color').addEventListener('click', function() {
let last = window.gradientColors.length ? window.gradientColors[window.gradientColors.length-1] : {pos: 100};
window.gradientColors.push({color: "#ffffff", alpha: 1, pos: Math.min(100, last.pos+10)});
renderGradientControls(); updateBackgroundPreviewAndCode();
});
document.getElementById('remove-gradient-color').addEventListener('click', function() {
if(window.gradientColors.length > 2) {
window.gradientColors.pop();
renderGradientControls(); updateBackgroundPreviewAndCode();
}
});
document.getElementById('gradient-angle').addEventListener('input', updateBackgroundPreviewAndCode);
document.getElementById('in-bg-img').addEventListener('input', updateBackgroundPreviewAndCode);
// --- Копирование фон-кода через pre+выделение+execCommand (форумный стиль) ---
document.getElementById('copy-background-css').onclick = function() {
let imgUrl = document.getElementById('in-bg-img').value.trim();
let gradientStr = getGradientString();
let bg = imgUrl ? `${gradientStr}, url('${imgUrl}'), #ADB8B3` : `${gradientStr}, #ADB8B3`;
// Формируем строку под профиль
let mode = document.getElementById('bg-size-mode').value;
let css = "";
if (mode == "default") {
// будет обычный код без расширения
css = bg;
} else {
let size = mode=="cover"?"cover":mode=="contain"?"contain":document.getElementById('bg-size-custom').value.trim();
css = `${bg} || background-size:${size}; background-repeat:no-repeat;`;
}
// Копируем как в форуме:
let pre = document.createElement('pre');
pre.textContent = css;
pre.style.position = 'absolute';
pre.style.left = '-9999px';
document.body.appendChild(pre);
// Выделение и копирование
function select_text(c) {
var d = window.getSelection || document.getSelection;
if (d) {
var a = d();
if (a.selectAllChildren) {
a.selectAllChildren(c);
} else if (a.setBaseAndExtent) {
a.setBaseAndExtent(c, 0, c, c.innerText.length - 1)
} else {
var b = document.createRange();
b.selectNodeContents(c);
a.removeAllRanges();
a.addRange(b)
}
} else if (document.selection) {
var b = document.body.createTextRange();
b.moveToElementText(c);
b.select()
}
}
select_text(pre);
try{document.execCommand("copy");}catch(e){}
document.body.removeChild(pre);
let btn = document.getElementById('copy-background-css');
let old = btn.textContent;
btn.textContent = "Скопировано!";
setTimeout(()=>btn.textContent=old,1000);
}
/* Установить дефолтные цвета и отрисовать */
window.gradientColors = JSON.parse(JSON.stringify(defaultGradient));
window.addEventListener('DOMContentLoaded', ()=>{
renderGradientControls();
updateBackgroundPreviewAndCode();
});
// --- Коррекция шрифтов предпросмотра ---
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.profile_preview *').forEach(function(el) {
var fs = window.getComputedStyle(el).fontSize;
var px = parseFloat(fs);
var norm = px / 0.85;
el.style.fontSize = norm + 'px';
});
});
</script>
[/html]