гостьова

Поделиться12026-09-30 11:52:35

Автор: necromancer
Администратор
Сообщений: 14
Уважение: +0
Последний визит:
2026-09-30 12:11:21

[hideprofile][html]<style>

/* =========================================================
ОСНОВНИЙ БІЛИЙ КОНТЕЙНЕР
========================================================= */

.guest-wrap {
width: 100%;
max-width: 1100px;

margin: 35px auto;
padding: 36px;

box-sizing: border-box;

background: rgb(255 255 255);

border-radius: 26px;

color: #444;

font-family: inherit;
}

/* =========================================================
ШАПКА / КАРТИНКА
========================================================= */

.guest-header {
position: relative;

width: 100%;
height: 225px;

overflow: hidden;

border-radius: 20px;

background-image: url("https://upforme.ru/uploads/001c/ad/04/2/667013.jpg");

background-size: cover;

background-position: center center;
}

.guest-header:after {
content: "";

position: absolute;

inset: 0;

background: rgba(238, 238, 238, .08);

pointer-events: none;
}

/* =========================================================
НАЗВА PRAY&PREY
========================================================= */
.guest-header-title {
position: absolute;
left: 32px;
bottom: -3px;
z-index: 2;
color: #f4f4f4;
font-family: 'TheSilverEditorial', serif;
text-transform: uppercase;
font-style: italic;
font-size: 68px;
line-height: .85;
font-weight: 400;
letter-spacing: -1px;
}

/* =========================================================
ОСНОВНА ЧАСТИНА
========================================================= */

.guest-body {
display: grid;

grid-template-columns:
minmax(0, 1fr)
400px;

gap: 18px;

margin-top: -28px;

position: relative;

z-index: 5;
}

/* =========================================================
БЛОК №2 — ІНФОРМАЦІЯ
========================================================= */

.guest-info {
padding: 30px;

box-sizing: border-box;

background: #f4f4f4;

border-radius: 18px;
}

.guest-info ul {
margin: 0 0 22px;

padding: 0;

list-style: none;
}

.guest-info li {
position: relative;

margin: 0 0 7px;

padding-left: 16px;

font-size: 11px;

line-height: 1.45;

font-weight: 600;
}

/* зірочки */

.guest-info li:before {
content: "✦";

position: absolute;

left: 0;
top: 0;

color: #415549;

font-size: 9px;
}

/* посилання */

.guest-info a {
color: #415549;

font-size: 11px;

font-weight: 700;

text-decoration: none;
}

.guest-info a:hover {
text-decoration: underline;
}

/* =========================================================
ТЕГИ
========================================================= */

.guest-tags {
display: flex;

flex-wrap: wrap;

gap: 9px;
}

.guest-tag {
display: inline-flex;

align-items: center;

justify-content: center;

min-height: 34px;

padding: 6px 19px;

box-sizing: border-box;

border-radius: 20px;

background: #cabeae;

color: #415549;

font-size: 11px;

font-weight: 700;

text-decoration: none;

transition: all .2s ease;
}

.guest-tag:hover {
background: #cabeae;

color: #415549;
}

/* =========================================================
ПРАВА КОЛОНКА — №3
========================================================= */

.guest-side {
display: flex;

flex-direction: column;

gap: 14px;
}

.guest-side-box {
padding: 18px 24px;

box-sizing: border-box;

background: #f4f4f4;

border-radius: 18px;
}

.guest-side-box.for-self {
min-height: 350px;
}

.guest-side-box.for-requests {
min-height: 150px;
}

/* =========================================================
ЗАГОЛОВКИ
========================================================= */

.guest-label {
width: fit-content;

min-width: 125px;

margin: -1px auto 14px;

padding: 6px 20px;

box-sizing: border-box;

border-radius: 20px;

background: #cabeae;

color: #415549;

font-size: 11px;

font-weight: 700;

line-height: 1;

text-align: center;
}

/* =========================================================
СПИСОК ЗАЙНЯТИХ ЗОВНІШНОСТЕЙ
========================================================= */

.guest-side-content {
border-top: 1px solid #cabeae;
}

.guest-side-item {
padding: 13px 5px;

border-bottom: 1px solid #cabeae;

text-align: center;

font-size: 11px;

line-height: 1.4;
}

.guest-side-item:last-child {
border-bottom: 0;
}

/* дата */

.guest-date {
display: block;

margin-bottom: 4px;

color: #415549;

font-size: 11px;

font-weight: 700;
}

/* ім'я */

.guest-name {
color: #444;

font-size: 11px;

font-weight: 700;
}

/* зовнішність */

.guest-role {
color: #777;

font-size: 11px;
}

/* =========================================================
№4 — ПРИДЕРЖАТЬ ВНЕШНОСТЬ
========================================================= */

.guest-hold {
position: relative;

z-index: 4;

margin-top: 18px;

padding: 20px;

box-sizing: border-box;

background: #f4f4f4;

border-radius: 18px;
}

