гостевая книга

[html]
<style>
.gf-widget{--gf-header:#211e1c;--gf-dark:#191715;--gf-light:#e9e2d6;--gf-text:#f2ede2;--gf-text-dark:#3c362e;--gf-border:rgba(255,255,255,.14);--gf-red:#6d1f28;--gf-green:#34332a;--gf-admin-bg:#f4f0e6;--gf-radius:10px;
width:967px;height:534px;border-radius:var(--gf-radius);overflow:hidden;display:flex;flex-direction:column;background:color-mix(in srgb, var(--pun-light) 70%, transparent);font-family:Georgia,'Times New Roman',serif;box-shadow:0 6px 24px rgba(0,0,0,.35);box-sizing:border-box}
.gf-widget *{box-sizing:border-box}
.gf-widget.gf-widget.gf-widget p{margin:0;padding:0;line-height:inherit;overflow-wrap:normal}
.gf-head{flex:0 0 auto;background:var(--h2-back);color:var(--pun-light);text-align:center;padding:14px 20px 12px}
.gf-widget.gf-widget.gf-widget .gf-title{font-family:var(--big-font,Georgia,'Times New Roman',serif);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:2px;text-transform:uppercase;margin:0 0 4px}
.gf-widget.gf-widget.gf-widget .gf-sub{font-family:'Playfair Display',Georgia,serif;font-size:12px;opacity:.75;margin:0;line-height:1.3}
.gf-body{flex:1 1 auto;display:flex;min-height:0}

/* левая колонка: панели с независимыми размером/отступом */
.gf-left{flex:0 0 330px;background:url(https://forumstatic.ru/files/001c/c8/87/48104.jpg) var(--gf-dark);padding:14px;display:flex;flex-direction:column;min-height:0}
.gf-panel-wrap{position:relative;flex:0 0 260px;margin-top:20px}
.gf-panel-wrap-roles{flex: 0 0 110px;
margin-top: -30px;}

/* окно "внешности": своя картинка, рамка, стекло */
.gf-panel-outfits{ position: relative;
height: 69%;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--gf-border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .4);}
.gf-panel-outfits::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(20,18,16,.08)}

/* окно "роли": своя картинка, рамка, стекло */
.gf-panel-roles{position:relative;height:100%;border-radius:8px;overflow:hidden;border:1px solid var(--gf-border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.4);}
.gf-panel-roles::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(20,18,16,.08)}

