[html]
<style>
.guestbook{width:800px;margin:0 auto;padding:24px;box-sizing:border-box;position:relative;background:url(https://forumstatic.ru/files/001c/c4/75/72353.png) center/cover no-repeat;border-radius:35px;overflow:hidden}
.gb-header{display:flex;justify-content:flex-end;margin-bottom:8px}
.gb-title{color:#fff;font:500 75px/1 var(--newsf);}
.gb-body{display:flex;justify-content:flex-end;align-items:flex-start;gap:25px;}
.gb-admins{display:flex;flex-direction:column;gap:8px;width:100px;flex-wrap:nowrap;justify-content:center;}
.gb-admin{text-transform:lowercase;display:flex;align-items:center;justify-content:center;padding:0 13px;font:600 11px/160% 'Noto Sans Mono',sans-serif;height:30px;border-radius:15px;background:#000;color:#fff!important;position:relative;}
.gb-admin:after{content:attr(data-title);position:absolute;top:38px;left:50%;transform:translateX(-50%);width:150px;padding:5px;border-radius:10px;background:#222;color:#fff;font:11px/160% 'Noto Sans Mono',monospace;text-align:center;opacity:0;pointer-events:none;transition:.2s;z-index:99999;}
.gb-admin:hover:after{opacity:1}
.gb-top{display:flex;gap:20px}
.gb-left{width:180px;height:258px;padding:0;background:rgba(35,35,35,.65);backdrop-filter:blur(5px);border-radius:18px;box-sizing:border-box;overflow:hidden;}
.gb-right{width:427px;height:258px;padding:0;background:rgba(35,35,35,.65);backdrop-filter:blur(5px);border-radius:18px;box-sizing:border-box;overflow:hidden;}
.gb-bottom{width:427px;margin:18px 0 0 auto}
.gb-copy{width:427px;height:34px;border:0;border-radius:10px;background:#222;color:#fff;cursor:pointer;margin-bottom:8px}
.gb-code{width:427px;height:51px;border:0;border-radius:12px;padding:15px;box-sizing:border-box;resize:none}
.gb-left-text{width:159px;height:220px;margin:10px 0 0 10px;overflow:auto;color:#ececec;font: 300 13px / 120% "Cormorant Infant", serif;white-space:normal;word-break:break-word;}
.gb-right-text{width:395px;padding-right:6px;height:223px;margin:13px 0 0 18px;overflow:auto;color:#ececec;font: 300 13px / 120% "Cormorant Infant", serif;text-align:justify;white-space:normal;word-break:break-word;}
</style>
<div class="guestbook">
<div class="gb-header">
<div class="gb-title">Gostevaya</div>
</div>
<div class="gb-body">
<div class="gb-admins">
<a href="https://brokengeis.rusff.me/profile.php?id=4" class="gb-admin" data-title="дизайнер и графин">хускар</a>
<a href="https://brokengeis.rusff.me/profile.php?id=8" class="gb-admin" data-title="питомец амс">вивиан</a>
<a href="https://brokengeis.rusff.me/profile.php?id=6" class="gb-admin" data-title="спец по матчасти">томас</a>
<a href="https://brokengeis.rusff.me/profile.php?id=64" class="gb-admin" data-title="квестоплет">кардан</a>
<a href="https://brokengeis.rusff.me/profile.php?id=7" class="gb-admin" data-title="техподдержка">амелия</a>
<a href="https://brokengeis.rusff.me/profile.php?id=194" class="gb-admin" data-title="аниматор">райли</a>
</div>
<div class="gb-top">
<div class="gb-left">
<div class="gb-left-text">
<b>админский произвол:</b>
<br>adam brody
<br>cameron chapman
<br>max verstappen
<br>samara weaving
<br>
<br>
<br>
<b>до 29.09 (включительно):</b>
armie hammer — <a href="https://brokengeis.rusff.me/profile.php?id=199">пэрсик</a>[2]<br>
<br>
<b>до 30.09 (включительно):</b>
richard gadd — <a href="https://brokengeis.rusff.me/profile.php?id=278">theodore wood</a><br>
lee felix — <a href="https://brokengeis.rusff.me/profile.php?id=295">alistair reed</a><br>
kim seungmin — <a href="https://brokengeis.rusff.me/profile.php?id=296">alexander park</a><br>
<br>
<b>до 02.10 (включительно):</b>
freddie fox — <a href="https://brokengeis.rusff.me/profile.php?id=275">котенок почтальон</a>[2]<br>
</div>
</div>
<div class="gb-right">
<div class="gb-right-text">
добро пожаловать на ФРПГ в жанре мистика (с вплетением рас и кельтской мифологии). проходите, располагайтесь, переобувайтесь в тапочки, выбирайте любимые лица и создавайте уникальные истории.
<br><br>
внешности для зарегистрированных держим 3 дня (плюс два продления по 2 дня), а гостям, друзьям и на подумать — сутки.
<br><br>
если коротко о нас, то мы располагаемся на британском архипелаге и занимаем всю территорию ирландии и британии. здесь пытаются ужиться между собой вампиры, оборотни, банши, ведьмы, призраки, фейри, мэрроу и обычные люди (в будущем планируем пополнение рас). проблемы экономического кризиса и престолонаследия давно уже не волнуют всех этих существ, в отличие от выживания под взором разгневанных богов.
<br><br>
божества, что раньше покровительствовали всем этим расам, обернулись против них и поставили под вопрос само существование своих подопечных. теперь им предстоит следить за своим поведением, зарабатывать очки милости или получать дебаффы гнева богов. помните, что любое решение будет иметь последствие.
<br><br>
подробнее ознакомиться с матчастью форума, узнать нас поближе и просто понять, что вообще здесь происходит, можно в специальных темах по навигации в подфорумах или шапке форума.<br>
</div>
</div>
</div>
</div>
<div class="gb-bottom">
</div>
</div>
[/html]
[hideprofile]
[html]
<div class="gbform-widget" data-role="gbform-root" data-ready="false">
<div class="gbform-fields">
<input type="text" class="gbform-input" data-role="gbform-name" placeholder="имя внешности" maxlength="80">
<input type="text" class="gbform-input" data-role="gbform-nick" placeholder="ваш ник" maxlength="80">
<input type="text" class="gbform-input" data-role="gbform-link" placeholder="ссылка на профиль" maxlength="200">
</div>
<div class="gbform-actions">
<button type="button" data-action="gbform-generate">сформировать код</button>
<button type="button" data-action="gbform-copy">копировать</button>
</div>
<div class="gbform-output" contenteditable="true" data-role="gbform-output"></div>
<div class="gbform-status" data-role="gbform-status"></div>
</div>
<script>
(function () {
'use strict';
function byRole(root, name) {
return root ? root.querySelector('[data-role="' + name + '"]') : null;
}
function esc(s) {
return String(s).replace(/[&<>"]/g, function (c) {
return c === '&' ? '&' : c === '<' ? '<' : c === '>' ? '>' : '"';
});
}
function findBtn(el, root) {
while (el && el !== root) {
if (el.getAttribute && el.getAttribute('data-action')) { return el; }
el = el.parentNode;
}
return null;
}
function status(root, text) {
var s = byRole(root, 'gbform-status');
if (s) { s.textContent = text || ''; }
}
function generate(root) {
var name = byRole(root, 'gbform-name'), nick = byRole(root, 'gbform-nick'),
link = byRole(root, 'gbform-link'), out = byRole(root, 'gbform-output');
if (!name || !nick || !link || !out) { return; }
var n = name.value.replace(/^\s+|\s+$/g, ''),
k = nick.value.replace(/^\s+|\s+$/g, ''),
l = link.value.replace(/^\s+|\s+$/g, '');
if (!n || !k) {
root.setAttribute('data-generated', 'false');
status(root, 'заполните имя внешности и ник');
return;
}
var nickPart = l ? ('<a href="' + esc(l) + '">' + esc(k) + '</a>') : esc(k);
out.textContent = esc(n) + ' — ' + nickPart + '<br>';
root.setAttribute('data-generated', 'true');
status(root, 'готово, можно копировать');
}
function copy(root) {
var out = byRole(root, 'gbform-output');
if (!out || root.getAttribute('data-generated') !== 'true' || !out.textContent) {
status(root, 'сначала нажмите «сформировать код»');
return;
}
var text = out.textContent, doc = root.ownerDocument, win = doc.defaultView;
function legacy() {
try {
var range = doc.createRange();
range.selectNodeContents(out);
var sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
var ok = doc.execCommand('copy');
sel.removeAllRanges();
status(root, ok ? 'скопировано' : 'не удалось скопировать автоматически');
} catch (e) {
status(root, 'не удалось скопировать автоматически');
}
}
if (win.navigator && win.navigator.clipboard && win.navigator.clipboard.writeText) {
win.navigator.clipboard.writeText(text).then(function () { status(root, 'скопировано'); }, legacy);
} else {
legacy();
}
}
function onClick(ev) {
var root = ev.currentTarget, btn = findBtn(ev.target, root);
if (!btn) { return; }
var action = btn.getAttribute('data-action');
if (action === 'gbform-generate') { generate(root); }
else if (action === 'gbform-copy') { copy(root); }
}
function initOne(root) {
if (!root || root.getAttribute('data-ready') === 'true') { return; }
if (!byRole(root, 'gbform-name') || !byRole(root, 'gbform-nick') || !byRole(root, 'gbform-link') || !byRole(root, 'gbform-output')) { return; }
root.setAttribute('data-ready', 'true');
root.setAttribute('data-generated', 'false');
root.addEventListener('click', onClick, false);
}
function init() {
var roots = document.querySelectorAll('[data-role="gbform-root"]');
for (var i = 0; i < roots.length; i++) { initOne(roots[i]); }
}
document.addEventListener('DOMContentLoaded', init, false);
setTimeout(init, 300);
setTimeout(init, 800);
setTimeout(init, 1500);
init();
}());
</script>
[/html]
Да, мы сейчас находимся на стадии теста и прощупывания интереса. Будет еще чист, но переезжать уже никуда не планируем)
