[hideprofile]
[html]<style>
.guest{max-width:1000px;margin:16px auto;padding:26px;background-image:var(--guest-banner);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--dusty);border-radius:16px;font-family:var(--font-main);color:var(--text)}
.guest-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:22px}
.g-welcome{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column}
.g-reserved{grid-column:2;grid-row:1}
.g-bought{grid-column:3;grid-row:1}
.g-form{grid-column:2 / 4;grid-row:2}
/* --- бокс + плашка-заголовок --- */
.g-box{position:relative;background:var(--panel);border-radius:12px;padding:24px 20px 20px}
.g-title{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:5px 22px;background:var(--dusty);box-shadow:-1px 1px 1px rgba(175,143,129,.5),0 0 1px rgba(175,143,129,.3);border-radius:6px;font-family:var(--font-gropled);font-style:italic;font-weight:500;font-size:13px;letter-spacing:-.03em;color:#6b5d55;text-transform:lowercase;white-space:nowrap;z-index:2}
.g-welcome .g-title{font-size:20px;color:#c07d6b}
/* --- welcome --- */
.g-welcome .g-box{flex:1}
.g-intro{font-style:italic;font-size:12px;line-height:1.7;letter-spacing:-.01em;color:#8a7d76;text-align:justify;text-transform:lowercase}
.g-info{margin-top:16px;text-align:center;font-style:italic;font-size:13px;line-height:1.7;color:#fff;text-transform:lowercase}
/* --- списки --- */
.g-list{max-height:360px;overflow:auto;text-align:center}
.g-date{margin:16px 0 8px;font-style:italic;font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--accent)}
.g-date:first-child{margin-top:0}
.g-row{font-style:italic;font-size:12px;line-height:1.95;color:#8a7d76}
.g-char{color:var(--accent)}
.g-empty{padding:12px 0;text-align:center;font-style:italic;color:#b0a49d}
/* --- форма --- */
.g-form .g-box{display:flex;flex-direction:column;gap:12px}
.g-form-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.g-input{flex:1;min-width:120px;height:36px;padding:0 16px;border:none;border-radius:8px;background:var(--bg);font-family:var(--font-main);font-size:13px;color:var(--text);outline:none}
.g-input::placeholder{color:#a89c95}
.g-input:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.g-copy{height:36px;padding:0 20px;border:none;border-radius:8px;background:var(--dusty);color:#5f4f48;font-family:var(--font-gropled);font-style:italic;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.g-copy:hover{background:var(--accent);color:#fff}
.g-toform{width:max-content;padding:7px 20px;border:none;border-radius:8px;background:var(--dusty);color:#6b5d55;font-family:var(--font-gropled);font-style:italic;font-weight:700;font-size:13px;text-transform:lowercase;cursor:pointer}
.g-toform:hover{background:var(--accent);color:#fff}
.g-dur{padding:8px 16px;border:1px solid var(--dusty);border-radius:8px;background:var(--panel);color:var(--text);font-family:var(--font-main);font-weight:700;font-size:12px;text-transform:lowercase;cursor:pointer;transition:.2s}
.g-dur:hover{border-color:var(--accent)}
.g-dur.g-dur-buy{background:var(--dusty);border-color:var(--dusty);color:#5f4f48;font-style:italic}
.g-dur.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.g-until{margin-left:6px;font-size:13px;color:var(--text);text-transform:lowercase}
.g-until b{color:var(--accent);font-weight:700}
@media (max-width:720px){
.guest-grid{grid-template-columns:1fr}
.g-welcome,.g-reserved,.g-bought,.g-form{grid-column:1;grid-row:auto}
}
</style>
<div class="guest" data-sep="//" data-empty="пока пусто" data-until="держим до" data-incl="включительно * 23:59 мск">
<div class="guest-grid">
<div class="g-welcome">
<div class="g-box">
<div class="g-title">welcome</div>
<div class="g-intro">далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. вдали от всех живут они в буквенных домах на берегу семантика большого языкового океана. маленький ручеек даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</div>
</div>
<div class="g-info">real life, 18+<br>boston, любая<br>другая информация о проекте</div>
</div>
<div class="g-reserved">
<div class="g-box">
<div class="g-title">придержанные</div>
<div class="g-list" id="gReserved"></div>
<!-- ↓ РЕДАКТИРУЙ ЗДЕСЬ: строка-дата (23.06) = заголовок, ниже строки "имя // ник" -->
<div class="g-src" data-target="gReserved" style="display:none">
23.06
name surname // ник персонажа
name surname // ник персонажа
name surname // ник персонажа
22.06
name surname // ник персонажа
name surname // ник персонажа
</div>
</div>
</div>
<div class="g-bought">
<div class="g-box">
<div class="g-title">выкупленные</div>
<div class="g-list" id="gBought"></div>
<!-- ↓ РЕДАКТИРУЙ ЗДЕСЬ -->
<div class="g-src" data-target="gBought" style="display:none">
23.06
name surname // ник персонажа
name surname // ник персонажа
21.06
name surname // ник персонажа
name surname // ник персонажа
</div>
</div>
</div>
<div class="g-form">
<div class="g-box">
<div class="g-title">придержать внешность</div>
<div class="g-form-row">
<input class="g-input" id="gA" type="text" placeholder="name surname">
<input class="g-input" id="gB" type="text" placeholder="внешность">
<button type="button" class="g-copy" id="gCopy" data-done="скопировано">ctrl + c</button>
</div>
<div class="g-form-row">
<button type="button" class="g-toform" id="gToForm">в форму ответа</button>
</div>
<div class="g-form-row">
<button type="button" class="g-dur" data-days="1">1 день</button>
<button type="button" class="g-dur" data-days="3">3 дня</button>
<button type="button" class="g-dur g-dur-buy" data-month="1">выкуп * месяц</button>
<span class="g-until" id="gUntil"></span>
</div>
</div>
</div>
</div>
</div>[/html]