/* текстовый список поверх картинки/стекла */
.gf-panel-scroll{position: relative;
z-index: 2;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
font: 11px / 1 var(--small-font);
padding: 20px 7px 9px 7px;}
.gf-panel-list{display:flex;flex-direction:column;gap:6px}
.gf-panel-list span{color:var(--gf-text);line-height:1.4}
.gf-panel-list b{color: var(--basic-grey);
font-size: 11px;}
.gf-panel-list a{font-size: 11px;
text-shadow: 1px 0px 0px #ffffff3d;}
.gf-panel-list .gf-date{opacity: .85;
background: var(--color-soft);
padding: 0 2px;
border-radius: 3px;
box-shadow: 1px 1px 1px #0000004a;}

/* заголовки панелей: без стекла, свободно двигаются top/left */
.gf-panel-label{position: absolute;
top: -10px;
left: 10px;
z-index: 3;
background: var(--basic-grey);
color: var(--pun-light);
font: 13px Playfair Display;
text-transform: lowercase;
padding: 3px 7px;
border-radius: 5px;
transform: rotate(-1deg);
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);}

.gf-right{flex:1;min-width:0;padding:16px 20px;display:flex;flex-direction:column;gap:10px;color:var(--gf-text-dark)}

/* кнопки админов */
.gf-admins{flex:0 0 auto;display:flex;gap:10px;justify-content:center}
.gf-admins a{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:14px;line-height:1;flex:0 0 auto;padding:8px 22px;background:var(--gf-admin-bg);color:var(--gf-text-dark);text-decoration:none;box-shadow:0px 2px 1px #0000004a}

.gf-widget.gf-widget.gf-widget .gf-text{flex:0 0 auto;font:500 12px 'Playfair Display',Georgia,serif;line-height:1.5;text-align:center}

.gf-badge{flex:0 0 auto;align-self:center;font-family:'Playfair Display',Georgia,serif;font-size:13px;padding:2px 9px;border-radius:5px;color:var(--pun-light,var(--gf-text));text-transform:lowercase}
/* наезжает на .gf-rules: сдвигается вниз через top, двигать можно им же */
.gf-badge-red{background:var(--acc-color,var(--gf-red));position:relative;top:19px;z-index:2;transform:rotate(1deg)}
.gf-badge-green{background:var(--gf-green)}

/* без прокрутки, иконки FontAwesome перед пунктами */
.gf-rules{flex:1 1 auto;min-height:0;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:12px 14px 8px}
.gf-rules ul{margin:0;padding-left:0;list-style:none}
.gf-rules li{position:relative;padding-left:14px;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:12px;line-height:1.3;margin:4px 0}
.gf-rules li::before{content:"\f6f6";font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome;font-weight:600;font-size:7px;position:absolute;left:-2px;top:5px;color:var(--color-soft,var(--gf-text-dark))}

.gf-form{flex:0 0 auto;display:flex;gap:8px}
.gf-input{flex:1;min-width:0;padding:8px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.65);font-size:11.5px;font-family:inherit;color:var(--gf-text-dark)}
.gf-input::placeholder{color:rgba(60,54,46,.5)}
.gf-copy{flex:0 0 auto;padding:5px 10px;border:none;border-radius:6px;background:var(--gf-header);font: 12px / 1 Playfair Display;color:var(--gf-text);letter-spacing:.5px;cursor:pointer}
.gf-copy:hover{opacity:.85}
.gf-output{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.gf-panel-scroll::-webkit-scrollbar{width:6px}
.gf-panel-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:3px}
</style>

<div class="gf-widget" data-role="root">
<div class="gf-head">
<p class="gf-title">Добро пожаловать на Голиаф!</p>
<p class="gf-sub">Рейтинг форума — 18+, время в игре — лето 1492 года.</p>
</div>
<div class="gf-body">
<div class="gf-left">
<div class="gf-panel-wrap">
<div class="gf-panel-label">внешности</div>
<div class="gf-panel-outfits">
<div class="gf-panel-scroll">
<div class="gf-panel-list">
<span style="font-size:10px"><span class="gf-date">21.39</span> <b>ляля</b> — <a href="ссылка">лоло</a></span>
<span style="font-size:10px"><span class="gf-date">14.05</span> <b>вторая внешность</b> — <a href="ссылка">ник2</a></span>
<span style="font-size:10px"><span class="gf-date">09.12</span> <b>третья внешность</b> — <a href="ссылка">ник3</a></span>
</div>
</div>
</div>
</div>
<div class="gf-panel-wrap gf-panel-wrap-roles">
<div class="gf-panel-label">должности и роли</div>
<div class="gf-panel-roles">
<div class="gf-panel-scroll">
<div class="gf-panel-list">
<span style="font-size:10px"><span class="gf-date">18.20</span> <b>первая роль</b> — <a href="ссылка">ник1</a></span>
<span style="font-size:10px"><span class="gf-date">11.47</span> <b>вторая роль</b> — <a href="ссылка">ник2</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="gf-right">
<div class="gf-admins" data-role="admins">
<a href="#" target="_blank" rel="noopener">Тессалия</a>
<a href="#" target="_blank" rel="noopener">Тарен</a>
<a href="#" target="_blank" rel="noopener">Нейтан</a>
<a href="#" target="_blank" rel="noopener">Тами</a>
</div>
<p class="gf-text">Здесь вы найдёте как борющихся за власть лордов, так и людей-драконов, живущих бок о бок с альфами и дварфами, гигантскими песчаными червями, бронированными полярными медведями, мстительными призраками и аномальными зонами, в сравнении с которыми Изнанка из «Очень странных дел» покажется безобидным Диснейлендом. А заночевав в лесу в полнолуние, вы можете проснуться от того, что голодный оборотень доедает вашу ногу, потому что так ему велит его родовое проклятие… Но, вероятно, даже это лучше, чем угодить в загадочный Туман, из которого ещё никто не возвращается живым.</p>
<div class="gf-badge gf-badge-red">правила придержания</div>
<div class="gf-rules">
<ul>
<li>За зарегистрированными профилями держим внешности и роли на трое суток. За гостями и «на подумать» бронь сохраняется не более суток.</li>
<li>Внешности в акциях не являются придержанными. Вы можете занимать любую из них, если они не указаны в гостевой или в списке занятых внешностей. Выкупленные имена находятся там же.</li>
<li>Придержанные заявки в гостевой не фиксируются, заказчики сами отмечают статус заявки в своём сообщении.</li>
</ul>
</div>
<div class="gf-badge gf-badge-green">придержать роль</div>
<div class="gf-form">
<input type="text" class="gf-input" data-field="role" placeholder="внешность/роль">
<input type="text" class="gf-input" data-field="nick" placeholder="ваш ник">
<input type="text" class="gf-input" data-field="link" placeholder="ссылка на профиль">
<button type="button" class="gf-copy" data-action="copy">копировать</button>
</div>
</div>
</div>
<div class="gf-output" contenteditable="true" data-role="output" aria-hidden="true"></div>
</div>

function byAttr(root, attr, val) {
return root.querySelector("[" + attr + '="' + val + '"]');
}

function closestButton(el, root) {
while (el && el !== root) {
if (el.getAttribute && el.getAttribute("data-action")) return el;
el = el.parentNode;
}
return null;
}

function pad2(n) {
return (n < 10 ? "0" : "") + n;
}

function formatTime(d) {
return pad2(d.getHours()) + "." + pad2(d.getMinutes());
}

function buildOutput(role, nick, link) {
var time = formatTime(new Date());
var roleText = role || "—";
var nickText = nick || "—";
var nickPart = link ? '<a href="' + link + '">' + nickText + '</a>' : nickText;
return '<span style="font-size:10px"><span class="gf-date">' + time + '</span> <b>' + roleText + '</b> — ' + nickPart + '</span>';
}

function initWidget(root) {
if (!root || root.getAttribute("data-ready") === "true") return;

var roleInput = byAttr(root, "data-field", "role");
var nickInput = byAttr(root, "data-field", "nick");
var linkInput = byAttr(root, "data-field", "link");
var output = byAttr(root, "data-role", "output");
var copyBtn = byAttr(root, "data-action", "copy");

if (!roleInput || !nickInput || !linkInput || !output || !copyBtn) return;

root.setAttribute("data-ready", "true");

root.addEventListener("click", function (e) {
var target = closestButton(e.target, root);
if (!target) return;
if (target.getAttribute("data-action") === "copy") {
var out = buildOutput(roleInput.value, nickInput.value, linkInput.value);
copyText(out, output);
var old = target.textContent;
target.textContent = "скопировано!";
setTimeout(function () {
target.textContent = old;
}, 1500);
}
});
}

function tryInit() {
var roots = document.querySelectorAll('.gf-widget[data-role="root"]');
for (var i = 0; i < roots.length; i++) {
initWidget(roots[i]);
}
}

tryInit();
document.addEventListener("DOMContentLoaded", tryInit);
setTimeout(tryInit, 300);
setTimeout(tryInit, 800);
setTimeout(tryInit, 1500);
})();
</script>
[/html]
[hideprofile]