.guest-hold-title {
margin: 0 0 10px;

padding-left: 2px;

color: #415549;

font-size: 16px;

font-weight: 700;
}

.guest-hold-info {
margin-bottom: 16px;

color: #777;

font-size: 11px;

line-height: 1.5;
}

/* =========================================================
ФОРМА ГЕНЕРАЦІЇ
ВСІ 3 ПОЛЯ + КНОПКА В ОДИН РЯДОК
========================================================= */

.guest-form {
display: flex;

align-items: center;

gap: 10px;

width: 100%;
}

/* =========================================================
ПОЛЯ
========================================================= */

.guest-form .guest-input {
flex: 1;

min-width: 0;

width: auto;

height: 42px;

padding: 10px 14px;

box-sizing: border-box;

border: 1px solid #cabeae;

border-radius: 12px;

background: #fafafa;

color: #555;

font-family: inherit;

font-size: 11px;

outline: none;

transition:
border-color .2s ease,
background .2s ease;
}

.guest-form .guest-input:focus {
border-color: #cabeae;

background: #fff;
}

.guest-form .guest-input::placeholder {
color: #8a8a8a;
}

/* =========================================================
МАЛЕНЬКА КНОПКА ГЕНЕРАЦІЇ
========================================================= */

.guest-form .guest-button {
flex: 0 0 42px;

width: 42px;

height: 42px;

padding: 0;

border: 0;

border-radius: 12px;

background: #cabeae;

color: #415549;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: all .2s ease;
}

.guest-form .guest-button:hover {
background: #cabeae;

color: #415549;

transform: translateY(-1px);
}

.guest-form .guest-button svg {
width: 18px;

height: 18px;
}

.guest-form .guest-button.copied {
background: #cabeae;

color: #415549;
}

/* =========================================================
ВІКНО HTML-КОДУ
========================================================= */

.guest-code-box {
margin-top: 14px;

padding: 16px 18px;

box-sizing: border-box;

background: #eeeeee;

border-radius: 14px;
}

.guest-code-title {
margin-bottom: 10px;

color: #415549;

font-size: 11px;

font-weight: 700;
}

.guest-code-row {
display: flex;

align-items: center;

gap: 10px;
}

.guest-code-input {
flex: 1;

min-width: 0;

height: 42px;

padding: 10px 14px;

box-sizing: border-box;

border: 1px solid #cabeae;

border-radius: 12px;

background: #fafafa;

color: #777;

font-family: monospace;

font-size: 11px;

line-height: 20px;

resize: none;

outline: none;

overflow: hidden;
}

/* =========================================================
КНОПКА КОПІЮВАННЯ HTML
========================================================= */

.guest-code-row .guest-button {
flex: 0 0 42px;

width: 42px;

height: 42px;

padding: 0;

border: 0;

border-radius: 12px;

background: #cabeae;

color: #415549;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

transition: all .2s ease;
}

.guest-code-row .guest-button:hover {
background: #cabeae;

color: #415549;

transform: translateY(-1px);
}

.guest-code-row .guest-button svg {
width: 18px;

height: 18px;
}

.guest-code-row .guest-button.copied {
background: #cabeae;

color: #415549;
}

/* =========================================================
ПЛАНШЕТ
========================================================= */

@media (max-width: 850px) {

.guest-wrap {
padding: 24px;
}

.guest-body {
grid-template-columns: 1fr;

margin-top: 18px;
}

.guest-info {
padding-bottom: 10px;
}

}

/* =========================================================
МОБІЛЬНИЙ
========================================================= */

@media (max-width: 600px) {

.guest-wrap {
margin: 15px auto;

padding: 15px;

border-radius: 18px;
}

.guest-header {
height: 190px;

border-radius: 14px;
}

.guest-header-title {
left: 20px;

bottom: -2px;

font-size: 45px;
}

.guest-info {
padding: 22px 20px;
}

/* на маленькому екрані поля стають вертикально */

.guest-form {
flex-direction: column;

align-items: stretch;
}

.guest-form .guest-input {
width: 100%;

flex: none;
}

.guest-form .guest-button {
width: 100%;

flex: none;
}

/* код */

.guest-code-row {
flex-direction: column;

align-items: stretch;
}

.guest-code-input {
width: 100%;
}

.guest-code-row .guest-button {
width: 100%;

flex: none;
}

}

</style>

</div>

<ul>

<li>
тематика: мистика (расы, открытый мир).
локация: денвер, сша.
</li>

<li>
внешности держим <strong>5 дней</strong>,
продлить можно 1 раз на 5 дней
(даты указаны включительно).
</li>

<li>
занятые внешности + имена/фамилии
можно посмотреть
<a href="#">здесь</a>.
</li>

<li>
заявки придерживают заказчики.
</li>

<li>
при выкупе внешности в банке
указываем ссылку на оплату и срок.
</li>

<li>
заменить внешность при выкупе
можно только в первый день покупки.
</li>

<li>
внешности для заявки выкупаются
<strong>только при наличии заявки.</strong>
</li>

</ul>

