вверх
вниз
В этой теме можно попросить сделать себе аватар, а также примерить одну из форумных плашек, фонов и описание в профиле.
• Это все плашки и фоны?
Они будут постоянно пополняться, не волнуйтесь.
• А можно ли попросить сделать свою плашку или фон?
Можно. Приносите исходник, сделаем. Размеры для фонов 240x330
• А будут ли какие-то уникальные плашки и фоны?
Да, будут. За участие в конкурсах.
• Можно ли приносить гиф-исходники?
Можно для плашек, если они по весу не превышают 500МБ.
• А это обязательно?
Нет, конечно, все исключительно по желанию.
• Поставить только тут?
Вы можете ставить плашки и фоны самостоятельно через "Профиль" -> "Дополнительно".
[html]
<script>
// --------- FILL BACKGROUNDS ------------
function labelBg(className, nameCategory, src) {
return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="handleBgRadioChange()"><img src="${src}"> </label>`;
}
function fillBgs(bgs) {
document.getElementById('bgContainer').innerHTML = bgs
.map(bg => labelBg("profileBgLabel", "profileBg", bg)).join('');
}
// --------- FILL STRIPES ------------
function labelStripe(className, nameCategory, src) {
return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="handleStripeRadioChange()"><img src="${src}"> </label>`;
}
function fillStripes(stripes) {
document.getElementById('stripeContainer').innerHTML = stripes
.map(stripe => labelStripe("profileStripeLabel", "profileStripe", stripe)).join('');
}
// --------- CUSTOM FIELD HANDLERS ------------
function handleStripeCustomInput() {
const customValue = document.getElementById('stripeCustomLabel').value;
if (customValue.trim()) {
document.getElementsByName('profileStripe').forEach(radio => radio.checked = false);
}
updateProfilePreview();
}
function handleBgCustomInput() {
const customValue = document.getElementById('bgCustomLabel').value;
if (customValue.trim()) {
document.getElementsByName('profileBg').forEach(radio => radio.checked = false);
}
updateProfilePreview();
}
function handleStripeRadioChange() {
document.getElementById('stripeCustomLabel').value = '';
updateProfilePreview();
}
function handleBgRadioChange() {
document.getElementById('bgCustomLabel').value = '';
updateProfilePreview();
}
// --------- USER DATA ------------
let userLatinName = '';
let userProfileUrl = '';
let userApplicationFormUrl = '';
window.addEventListener("message", (event) => {
if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
if (event.data.eventName != 'profileFillingResponce') return;
userLatinName = event.data.userLatinName;
userProfileUrl = event.data.userProfileUrl;
userApplicationFormUrl = event.data.userApplicationFormUrl;
fillStripes(event.data.stripes);
fillBgs(event.data.backgrounds);
});
const sendProfileRequest = () => {
window.parent.postMessage({ eventName: 'profileFillingRequest' }, "*");
};
// Отправляем сразу
sendProfileRequest();
// Повторяем каждую секунду
const intervalId = setInterval(sendProfileRequest, 1000);
// Опционально: останавливаем после получения ответа
window.addEventListener("message", (event) => {
if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
if (event.data.eventName === 'profileFillingResponce') {
clearInterval(intervalId); // Останавливаем повторение
// ... остальной код обработки
}
});
// --------- CUSTOM FIELD HANDLERS ------------
function handleStripeCustomInput() {
const customValue = document.getElementById('stripeCustomLabel').value;
if (customValue.trim()) {
document.getElementsByName('profileStripe').forEach(radio => radio.checked = false);
}
updateProfilePreview();
}
function handleBgCustomInput() {
const customValue = document.getElementById('bgCustomLabel').value;
if (customValue.trim()) {
document.getElementsByName('profileBg').forEach(radio => radio.checked = false);
}
updateProfilePreview();
}
function handleStripeRadioChange() {
document.getElementById('stripeCustomLabel').value = '';
updateProfilePreview();
}
function handleBgRadioChange() {
document.getElementById('bgCustomLabel').value = '';
updateProfilePreview();
}
// --------- COPY RESULTS ------------
function copyResults() {
let copyContent = '';
// -- форма заполнения профиля --
const cyrillicName = document.getElementById('cyrillicName').value;
if (cyrillicName) {
const profileDescrName = document.getElementById('mainDescr').value;
let profileForm = `<a href='${userApplicationFormUrl}'>${cyrillicName}</a>, ${profileDescrName}`;
if (document.getElementById('hrAdd').checked) {
profileForm += '<hr>';
} else {
profileForm += '<br>';
}
const profileAdd = document.getElementById('addDescr').value;
const profileAddNotFilled = profileAdd == '' || profileAdd == `любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a>`;
if (!profileAddNotFilled) {
profileForm += profileAdd;
}
copyContent += `Форма профиля:
${String.fromCharCode(91)}code${String.fromCharCode(93)}${profileForm}${String.fromCharCode(91)}/code${String.fromCharCode(93)}\n\n`;
}
// -- форма плашки --
const stripeCustom = document.getElementById('stripeCustomLabel').value.trim();
let stripeForm = '';
if (stripeCustom) {
stripeForm = stripeCustom;
} else {
stripeForm = Array.from(document.getElementsByName('profileStripe'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
if (stripeForm) {
copyContent += `Плашка:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${stripeForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
}
// -- форма фона --
const bgCustom = document.getElementById('bgCustomLabel').value.trim();
let bgForm = '';
if (bgCustom) {
bgForm = bgCustom;
} else {
bgForm = Array.from(document.getElementsByName('profileBg'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
if (bgForm) {
copyContent += `Фон:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${bgForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
}
// -- сохранение --
window.parent.postMessage({
eventName: 'profileCopyInfoRequest',
copyData: copyContent.trim()
}, "*");
}
// --------- POST USER PROFILE UPDATE ------------
function copyResults() {
let copyContent = '';
// -- форма заполнения профиля --
const cyrillicName = document.getElementById('cyrillicName').value;
if (cyrillicName) {
const profileDescrName = document.getElementById('mainDescr').value;
let profileForm = `<a href='${userApplicationFormUrl}'>${cyrillicName}</a>, ${profileDescrName}`;
if (document.getElementById('hrAdd').checked) {
profileForm += '<hr>';
} else {
profileForm += '<br>';
}
const profileAdd = document.getElementById('addDescr').value;
const profileAddNotFilled = profileAdd == '' || profileAdd == `любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a>`;
if (!profileAddNotFilled) {
profileForm += profileAdd;
}
copyContent += `Форма профиля:
${String.fromCharCode(91)}code${String.fromCharCode(93)}${profileForm}${String.fromCharCode(91)}/code${String.fromCharCode(93)}\n\n`;
}
// -- форма плашки --
const stripeCustom = document.getElementById('stripeCustomLabel').value.trim();
let stripeForm = '';
if (stripeCustom) {
stripeForm = stripeCustom;
} else {
stripeForm = Array.from(document.getElementsByName('profileStripe'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
if (stripeForm) {
copyContent += `Плашка:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${stripeForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
}
// -- форма фона --
const bgCustom = document.getElementById('bgCustomLabel').value.trim();
let bgForm = '';
if (bgCustom) {
bgForm = bgCustom;
} else {
bgForm = Array.from(document.getElementsByName('profileBg'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
if (bgForm) {
copyContent += `Фон:
${String.fromCharCode(91)}img${String.fromCharCode(93)}${bgForm}${String.fromCharCode(91)}/img${String.fromCharCode(93)}\n\n`;
}
// -- сохранение --
window.parent.postMessage({
eventName: 'profileCopyInfoRequest',
copyData: copyContent.trim()
}, "*");
}
// --------- POST USER PROFILE UPDATE ------------
function updateProfilePreview() {
const cyrillicName = document.getElementById('cyrillicName').value ?? userLatinName;
const profileDescrName = document.getElementById('mainDescr').value;
let profileForm = `<a href='${userApplicationFormUrl}'>${cyrillicName}</a>, ${profileDescrName}`;
if (document.getElementById('hrAdd').checked) {
profileForm += '<hr>';
} else {
profileForm += '<br>';
}
const profileAdd = document.getElementById('addDescr').value;
const profileAddNotFilled = profileAdd == '' || profileAdd == `любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a>`;
if (!profileAddNotFilled) {
profileForm += profileAdd;
}
const stripeCustom = document.getElementById('stripeCustomLabel').value.trim();
let stripeForm = '';
if (stripeCustom) {
stripeForm = stripeCustom;
} else {
stripeForm = Array.from(document.getElementsByName('profileStripe'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
const bgCustom = document.getElementById('bgCustomLabel').value.trim();
let bgForm = '';
if (bgCustom) {
bgForm = bgCustom;
} else {
bgForm = Array.from(document.getElementsByName('profileBg'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
}
window.parent.postMessage({
eventName: 'profileDemo',
profileDescr: profileForm,
stripe: stripeForm,
background: bgForm
}, "*");
}
document.getElementById('instructionResult').onclick = copyResults;
updateProfilePreview();
window.addEventListener("message", (event) => {
if (!event.origin.match(/oldshadows\.rusff\.me$/)) return;
if (event.data.eventName != 'fontChange') return;
$('.post-content p, .post-content div').css('font-size', event.data.fontSize + 'px');
});
</script>
<div class="fillingForm">
<label class="fillingCategoryRadio"><input type="radio" id="profileDescr" name="fillingCategoryRadio" checked /> <span>Описание в профиле</span></label>
<label class="fillingCategoryRadio"><input type="radio" id="profileStripe" name="fillingCategoryRadio" /> <span>Плашки</span></label>
<label class="fillingCategoryRadio"><input type="radio" id="profileBg" name="fillingCategoryRadio" /> <span>Фоны</span></label>
<div class="instructionBlock profileDescr">
<h2 class="instructionHeading">Описание в профиль</h2>
<label for="cyrillicName" class="labelDescr">Имя на кириллице:</label>
<input type="text" id="cyrillicName" name="cyrillicName" oninput="updateProfilePreview()">
<label for="mainDescr" class="labelDescr">Описание в профиль:</label>
<input type="text" id="mainDescr" name="mainDescr" value="возраст, раса, род деятельности" oninput="updateProfilePreview()">
<label for="hrAdd" class="hrAdd">
<input type="checkbox" id="hrAdd" name="hrAdd" onchange="updateProfilePreview()" />
<span>Добавить полосу между секциями</span>
</label>
<label for="addDescr" class="labelDescr">При желании можете добавить в профиль пару, красивую цитату, важного родственника, врага и тому подобное через это поле. Если не нужно, оставьте его пустым или не меняйте:</label>
<textarea id="addDescr" oninput="updateProfilePreview()" name="addDescr" rows="4">любое описание на ваш вкус <a href='ссылка на анкету персонажа'>имя на кириллице</a></textarea>
</div>
<div class="instructionBlock profileStripe">
<h2 class="instructionHeading">Плашки</h2>
<div id="stripeContainer"></div>
<hr>
<div id="stripeCustom">
<label for="stripeCustomLabel" class="labelDescr">Своя плашка:</label>
<input type="text" id="stripeCustomLabel" name="stripeCustomLabel" oninput="handleStripeCustomInput()">
</div>
</div>
<div class="instructionBlock profileBg">
<h2 class="instructionHeading">Фоны</h2>
<div id="bgContainer"></div>
<hr>
<div id="bgCustom">
<label for="bgCustomLabel" class="labelDescr">Свой фон:</label>
<input type="text" id="bgCustomLabel" name="bgCustomLabel" oninput="handleBgCustomInput()">
</div>
</div>
</div>
<div class="formButtons">
<input type="button" id="instructionResult" value="Скопировать код">
</div>
<style>
h2.instructionHeading {
font-size: 16px;
font-family: var(--font-accent);
font-weight: bold;
letter-spacing: 1px;
}
.labelDescr {
display: block;
margin: 9px 0px 1px 0px;
}
.instructionBlock {
text-align: left;
margin: 10px 0 !important;
padding: 14px 14px 12px 14px !important;
border: 1px solid var(--borders);
background: var(--beg300);
border-radius: 4px;
}
.instructionBlock input[type="text"] {
width: calc(100% - 10px);
}
.instructionBlock textarea {
width: calc(100% - 10px);
resize: vertical;
}
label.hrAdd {
margin: 10px 0 0 0;
display: block;
}
input#hrAdd {
accent-color: var(--text2);
}
.profileStripeLabel, .profileBgLabel {
margin: 5px 5px;
display: inline-block;
width: 180px;
border-radius: 5px;
padding: 5px;
background: rgb(255 255 255 / 17%);
}
.profileStripeLabel img, .profileBgLabel img { border-radius: 3px; }
.profileBgLabel img {
width: 180px;
height: 40px;
object-fit: cover;
object-position: top;
}
.profileStripeLabel input, .profileBgLabel input { display: none; }
.profileStripeLabel:has(input:checked), .profileBgLabel:has(input:checked) {
background: rgb(0 0 0 / 12%);
}
div#stripeContainer, div#bgContainer {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
label.fillingCategoryRadio {
border-radius: 16px;
border: 1px solid var(--borders);
background: var(--beg300);
padding: 2px 6px;
display: inline-block;
margin: 0px 4px 5px 0px;
}
label.fillingCategoryRadio:has(input:checked) {
background: var(--borders);
color: var(--text1);
}
.fillingCategoryRadio input[type="radio"] {
display: none;
}
label.fillingCategoryRadio {
cursor: pointer;
}
.profileDescr, .profileStripe, .profileBg { display: none; }
.fillingCategoryRadio:has(#profileDescr:checked) ~ .profileDescr {
display: block !important;
}
.fillingCategoryRadio:has(#profileStripe:checked) ~ .profileStripe {
display: block !important;
}
.fillingCategoryRadio:has(#profileBg:checked) ~ .profileBg {
display: block !important;
}
.fillingForm { text-align: center; }
.instructionBlock hr {
border: solid 1px var(--borders);
margin: 10px;
}
</style>
[/html]
