В этой теме можно попросить сделать себе аватар, а также примерить одну из форумных плашек.
• Это все плашки?
Они будут постоянно пополняться, не волнуйтесь.
• А можно ли попросить сделать свою плашку?
Можно. Приносите исходник, пишите, что хотите видеть во всплывающем тексте, сделаем.
• А будут ли какие-то уникальные плашки?
Да, будут. За участие в конкурсах.
• Можно ли приносить гиф-исходники?
Можно, если они по весу не превышают 500МБ.
• А это обязательно?
Нет, конечно, все исключительно по желанию.
[html]
<script>
// --------- FILL STRIPES ------------
function labelStripe(className, nameCategory, src, descr) {
return `<label class="${className}"><input type="radio" name="${nameCategory}" id="${src}" onchange="updateProfilePreview()"> <div class="stripeDescr">${descr}</div> <img src="${src}"> </label>`;
}
function fillStripes(stripes, userId) {
document.getElementById('stripeContainer').innerHTML = stripes
.filter(stripe => (stripe.allowed.includes("all") || stripe.allowed.includes(userId)))
.map(stripe => labelStripe("profileStripeLabel", "profileStripe", stripe.src, stripe.descr)).join('');
}
// --------- 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, event.data.userId);
});
window.parent.postMessage({ eventName: 'profileFillingRequest' }, "*");
function copyResults() {
let copyContent = '';
// -- форма плашки --
const 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)}`;
}
window.parent.postMessage({
eventName: 'profileCopyInfoRequest',
copyData: copyContent.trim() // Удаляем лишние переносы в конце
}, "*");
};
document.getElementById('instructionResult').onclick = copyResults;
// --------- post user profile update ------------
function updateProfilePreview() {
const stripeForm = Array.from(document.getElementsByName('profileStripe'))
.filter(element => element.checked)
.map(element => element.id)
.join('');
window.parent.postMessage({
eventName: 'profileDemo',
stripe: stripeForm
}, "*");
}
updateProfilePreview();
</script>
<div class="instructionBlock profileInstruction">
<h2 class="instructionHeading">Плашки</h2>
<div id="stripeContainer"></div>
</div>
<div class="formButtons">
<input type="button" id="instructionResult" value="Скопировать код">
</div>
<style>
h2.instructionHeading {
font-size: 16px;
font-family: 'Palatino Linotype';
font-weight: bold;
letter-spacing: 1px;
}
.instructionBlock {
text-align: left;
margin: 10px 0 !important;
padding: 14px 14px 12px 14px !important;
border: 1px solid var(--pinkBorder);
background: var(--qBG);
border-radius: 4px;
}
.profileStripeLabel {
margin: 5px 5px;
display: inline-block;
width: 180px;
border-radius: 5px;
padding: 5px;
background: rgb(255 255 255 / 17%);
}
.profileStripeLabel img { border-radius: 3px; }
.profileStripeLabel input { display: none; }
.profileStripeLabel:has(input:checked) {
background: rgb(0 0 0 / 12%);
}
.stripeDescr {
color: rgb(0 0 0 / 51%);
padding: 0px 0px 3px 0px;
}
div#stripeContainer {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
</style>
[/html]