<a href="#" class="guest-tag">
организации
</a>

<a href="#" class="guest-tag">
уровни мира
</a>

<a href="#" class="guest-tag">
сюжет
</a>

</div>

<span class="guest-name">
booboo stewart
</span>

</div>

<div>

<span class="guest-name">
james spader
</span>

</div>

<div>

<span class="guest-name">
mãdchen amick
</span>

<span class="guest-role">
/ diamond fern
</span>

</div>

<div>

<span class="guest-name">
stephen kalyn
</span>

<span class="guest-role">
/ diamond fern
</span>

</div>

<span class="guest-name">
belmont cameli
</span>

<span class="guest-role">
/ fraser mckee
</span>

</div>

<div class="guest-label">
для заявок
</div>

<span class="guest-name">
lee felix
</span>

<span class="guest-role">
/ нужные персонажи
</span>

</div>

<div class="guest-hold-title">
придержать внешность
</div>

<div class="guest-hold-info">
внешность придерживается на 5 дней,
продлить можно 1 раз на 5 дней.
</div>

</svg>

</button>

</div>

<div class="guest-code-title">
код для заявки
</div>

<textarea
class="guest-code-input"
id="guestCode"
readonly
rows="1"
><p class="guest-item">имя фамилия — <a href="ССЫЛКА НА ПРОФИЛЬ">внешность</a></p></textarea>

</svg>

</button>

</div>

/* =========================================================
ГЕНЕРАЦІЯ ГОТОВОГО HTML
========================================================= */

function makeGuestCode() {

const name =
document
.getElementById('guestName')
.value
.trim();

const profile =
document
.getElementById('guestProfile')
.value
.trim();

const face =
document
.getElementById('guestFace')
.value
.trim();

/* якщо не заповнені всі три поля */

if (!name || !profile || !face) {

return;

}

/* =====================================================
ГОТОВИЙ ЕЛЕМЕНТ ДЛЯ БЛОКІВ №3 / №4

<p class="guest-item">
имя фамилия —
<a href="ССЫЛКА">внешность</a>
</p>
===================================================== */

const code =
'<p class="guest-item">' +
name +
' — <a href="' +
profile +
'">' +
face +
'</a></p>';

/* показуємо результат */

document
.getElementById('guestCode')
.value = code;

/* автоматично копіюємо */

copyGuestCode();

}

/* =========================================================
КОПІЮВАННЯ HTML
========================================================= */

function copyGuestCode() {

const code =
document
.getElementById('guestCode');

const button =
document.querySelector(
'.guest-code-row .guest-button'
);

/* сучасний спосіб */

navigator.clipboard
.writeText(code.value)

.then(function() {

button.classList.add('copied');

setTimeout(function() {

button.classList.remove('copied');

}, 1000);

})

/* запасний спосіб */

.catch(function() {

code.select();

document.execCommand('copy');

button.classList.add('copied');

setTimeout(function() {

button.classList.remove('copied');

}, 1000);

});

}

</script>[/html]

0

Поделиться22026-09-30 11:53:00

Автор: necromancer
Администратор
Сообщений: 14
Уважение: +0
Последний визит:
2026-09-30 12:11:21

[hideprofile][html]
<div style="
width:100%;
max-width:1100px;
margin:25px auto;
padding:55px 35px 65px;
box-sizing:border-box;

background:#f5f5f5;

border-radius:26px;

font-family:Arial, Helvetica, sans-serif;
color:#30302f;
">

<div style="
width:max-content;
max-width:90%;

margin:0 auto 70px;
padding:11px 35px;

box-sizing:border-box;

background:#cabeae;

color:#415549;

border-radius:30px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;
text-transform:uppercase;

text-align:center;
">
хронологія подій
</div>

<div style="
position:absolute;

left:50%;

width:2px;

margin-top:0;

background:#cabeae;
"></div>

<div style="
position:relative;

display:flex;
justify-content:flex-start;
align-items:center;

min-height:190px;

margin-bottom:35px;
">

<div style="
position:relative;

width:calc(50% - 100px);

padding:27px 30px;

box-sizing:border-box;

background:#ffffff;

border-radius:24px;

text-align:center;

box-shadow:0 4px 18px rgba(65,85,73,.035);
">

<div style="
position:absolute;

top:50%;
right:-50px;

width:50px;
height:2px;

background:#cabeae;

transform:translateY(-50%);
"></div>

<div style="
position:absolute;

top:50%;
right:-56px;

width:10px;
height:10px;

background:#415549;

border:4px solid #f5f5f5;

border-radius:50%;

transform:translateY(-50%);
"></div>

<div style="
margin-bottom:12px;

color:#415549;

font-size:10px;
font-weight:bold;

letter-spacing:.5px;

text-transform:uppercase;
">
дескриптор
</div>

<div style="
color:#30302f;

font-size:10px;
line-height:1.6;
">
В Отделе тайн завершают работу над Дескриптором.
Вскоре машина выходит за пределы расшифровки
пророчеств и начинает рассчитывать возможное
будущее. Разные сценарии снова и снова сходятся
на одной дате — 31 октября 1981 года.
</div>

<a href="#" style="
display:inline-block;

margin-top:14px;

color:#415549;

font-size:10px;
font-weight:bold;

text-decoration:none;
">
читать эпизод →
</a>

</div>

<div style="
position:absolute;

left:50%;
top:50%;

width:78px;

padding:9px 12px;

box-sizing:border-box;

transform:translate(-50%,-50%);

z-index:5;

background:#415549;

color:#ffffff;

border-radius:25px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;

text-align:center;
">
1975
</div>

</div>

<div style="
position:relative;

display:flex;
justify-content:flex-end;
align-items:center;

min-height:190px;

margin-bottom:35px;
">

<div style="
position:relative;

width:calc(50% - 100px);

padding:27px 30px;

box-sizing:border-box;

background:#ffffff;

border-radius:24px;

text-align:center;

box-shadow:0 4px 18px rgba(65,85,73,.035);
">

<div style="
position:absolute;

top:50%;
left:-50px;

width:50px;
height:2px;

background:#cabeae;

transform:translateY(-50%);
"></div>

<div style="
position:absolute;

top:50%;
left:-56px;

width:10px;
height:10px;

background:#415549;

border:4px solid #f5f5f5;

border-radius:50%;

transform:translateY(-50%);
"></div>

<div style="
margin-bottom:12px;

color:#415549;

font-size:10px;
font-weight:bold;

letter-spacing:.5px;

text-transform:uppercase;
">
пророчество
</div>

<div style="
color:#30302f;

font-size:10px;
line-height:1.6;
">
Дескриптор связывает пророчество о будущем
противнике Волдеморта с еще не родившимся
ребенком Джеймса Поттера и Лили Эванс.
Министр Гарольд Минчум решает не полагаться
на пророчество и попытаться уничтожить
Темного Лорда силами государства.
</div>

<a href="#" style="
display:inline-block;

margin-top:14px;

color:#415549;

font-size:10px;
font-weight:bold;

text-decoration:none;
">
читать эпизод →
</a>

</div>

<div style="
position:absolute;

left:50%;
top:50%;

width:78px;

padding:9px 12px;

box-sizing:border-box;

transform:translate(-50%,-50%);

z-index:5;

background:#cabeae;

color:#415549;

border-radius:25px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;

text-align:center;
">
1979
</div>

</div>

<div style="
position:relative;

display:flex;
justify-content:flex-start;
align-items:center;

min-height:190px;

margin-bottom:35px;
">

<div style="
position:relative;

width:calc(50% - 100px);

padding:27px 30px;

box-sizing:border-box;

background:#ffffff;

border-radius:24px;

text-align:center;

box-shadow:0 4px 18px rgba(65,85,73,.035);
">

<div style="
position:absolute;

top:50%;
right:-50px;

width:50px;
height:2px;

background:#cabeae;

transform:translateY(-50%);
"></div>

<div style="
position:absolute;

top:50%;
right:-56px;

width:10px;
height:10px;

background:#415549;

border:4px solid #f5f5f5;

border-radius:50%;

transform:translateY(-50%);
"></div>

<div style="
margin-bottom:12px;

color:#415549;

font-size:10px;
font-weight:bold;

letter-spacing:.5px;

text-transform:uppercase;
">
сорванная свадьба
</div>

<div style="
color:#30302f;

font-size:10px;
line-height:1.6;
">
Министерство срывает свадьбу Поттеров,
рассчитывая отложить рождение ребенка.
При следующем пересчете неожиданно меняется
не только эта ветвь: 31 октября 1981 года
исчезает из прогноза. Новый День К —
31 октября 1984-го.
</div>

<a href="#" style="
display:inline-block;

margin-top:14px;

color:#415549;

font-size:10px;
font-weight:bold;

text-decoration:none;
">
читать эпизод →
</a>

</div>

<div style="
position:absolute;

left:50%;
top:50%;

width:78px;

padding:9px 12px;

box-sizing:border-box;

transform:translate(-50%,-50%);

z-index:5;

background:#415549;

color:#ffffff;

border-radius:25px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;

text-align:center;
">
1979
</div>

</div>

<div style="
position:relative;

display:flex;
justify-content:flex-end;
align-items:center;

min-height:190px;

margin-bottom:35px;
">

<div style="
position:relative;

width:calc(50% - 100px);

padding:27px 30px;

box-sizing:border-box;

background:#ffffff;

border-radius:24px;

text-align:center;

box-shadow:0 4px 18px rgba(65,85,73,.035);
">

<div style="
position:absolute;

top:50%;
left:-50px;

width:50px;
height:2px;

background:#cabeae;

transform:translateY(-50%);
"></div>

<div style="
position:absolute;

top:50%;
left:-56px;

width:10px;
height:10px;

background:#415549;

border:4px solid #f5f5f5;

border-radius:50%;

transform:translateY(-50%);
"></div>

<div style="
margin-bottom:12px;

color:#415549;

font-size:10px;
font-weight:bold;

letter-spacing:.5px;

text-transform:uppercase;
">
отставка минчума
</div>

<div style="
color:#30302f;

font-size:10px;
line-height:1.6;
">
Каждое вмешательство порождает новые цепочки,
а решения по Дескриптору все сильнее замыкаются
на одном человеке. Не справившись с системой,
которую сам запустил, Минчум складывает
полномочия.
</div>

<a href="#" style="
display:inline-block;

margin-top:14px;

color:#415549;

font-size:10px;
font-weight:bold;

text-decoration:none;
">
читать эпизод →
</a>

</div>

<div style="
position:absolute;

left:50%;
top:50%;

width:78px;

padding:9px 12px;

box-sizing:border-box;

transform:translate(-50%,-50%);

z-index:5;

background:#cabeae;

color:#415549;

border-radius:25px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;

text-align:center;
">
1980
</div>

</div>

<div style="
position:relative;

display:flex;
justify-content:flex-start;
align-items:center;

min-height:190px;

margin-bottom:10px;
">

<div style="
position:relative;

width:calc(50% - 100px);

padding:27px 30px;

box-sizing:border-box;

background:#ffffff;

border-radius:24px;

text-align:center;

box-shadow:0 4px 18px rgba(65,85,73,.035);
">

<div style="
position:absolute;

top:50%;
right:-50px;

width:50px;
height:2px;

background:#cabeae;

transform:translateY(-50%);
"></div>

<div style="
position:absolute;

top:50%;
right:-56px;

width:10px;
height:10px;

background:#415549;

border:4px solid #f5f5f5;

border-radius:50%;

transform:translateY(-50%);
"></div>

<div style="
margin-bottom:12px;

color:#415549;

font-size:10px;
font-weight:bold;

letter-spacing:.5px;

text-transform:uppercase;
">
план
</div>

<div style="
color:#30302f;

font-size:10px;
line-height:1.6;
">
Министром становится Миллисента Бэгнольд.
Она создает тайный Директорат и превращает
разрозненные вмешательства в План:
Дескриптор считает, комиссия рассматривает
варианты, министр принимает решение,
Министерство исполняет — и будущее
пересчитывается снова.
</div>

<a href="#" style="
display:inline-block;

margin-top:14px;

color:#415549;

font-size:10px;
font-weight:bold;

text-decoration:none;
">
читать эпизод →
</a>

</div>

<div style="
position:absolute;

left:50%;
top:50%;

width:78px;

padding:9px 12px;

box-sizing:border-box;

transform:translate(-50%,-50%);

z-index:5;

background:#415549;

color:#ffffff;

border-radius:25px;

font-size:10px;
font-weight:bold;

letter-spacing:1px;

text-align:center;
">
1980
</div>

</div>

[/html]

0

Поделиться32026-09-30 11:53:13

Автор: necromancer
Администратор
Сообщений: 14
Уважение: +0
Последний визит:
2026-09-30 12:11:21

[hideprofile][html]<div class="pp-randomizer">

<div class="pp-randomizer-title">
<span>✦</span>
<h2>Випадок дня</h2>
<span>✦</span>
</div>

<div class="pp-randomizer-subtitle">
дозволь випадку вирішити
</div>

<div class="pp-random-card">
<div class="pp-random-label">Ситуація</div>
<div class="pp-random-value" id="situation">
—
</div>
</div>

<div class="pp-random-card">
<div class="pp-random-label">Заклинання</div>
<div class="pp-random-value" id="spell">
—
</div>
</div>

<div class="pp-random-card">
<div class="pp-random-label">Колір</div>
<div class="pp-random-value" id="color">
—
</div>
</div>

</div>

<button class="pp-random-button" onclick="ppRandomize()">
випробувати долю
</button>

<div class="pp-random-hint">
три випадкові елементи для твоєї історії
</div>

</div>

<style>

.pp-randomizer {
max-width: 900px;
margin: 60px auto;
padding: 45px 50px;
background: #f4f4f4;
color: #415549;
text-align: center;
font-family: Arial, sans-serif;
box-sizing: border-box;
}

/* TITLE */

.pp-randomizer-title {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}

.pp-randomizer-title h2 {
margin: 0;
font-family: 'nicel', Georgia, serif;
font-size: 30px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}

.pp-randomizer-title span {
color: #cabeae;
font-size: 14px;
}

.pp-randomizer-subtitle {
margin-top: 10px;
margin-bottom: 35px;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: #888;
}

/* RESULTS */

.pp-randomizer-results {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.pp-random-card {
min-height: 150px;
padding: 28px 22px;
background: #fff;
border-radius: 26px;

display: flex;
flex-direction: column;
justify-content: center;

box-sizing: border-box;

transition:
transform .25s ease,
box-shadow .25s ease;
}

.pp-random-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(65,85,73,.08);
}

/* LABEL */

.pp-random-label {
margin-bottom: 18px;

font-size: 10px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;

color: #415549;
}

/* VALUE */

.pp-random-value {
font-family: 'nice', Georgia, serif;

font-size: 22px;
line-height: 1.3;

color: #415549;
}

/* BUTTON */

.pp-random-button {
margin-top: 35px;

padding: 15px 42px;

border: none;
border-radius: 30px;

background: #cabeae;
color: #415549;

font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;

cursor: pointer;

transition:
background .25s ease,
transform .25s ease;
}

.pp-random-button:hover {
background: #bbae9c;
transform: translateY(-2px);
}

.pp-random-button:active {
transform: translateY(0);
}

/* HINT */

.pp-random-hint {
margin-top: 18px;

font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;

color: #aaa;
}

/* MOBILE */

@media (max-width: 700px) {

.pp-randomizer {
padding: 35px 20px;
}

.pp-randomizer-results {
grid-template-columns: 1fr;
}

.pp-random-card {
min-height: 120px;
}

}

</style>

const ppSituations = [
"зустріти привида",
"знайти таємний лист",
"заблукати в коридорах",
"почути дивний шепіт",
"запізнитися на урок",
"випадково відкрити заборонені двері",
"натрапити на чужу паличку",
"побачити те, чого не мало бути",
"отримати загадкове послання",
"опинитися не в тому місці"
];

const ppSpells = [
"Lumos",
"Nox",
"Accio",
"Expelliarmus",
"Protego",
"Alohomora",
"Riddikulus",
"Expecto Patronum",
"Reparo",
"Obliviate"
];

const ppColors = [
"смарагдовий",
"бордовий",
"золотий",
"срібний",
"темно-синій",
"бурштиновий",
"графітовий",
"пильна троянда",
"лісовий зелений",
"темний шоколад"
];

function ppRandomItem(array) {
return array[Math.floor(Math.random() * array.length)];
}

function ppRandomize() {

const situation = document.getElementById("situation");
const spell = document.getElementById("spell");
const color = document.getElementById("color");

situation.style.opacity = 0;
spell.style.opacity = 0;
color.style.opacity = 0;

setTimeout(() => {

situation.textContent = ppRandomItem(ppSituations);
spell.textContent = ppRandomItem(ppSpells);
color.textContent = ppRandomItem(ppColors);

situation.style.opacity = 1;
spell.style.opacity = 1;
color.style.opacity = 1;

}, 250);
}

</script>[/html]

0

Поделиться42026-09-30 11:55:37

Автор: necromancer
Администратор
Сообщений: 14
Уважение: +0
Последний визит:
2026-09-30 12:11:21

[hideprofile][html]<style>
/* =========================================
PRAY & PREY — FORUM BINGO
========================================= */

.pp-bingo {
--bingo-green: #415549;
--bingo-beige: #cabeae;
--bingo-bg: #eeeeee;
--bingo-cell: #f4f4f4;
--bingo-border: rgba(65, 85, 73, .22);

width: 100%;
max-width: 760px;
margin: 25px auto;
padding: 28px;
box-sizing: border-box;

background: var(--bingo-bg);
border: 1px solid var(--bingo-border);
border-radius: 18px;

color: var(--bingo-green);
font-family: "Manrope", sans-serif;
}

/* HEADER */

.pp-bingo-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}

.pp-bingo-title {
margin: 0;

font-family: "TheSilverEditorial", serif;
font-size: 34px;
font-weight: normal;
line-height: .9;
letter-spacing: .03em;
text-transform: uppercase;
}

.pp-bingo-subtitle {
margin-top: 8px;

color: rgba(65, 85, 73, .65);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
}

.pp-bingo-counter {
flex-shrink: 0;

padding: 8px 12px;

background: var(--bingo-beige);
border-radius: 20px;

color: var(--bingo-green);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}

/* BOARD */

.pp-bingo-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}

/* CELLS */

.pp-bingo-cell {
position: relative;

min-height: 115px;
padding: 14px 10px;

display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;

background: var(--bingo-cell);
border: 1px solid var(--bingo-border);
border-radius: 10px;

color: var(--bingo-green);
font-size: 10px;
font-weight: 600;
line-height: 1.45;
text-align: center;

cursor: pointer;

transition:
background .2s ease,
color .2s ease,
transform .2s ease,
border-color .2s ease;
}

.pp-bingo-cell:hover {
border-color: var(--bingo-green);
transform: translateY(-2px);
}

.pp-bingo-cell.checked {
background: var(--bingo-green);
border-color: var(--bingo-green);
color: #f4f4f4;
}

.pp-bingo-cell.checked::after {
content: "✓";

position: absolute;
top: 6px;
right: 8px;

font-size: 13px;
font-weight: 700;
}

/* FREE */

.pp-bingo-cell.free {
background: var(--bingo-beige);
border-color: var(--bingo-beige);

font-family: "TheSilverEditorial", serif;
font-size: 18px;
letter-spacing: .08em;
text-transform: uppercase;
}

.pp-bingo-cell.free::before {
content: "✦";

position: absolute;
top: 7px;
left: 9px;

font-family: sans-serif;
font-size: 9px;
}

/* BINGO LINE */

.pp-bingo-cell.bingo-line {
box-shadow:
inset 0 0 0 2px var(--bingo-beige);
}

/* MESSAGE */

.pp-bingo-message {
min-height: 18px;
margin-top: 15px;

color: var(--bingo-green);

font-family: "TheSilverEditorial", serif;
font-size: 19px;
text-align: center;

opacity: 0;
transition: opacity .25s ease;
}

.pp-bingo-message.visible {
opacity: 1;
}

/* BUTTONS */

.pp-bingo-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 7px;

margin-top: 18px;
}

.pp-bingo-button {
padding: 9px 15px;

background: transparent;
border: 1px solid var(--bingo-border);
border-radius: 20px;

color: var(--bingo-green);

font-family: "Manrope", sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;

cursor: pointer;

transition:
background .2s ease,
color .2s ease,
border-color .2s ease;
}

.pp-bingo-button:hover {
background: var(--bingo-green);
border-color: var(--bingo-green);
color: #fff;
}

.pp-bingo-button.main {
background: var(--bingo-green);
border-color: var(--bingo-green);
color: #fff;
}

.pp-bingo-button.main:hover {
background: #34463b;
}

/* MOBILE */

@media (max-width: 600px) {

.pp-bingo {
padding: 18px;
}

.pp-bingo-header {
display: block;
}

.pp-bingo-counter {
display: inline-block;
margin-top: 15px;
}

.pp-bingo-title {
font-size: 28px;
}

.pp-bingo-cell {
min-height: 90px;
padding: 9px 6px;

font-size: 8px;
}

.pp-bingo-cell.free {
font-size: 14px;
}
}
</style>

<div>
<div class="pp-bingo-title">
THE FORUM BINGO
</div>

<div class="pp-bingo-subtitle">
маленькі гріхи, які ми ніколи не визнаємо
</div>
</div>

</div>

<div class="pp-bingo-message" id="pp-bingo-message">
BINGO ✦
</div>

<button
type="button"
class="pp-bingo-button"
onclick="ppResetBingo()">
скинути
</button>

<button
type="button"
class="pp-bingo-button"
onclick="ppNewBingo()">
нова картка
</button>

<button
type="button"
class="pp-bingo-button main"
onclick="ppInsertBingo()">
вставити в відповідь
</button>

</div>

/* =========================================
ITEMS
========================================= */

const bingoItems = [

"створив персонажа за годину до дедлайну",

"написав «маленький пост» на 10 000 символів",

"закохав персонажа зовсім не в того",

"сказав «я тільки на хвилинку»",

"прочитав усю матчастину о третій ночі",

"придумав персонажу трагічне минуле",

"додав у пост пісню, яка тепер канон",

"відкрив старий пост і захотів переписати його",

"почав нову сюжетну лінію замість завершення старої",

"сказав «це буде простий персонаж»",

"пішов читати чужі анкети замість писати свою",

"створив персонажа під конкретного соігрока",

"випадково придумав нову драму",

"написав пост о 4 ранку",

"сказав «я точно не буду шиперити їх»",

"зайшов на форум просто подивитися",

"знайшов собі нового улюбленого персонажа",

"вклав у персонажа занадто багато себе",

"написав сцену, якої не було в планах",

"перечитав власний пост десять разів",

"змінив концепцію персонажа після першого поста",

"придумав сюжет через одну випадкову фразу",

"відклав відповідь на «завтра»",

"повернувся до персонажа через кілька місяців",

"створив сімейну драму на три покоління",

"зробив персонажа набагато травмованішим, ніж планував",

"знайшов референс і переписав під нього весь образ",

"випадково зробив другорядного персонажа головним",

"написав пост, а потім зрозумів, що це вже зовсім інший сюжет",

"пішов шукати один референс і зник на годину",

"сказав «цей персонаж точно не буде проблемним»",

"зробив плейлист для персонажа раніше, ніж анкету",

"придумав персонажу любовний трикутник",

"прочитав чужий пост і тепер не може перестати думати про нього",

"використав випадковий генератор для імені",

"створив персонажа лише через одну красиву картинку",

"написав пост довший, ніж планував",

"запустив сюжет, який тепер неможливо зупинити",

"сказав «ще один пост і спати»"

];

/* =========================================
STATE
========================================= */

let currentItems = [];
let checked = new Set();

/* =========================================
SHUFFLE
========================================= */

function shuffle(array) {

const result = [...array];

for (let i = result.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[result[i], result[j]] =
[result[j], result[i]];

}

return result;
}

/* =========================================
CREATE CARD
========================================= */

function createBingo() {

currentItems =
shuffle(bingoItems).slice(0, 15);

checked = new Set();

renderBingo();

}

/* =========================================
RENDER
========================================= */

function renderBingo() {

const board =
document.getElementById("pp-bingo-board");

board.innerHTML = "";

/*
* 4 × 4 = 16 клітинок
* FREE знаходиться в центрі
* для 4×4 це позиція 5
*/

let itemIndex = 0;

for (let i = 0; i < 16; i++) {

const cell =
document.createElement("div");

cell.className =
"pp-bingo-cell";

/*
* FREE
*/

if (i === 5) {

cell.classList.add(
"free",
"checked"
);

cell.dataset.index = i;

cell.textContent = "FREE";

checked.add(i);

}

else {

const text =
currentItems[itemIndex];

cell.dataset.index = i;

cell.textContent = text;

itemIndex++;

}

cell.addEventListener(
"click",
function () {

if (cell.classList.contains("free")) {
return;
}

toggleCell(cell);

}
);

board.appendChild(cell);

}

updateCounter();

checkBingo();

}

/* =========================================
TOGGLE
========================================= */

function toggleCell(cell) {

const index =
Number(cell.dataset.index);

if (checked.has(index)) {

checked.delete(index);

cell.classList.remove("checked");

}

else {

checked.add(index);

cell.classList.add("checked");

}

updateCounter();

checkBingo();

}

/* =========================================
COUNTER
========================================= */

function updateCounter() {

const counter =
document.querySelector(
".pp-bingo-counter"
);

const count =
checked.size;

counter.textContent =
count + " / 16";

}

/* =========================================
BINGO CHECK
========================================= */

function checkBingo() {

const cells =
document.querySelectorAll(
".pp-bingo-cell"
);

/*
* Усі можливі лінії
*/

const lines = [

// rows
[0,1,2,3],
[4,5,6,7],
[8,9,10,11],
[12,13,14,15],

// columns
[0,4,8,12],
[1,5,9,13],
[2,6,10,14],
[3,7,11,15],

// diagonals
[0,5,10,15],
[3,6,9,12]

];

/*
* прибираємо старе підсвічування
*/

cells.forEach(function (cell) {

cell.classList.remove(
"bingo-line"
);

});

let bingoFound = false;

/*
* перевіряємо лінії
*/

lines.forEach(function (line) {

const complete =
line.every(function (index) {

return checked.has(index);

});

if (complete) {

bingoFound = true;

line.forEach(function (index) {

cells[index]
.classList
.add("bingo-line");

});

}

});

const message =
document.getElementById(
"pp-bingo-message"
);

if (bingoFound) {

message.classList.add("visible");

message.textContent =
"BINGO ✦ ти офіційно в небезпеці";

}

else {

message.classList.remove(
"visible"
);

}

/* =========================================
RESET
========================================= */

window.ppResetBingo = function () {

checked = new Set();

const cells =
document.querySelectorAll(
".pp-bingo-cell"
);

cells.forEach(function (cell) {

cell.classList.remove(
"checked",
"bingo-line"
);

});

/*
* FREE завжди активний
*/

const free =
document.querySelector(
".pp-bingo-cell.free"
);

if (free) {

free.classList.add(
"checked"
);

checked.add(5);

}

updateCounter();

checkBingo();

};

/* =========================================
NEW CARD
========================================= */

window.ppNewBingo = function () {

createBingo();

};

/* =========================================
INSERT INTO REPLY
========================================= */

window.ppInsertBingo = function () {

const textarea =
document.getElementById(
"main-reply"
);

/*
* Перевіряємо редактор
*/

if (!textarea) {

alert(
"Не знайдено поле відповіді."
);

return;

}

/*
* Знаходимо відмічені клітинки
*/

const cells =
document.querySelectorAll(
".pp-bingo-cell.checked"
);

const selected =
Array.from(cells)
.filter(function (cell) {

return !cell.classList.contains(
"free"
);

})
.map(function (cell) {

return cell.textContent.trim();

});

if (selected.length === 0) {

alert(
"Спочатку відміть хоча б одну клітинку 💚"
);

return;

}

/*
* Формуємо текст
*
* BBCode під PunBB
*/

const bingoText =
"THE FORUM BINGO\n" +
"\n" +
selected
.map(function (item) {

return "☑ " + item;

})
.join("\n") +
"\n\n";

/*
* Беремо позицію курсора
*/

const start =
textarea.selectionStart;

const end =
textarea.selectionEnd;

/*
* Вставляємо Bingo
*/

textarea.value =
textarea.value.substring(
0,
start
) +

bingoText +

textarea.value.substring(
end
);

/*
* Повертаємо курсор
*/

const newPosition =
start + bingoText.length;

textarea.focus();

textarea.selectionStart =
newPosition;

textarea.selectionEnd =
newPosition;

/*
* Повідомляємо форуму,
* що textarea змінилася
*/

textarea.dispatchEvent(
new Event(
"input",
{
bubbles: true
}
)
);

};

/* =========================================
START
========================================= */

createBingo();

})();
</script>[/html]

0

necro test

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

гостьова

Сообщений 1 страница 4 из 4

Поделиться12026-09-30 11:52:35

Поделиться22026-09-30 11:53:00

Поделиться32026-09-30 11:53:13

Поделиться42026-09-30 11:55:37