ɯᴀбᴧон ᴀнᴋᴇᴛы

Поделиться12025-10-20 20:37:31

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

[html]<style>
@font-face {
font-family: 'GothamBookForum';
src: url('https://forumstatic.ru/files/001c/8f/61/52309.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'StaatlichesForum';
src: url('https://forumstatic.ru/files/001c/8f/61/11649.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/16078.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/76301.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/40885.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}

.forum-card-block {
width: 100%;
margin: 0 auto;
}

.forum-card {
position: relative;
width: 100%;
aspect-ratio: 1920 / 1080;
overflow: visible;
margin-bottom: 120px;
}

.forum-card-bg {
position: absolute;
inset: 0;
z-index: 1;
}

.forum-card-bg svg {
width: 100%;
height: 100%;
display: block;
}

.forum-card-content {
position: absolute;
inset: 0;
z-index: 2;
}

.forum-card-title-wrap {
position: absolute;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 1vw;
z-index: 3;
}

.forum-card-title-icon {
width: clamp(118px, 10.8vw, 172px);
height: auto;
display: block;
flex: 0 0 auto;
fill: #f3f3f3;
}

.forum-card-title-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
line-height: 1;
}

.forum-card-title-text {
margin: 0;
color: #f3f3f3;
font-family: 'StaatlichesForum', Arial, sans-serif;
font-size: clamp(69px, 11vw, 170px);
font-weight: 400;
line-height: 0.92;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}

.forum-card-subtitle-text {
margin: 0.1em 0 0 0;
color: #f3f3f3;
font-family: 'StaatlichesForum', Arial, sans-serif;
font-size: clamp(24px, 3.8vw, 58px);
font-weight: 400;
line-height: 0.3;
text-transform: uppercase;
letter-spacing: 3px;
white-space: nowrap;
}

.forum-card-note {
position: absolute;
left: 65.5%;
top: 80%;
right: 1.5%;
min-width: 240px;
color: #3a3a3a;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-weight: 400;
font-size: clamp(13px, 1.35vw, 19px);
line-height: 1.18;
text-align: left;
}

.forum-card-top-pill {
position: absolute;
top: 9%;
left: 33.2%;
transform: none;
width: 53%;
min-width: 290px;
height: 5.4%;
min-height: 26px;
padding: 0 18px;
box-sizing: border-box;
border: 1px solid rgba(243, 243, 243, 0.9);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
color: #f3f3f3;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-weight: 400;
font-size: clamp(8px, 0.42vw, 8px);
line-height: 1.05;
letter-spacing: 0.35px;
text-transform: uppercase;
text-align: center;
opacity: 0.95;
z-index: 4;
}

.forum-card-top-pill:before,
.forum-card-top-pill:after {
content: "";
position: absolute;
top: 50%;
width: 11px;
height: 11px;
transform: translateY(-50%);
border: 1px solid rgba(243, 243, 243, 0.9);
border-radius: 50%;
box-sizing: border-box;
}

.forum-card-top-pill:before {
left: 7px;
}

.forum-card-top-pill:after {
right: 7px;
}

.forum-card-top-pill-inner:before,
.forum-card-top-pill-inner:after {
content: "";
position: absolute;
top: 50%;
width: 5px;
height: 5px;
transform: translateY(-50%);
background: rgba(243, 243, 243, 0.9);
border-radius: 50%;
}

.forum-card-top-pill-inner:before {
left: 10px;
}

.forum-card-top-pill-inner:after {
right: 10px;
}

.forum-card-top-pill-inner {
position: relative;
display: block;
width: 100%;
padding: 0 12px;
box-sizing: border-box;
}

.forum-card-bottom-panel {
position: absolute;
left: 10.2%;
bottom: 12.4%;
width: 45%;
height: 5.8%;
background: rgba(255,255,255,0.11);
box-sizing: border-box;
clip-path: polygon(
0 0,
94% 0,
100% 100%,
6% 100%
);
z-index: 4;
display: flex;
align-items: center;
padding: 0 1vw 0 3vw;
overflow: hidden;
}

.forum-card-bottom-panel:before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 100%),
linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 30%, rgba(255,255,255,0) 100%);
pointer-events: none;
}

.forum-card-bottom-panel:after {
content: "";
position: absolute;
left: 1.2%;
right: 1.2%;
top: 0;
height: 1px;
background: rgba(255,255,255,0.18);
opacity: 0.9;
pointer-events: none;
}

.forum-card-bottom-panel-text {
position: relative;
z-index: 1;
color: #f3f3f3;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: clamp(10px, 2.05vw, 10px);
line-height: 1;
letter-spacing: 5px;
text-transform: uppercase;
white-space: nowrap;
}

.forum-card-bottom-panel-arrow {
position: relative;
z-index: 1;
margin-right: 0.45vw;
color: rgba(243,243,243,0.9);
font-family: 'StaatlichesForum', Arial, sans-serif;
font-size: clamp(12px, 1.45vw, 22px);
line-height: 1;
}
</style>

<div class="forum-card-top-pill">
<span class="forum-card-top-pill-inner">
PROTOCOL VISUAL MONITORING ENCLOSURE V.03 / AUTHORIZATION BUFFER / INTERNAL THREAD / ACTIVE SYSTEM LANE
</span>
</div>

<div class="forum-card-title-group">
<div class="forum-card-title-text">DOSSIER</div>
<div class="forum-card-subtitle-text">IN QUEUE</div>
</div>
</div>

<div class="forum-card-bottom-panel">
<span class="forum-card-bottom-panel-arrow">></span>
<span class="forum-card-bottom-panel-text">ПРОТОКОЛ РЕГИСТРАЦИИ АКТИВИРОВАН</span>
</div>

<div class="forum-card-note">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
</div>
</div>
</div>
</div>[/html]

Пошаговая инструкция (Для тех, кто боится запутаться)

Шаг 1. Регистрируемся
Первое, что нужно сделать — зарегистрироваться на форуме. Но не абы как, а с соблюдением священного правила:

Имя аккаунта должно быть = имя твоего персонажа на английском.

То есть если твоего персонажа зовут, условно, Джейн Смит — Jane Smith. Без цифр, без подчёркиваний. Только имя и фамилия, с большой буквы.

Шаг 2. Заполняем анкету

После регистрации вернись в эту тему и пролистни ниже — выбери нужный тебе шаблон, в зависимости от того, кто твой персонаж. Заполни поля, и данные в реальном времени появляются в красивом шаблоне анкеты. Это не просто скучные строчки, а прямо как настоящая карточка агента. Приятно глазу, правда?
Когда заполнишь всё до конца, внизу будет кнопка «Сгенерировать анкету». Жмёшь на неё — и появляется код. Страшный, длинный, с кучей скобок. Не пугайся! Это просто анкета, упакованная в формат, который понимает форум.

Твоя задача: скопировать этот код целиком (Ctrl+A, Ctrl+C — ты справишься).

Шаг 3. Идём в Приёмку

Теперь нужно создать тему с анкетой в разделе "Приемка". Заходишь и ищешь кнопку «Новая тема». Жмёшь.

Название темы: пишешь имя своего персонажа на английском (точно так же, как в регистрации).
Поле ввода: вставляешь туда скопированный код анкеты (Ctrl+V, магия).
Жмёшь «Отправить».

Готово! Твоя тема появилась в разделе «Приемка». Можно выдохнуть.

Шаг 4. Ждём модератора
Теперь самое сложное (особенно для нетерпеливых) — ждать.

В твою тему скоро придёт модератор. Он прочитает анкету, проверит, всё ли в порядке с точки зрения правил и лора, и вынесет вердикт:
«Принято» — ура, ты в игре! Можешь идти дальше по списку дел (подробнее — в старт-гайде).
Замечания — модератор напишет, что нужно поправить. Ничего страшного, это нормально. Исправляешь (обычно прямо в той же теме, новым сообщением с исправленной анкетой) и ждёшь повторной проверки.
Не пугайся, если попросят что-то дополнить. Модераторы не кусаются... Ну, или почти не кусаются.

А если я всё перепутал?
Ничего страшного. Никто не выгонит тебя с форума с позором. Если ошибёшься в названии темы или забудешь что-то в анкете — модератор подскажет. Можно даже просто написать в Справочное бюро: «Помогите, я запутался!» — и тебе помогут.

Как заполнять анкету? (Проще, чем кажется)

Как заполнять анкету? (Спойлер: проще, чем кажется)

Итак, ты придумал персонажа. У него есть имя, возраст, характер, какая-то история за плечами и, может быть, даже тайная влюбленность в Джедедайю Гора. И тут ты видишь поле «Описание персонажа» — и впадаешь в ступор. А что туда писать? А сколько надо? А вдруг я что-то упущу? А есть шаблон? А если я сделаю не так?

Стоп. Выдыхай.

Основной пункт в анкете, над которым тебе реально придется думать, это пункт описание персонажа.

Это не анкета в классическом понимании со строгими разделами «Биография», «Характер», «Особые приметы» и так далее. У нас нет жёстких требований. Вообще.

Описание персонажа — это просто твой рассказ о том, кого ты принёс в этот мир. Ты можешь писать его как угодно:

Красивым художественным текстом — как страницу из книги.

Списком пунктов — сухо и по делу или с мемами и приколами.
С разбивкой на «Биография» и «Характер» — если любишь структуру.
Хронологией событий — родился, учился, женился, умер (но потом воскрес, потому что это же ролевая).
Потоком сознания — если ты так видишь своего героя.

Нет «правильного» и «неправильного» способа. Есть только твой способ.

А что там вообще должно быть?

Главная задача описания — дать другим игрокам понять, с кем они будут иметь дело. Чтобы, прочитав твою анкету, человек мог сказать: «А, ну этот парень явно не подойдет в напарники моей недотроге» или «О, идеальный бывший для моего персонажа!».

Поэтому хорошо бы, чтобы из описания было понятно:

Кто он вообще такой. Возраст, внешность (хотя бы примерно), род деятельности.
Какой у него характер. Рыцарь или крыса, блэк кэт или голден ретривер, ну, тут вроде просто.
Что у него за плечами. Биография, ключевые события, которые сделали его таким.
Чего он хочет (как вариант). Мотивация, цели, мечты.

Но опять же — никаких жёстких требований. Хочешь — распиши каждый пункт отдельно. Хочешь — смешай всё в один текст. Главное, чтобы после прочтения у человека сложился образ.

Правила есть, и их всего 2:
1. Будь читабельным
Это значит: какую бы форму ты ни выбрал — поэму, роман-эпопею или сухой протокол допроса — текст должен быть понятным, о персонаже, а не на отвлеченную тему. Сюда же: базовая грамотность, без неё тоже мало что понятно!
2. Будь здравомыслящим
Мы тут все, конечно, любим полёт фантазии. Но у мира IRO есть определённые рамки — это всё-таки современный мир, где существует организация, охотящаяся на нечисть, а не вселенная, где можно стать драконом или получить бессмертие, выпив просроченный йогурт. Поэтому, когда придумываешь персонажа, не забывай, например, задаться вопросом, в каком возрасте обычно становятся агентами (спойлер: не в 12, даже если ты гений-самоучка). Гайдик на эту тему есть по ссылке.

Разбор полей анкеты (Что здесь вообще происходит?)

Ты открыл анкету, а там куча непонятных пунктов. Департаменты, ранги, дислокации... Глаза разбегаются, руки трясутся, хочется закрыть вкладку и пойти пить чай. Мы знаем. Знаем.

ДЛЯ АГЕНТОВ

🎯 Деятельность
Пишем просто: Агент
Да, всё настолько просто. Ты не балерина и не повар, ты агент. Этого достаточно.

Выбираем: I, II, III, IV или V
Чем выше цифра — тем круче агент. Если ты новичок, логично брать I или II. Не надо сразу хватать V ранг с мыслью «я самый крутой», если твой персонаж только вчера закончил академию. Гайд по рангам — вот тут (ссылка). Почитай, там не больно.

🟢 Статус агента
Тут всё как в жизни, только интереснее:

Действующий агент — работает, пашет, ловит монстров.
Отстранен от работы — временно не у дел (в отпуске, на больничном, в запое).
Уволен — уже не наш человек.
На пенсии — старенький, но бодрый.
...Умер? или. может, считается мертвым?

Департамент // отдел
Агенты разные нужны, агенты разные важны. Список тут (ссылка). Почитай, приценись, выбери по душе. Можно быть крутым оперативником, а можно сидеть в лаборатории и нюхать реактивы.

📍 Дислокация
Офис, региональное подразделение, особые базы. Список мест тут (ссылка). Выбирай, где хочешь прописаться.

📄 Личное дело
Тот самый раздел, где ты описываешь персонажа, подробно мы разобрали это выше. В свободной форме, главное — чтобы читабельно и с душой.

🖼 Архивное фото
Нет, стой, это не твоё фото! Это картинка с лицом персонажа. Технические требования: картинка должен быть в формате .jpg, .png или .gif, и ссылка на него должна заканчиваться на эти расширения. Если url ссылки не заканчивается на эти басурманские буквы — в анкету не подгрузится. Проверяй!

🎭 Ориентировка (Face Claim)
Сюда пишешь имя фейсклейма — то есть реального человека, которого ты взял на внешность. Актер, актриса, певец, модель, случайный красавчик с пинтереста. Если генерил в нейросети — пиши «генерация нейросети». Зачем это надо? Чтобы мы могли отметить в «Активных досье», что этот фейсклейм занят, и два Джейсона Момоа случайно не встретились в одном баре.

💪 Сила / Интеллект / Психика / Коммуникация
Не пугайся! Это не D&D, и твоя игра от этих цифр зависеть не будет. Никто не будет проверять по свитку, можешь ли ты поднять тяжёлое или убедить собеседника. Это просто для красивой графики в анкете. Поставь примерно так, как чувствуешь персонажа, и живи спокойно.

🖼 Приложения #1, #2, #3
Снова ссылки на картинки. Просто красивые картинки, которые будут отображаться в анкете. Можешь вставить арты по настроению, фотки, атмосферные пейзажи — что хочешь. Это чисто декоративная функция, так что не парься, бери что нравится.

💬 Заметка
Сюда можно вставить красивую цитату, смешную фразу, строчку из песни или что-то, что передаёт вайб персонажа. Она отобразится в анкете под именем.
Важно: смотри, чтобы была не слишком длинная, а то некрасиво вылезет из макета. Краткость — сестра таланта и вёрстки.

👤 Персональная справка
А вот тут можешь немного рассказать о себе как об игроке. Ровно настолько, насколько тебе комфортно.
Реальное имя указывать не нужно (никто не требует паспорт).
Ник в других соцсетях — тоже по желанию.
Если не хочешь ничего о себе рассказывать — оставь пустым, напиши цитату, строчку из песни, анекдот или вообще «люблю пельмени». Никто не осудит.
Мы за анонимность и комфорт!

📞 Связи
То же самое, что и выше. Можешь оставить ссылки на свои соцсети, если хочешь общаться вне форума. Можешь не оставлять ничего. Полная свобода.

ДЛЯ ТЕХ, КТО ИГРАЕТ НЕ ЗА АГЕНТОВ
Не хочешь быть частью системы? Устал от бюрократии и хочешь кусать агентов по ночам? А может, ты просто случайный прохожий, которого втянули в эту историю? Добро пожаловать!

🧬 Вид
Тут всё просто: если ты человек — пиши «Человек». Если ты нечисть — пиши, кто именно. В общем, укажи свою биологическую (или не очень) принадлежность.

💼 Деятельность
Ну, кем-то же персонаж работает? А если иждивенец, то так и признавайся, не стесняйся.

4 страшных пункта (Угроза / Уровень контакта с IRO / Паранормальные способности / Известность)
Видишь эти шкалы от 0 до 100? Глаза боятся, а руки делают. На самом деле всё просто:

🔪 Угроза
Если ты человек — ставь 0 или около того (ну, если ты не какой-нибудь маньяк с топором).
Если ты нечисть — оцени, насколько ты опасен для окружающих. Любишь кусать прохожих? Ставь повыше. Сидишь в подвале и боишься света? Поставь пониже.

🏢 Уровень контакта с IRO
0 — понятия не имею, что это за буквы.
30 — слышал краем уха, видел странных людей в чёрном.
60 — уже пару раз сталкивался, а лучше бы не.
90 — меня допрашивали, я в разработке.
100 — я у них фрилансер/они меня ищут по всей стране.

✨ Паранормальные способности
Если ты человек — тут всё понятно (ставь 0, если только ты не экстрасенс-самоучка). Если нечисть — оцени масштаб бедствия. Умеешь только светиться в темноте? Ставь 20. Разрушаешь города взглядом? Ну, 100, но давай без фанатизма, мы тут город бережём.

📰 Известность
Насколько высока вероятность, что другие персонажи о тебе слышали?
0 — серый кардинал, никто не знает.
50 — местная знаменитость в узких кругах.
100 — про тебя слагают легенды (или посты в ориентировках).

Важное примечание: никто не будет высчитывать эти проценты с калькулятором. Это чисто для атмосферы, чтобы дать общее представление.

📄 Описание дела
Тот самый раздел, где ты описываешь персонажа, подробно мы разобрали это выше. В свободной форме, главное — чтобы читабельно и с душой.

🔗 Связь с паранормальным миром
Этот пункт — ключевой для не-агентов. Он объясняет, почему твой персонаж вообще оказался в этой истории.

Если ты человек:
Как ты соприкоснулся с миром нечисти и IRO?
Ты случайная жертва, которую спасли агенты, и теперь ты часть расследования?
Ты контрабандист артефактов, который таскает проклятые безделушки через границу?
Ты родственник агента, который в курсе дел, но сам не при делах?
Ты очевидец, который видел то, что не должен был, и теперь за тобой охотятся?
Ты сталкер, который сам лезет в паранормальное ради адреналина?
Ты журналист, расследующий тёмные делишки?

Пиши так, чтобы другим игрокам было понятно, как с тобой можно пересечься. Если ты просто «человек с улицы», который случайно здесь — это тоже ок, но подумай, почему агенты или нечисть могут обратить на тебя внимание.

Если ты нечисть:
Тут вроде и так понятно — ты часть этого мира. Но всё равно уточни:
Ты живёшь уединённо и редко выходишь в свет?
Ты активно тусуешься с другими монстрами?
Ты охотишься на людей (или на агентов)?
Ты нейтрален, просто хочешь, чтобы тебя не трогали?

Это поможет другим игрокам понять, как к тебе подступиться.

Что дальше?

Заполнил анкету, отправил её и тебя приняли? Почитай, что дальше можно делать со своей темой анкеты тут.

Главное: не бойся ошибиться. Если что-то непонятно — спрашивай в Справочном бюро. Если что-то заполнил не так — админы подскажут. А если совсем лень читать инструкцию — просто делай по аналогии с уже принятыми анкетами. Спорим, у тебя получится?

0

Поделиться22026-03-12 14:04:56

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

Шаблон для агента IRO

[html]<style>
@font-face {
font-family: 'GothamBookForum';
src: url('https://forumstatic.ru/files/001c/8f/61/70627.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'StaatlichesForum';
src: url('https://forumstatic.ru/files/001c/8f/61/11649.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/16078.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/76301.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/40885.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}

/* =========================================================
ОБЩАЯ ОБОЛОЧКА
========================================================= */

.generator-shell {
width: min(100%, 1180px);
margin: 20px auto;
padding: 0 14px;
box-sizing: border-box;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

/* =========================================================
ФОРМА ВВОДА
========================================================= */

.generator-form {
width: 100%;
max-width: 920px;
margin: 0 auto 30px auto;
display: block;
}

.form-main {
width: 100%;
min-width: 0;
padding-top: 0;
}

.form-section {
margin-bottom: 34px;
}

.form-section-title {
margin-bottom: 10px;
color: #2f2f2f;
font-size: 13px;
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
margin-bottom: 14px;
}

.form-row.three {
grid-template-columns: 1fr 1fr 1fr;
}

.form-row.four {
grid-template-columns: repeat(4, 1fr);
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

.form-field {
width: 100%;
min-width: 0;
}

.form-field.full {
grid-column: 1 / -1;
}

.form-field label {
display: block;
margin-bottom: 8px;
color: #2f2f2f;
font-size: 13px;
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

.form-main input,
.form-main textarea {
width: 100%;
background: #fcfcfc;
border: 2px solid #cfcfcf;
box-sizing: border-box;
color: #000000;
font-size: 12px;
font-family: 'GothamBookForum', Arial, sans-serif;
}

.form-main input {
height: 34px;
padding: 0 14px;
border-radius: 999px;
}

.form-main textarea {
min-height: 240px;
padding: 18px;
border-radius: 28px;
resize: vertical;
}

.form-main input::placeholder,
.form-main textarea::placeholder {
color: #7f7f7f;
}

.secret-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}

.secret-header .form-section-title {
margin-bottom: 0;
}

.editor-toolbar {
display: flex;
gap: 4px;
flex-wrap: wrap;
justify-content: flex-end;
}

.editor-toolbar button {
min-width: 22px;
height: 22px;
padding: 0 8px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: #e7e7e7;
color: #666;
font-size: 11px;
cursor: pointer;
font-family: 'GothamNarrowForum', Arial, sans-serif;
white-space: nowrap;
}

.editor-toolbar .br-btn {
min-width: 84px;
padding: 0 6px;
}

.editor-toolbar button:hover {
background: #dddddd;
}

.stats-clean input {
text-align: center;
}

#skills {
text-align: left;
padding-left: 14px;
}

.generator-btn,
.copy-btn-wrap {
text-align: center;
margin-top: 12px;
}

.generator-btn button,
.copy-btn-wrap button {
padding: 9px 24px;
border: none;
border-radius: 20px;
background: #444;
color: white;
cursor: pointer;
font-size: 13px;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

.generator-btn button:hover,
.copy-btn-wrap button:hover {
background: #666;
}

.age-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px 28px;
margin-bottom: 14px;
align-items: start;
}

.age-field {
width: 100%;
max-width: 360px;
justify-self: end;
}

.form-field-empty {
visibility: hidden;
pointer-events: none;
}

.job-meta-row {
grid-template-columns: 2fr 1fr 1fr;
}

.contact-row {
grid-template-columns: 2fr 1fr;
}

.contact-row-three {
grid-template-columns: 2.2fr 0.8fr 0.8fr;
}

/* =========================================================
ПРЕВЬЮ И КОД
========================================================= */

.preview-title,
.code-title {
margin-top: 18px;
margin-bottom: 8px;
font-size: 13px;
color: #555;
text-align: center;
}

.preview-area {
width: 100%;
margin-top: 10px;
}

.preview-box {
width: 100%;
box-sizing: border-box;
overflow: hidden;
min-height: 0;
}

.preview-inner {
width: 100%;
margin: 0 auto;
position: relative;
height: 0;
overflow: hidden;
}

.preview-scale {
width: 1190px;
transform-origin: top left;
display: block;
}

.code-area {
width: min(100%, 760px);
margin: 0 auto;
}

#result {
width: 100%;
min-height: 280px;
display: block;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 8px;
resize: vertical;
font-size: 13px;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

/* =========================================================
СКРОЛЛ-БАР В СЕРОМ БЛОКЕ
========================================================= */

.dossier-desc-scroll {
scrollbar-width: thin;
scrollbar-color: #9f9f9f #d6d6d6;
}

.dossier-desc-scroll::-webkit-scrollbar {
width: 8px;
}

.dossier-desc-scroll::-webkit-scrollbar-track {
background: #d6d6d6;
border-radius: 999px;
margin: 12px 0;
}

.dossier-desc-scroll::-webkit-scrollbar-thumb {
background: #9f9f9f;
border-radius: 999px;
border: 2px solid #d6d6d6;
}

.dossier-desc-scroll::-webkit-scrollbar-thumb:hover {
background: #8c8c8c;
}

/* =========================================================
АДАПТИВ
========================================================= */

@media (max-width: 980px) {
.form-main {
padding-top: 0;
}

.form-row.three {
grid-template-columns: 1fr 1fr;
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
}

@media (max-width: 640px) {
.generator-shell {
padding: 0 10px;
}

.form-row,
.form-row.three {
grid-template-columns: 1fr;
gap: 12px;
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}

.form-section.stats-clean .form-field label {
font-size: 10px;
}

.form-section.stats-clean input {
height: 32px;
padding: 0 6px;
font-size: 10px;
}

.secret-header {
align-items: flex-start;
flex-direction: column;
}

.form-main input,
.form-main textarea {
font-size: 16px;
}

.generator-btn button,
.copy-btn-wrap button {
width: 100%;
max-width: 320px;
}
}

/* =========================================================
ЗАГОЛОВКИ-СЕКЦИИ
========================================================= */

.section-banner::before {
content: "";
width: 13px;
height: 13px;
margin-right: 8px;
display: inline-block;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23cfcfcf' d='M14.5 14h-13C.673 14 0 13.327 0 12.5v-9C0 2.673.673 2 1.5 2h3.586c.4 0 .777.156 1.061.439l1.414 1.414c.094.095.22.147.354.147h6.585C15.327 4 16 4.673 16 5.5v7c0 .827-.673 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section-banner {
width: 100%;
height: 42px;
margin: 0 0 18px 0;
padding: 0 22px;
box-sizing: border-box;
display: flex;
align-items: center;
background: #5a5a5a;
border-radius: 26px 26px 0 0;
color: #f1f1f1;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
}

.section-banner span {
color: #cfcfcf;
margin-left: 6px;
}

.form-section.decorated {
margin-bottom: 34px;
}

.form-section.decorated .section-banner + .form-row,
.form-section.decorated .section-banner + .age-row,
.form-section.decorated .section-banner + .secret-header {
margin-top: 0;
}

.attachments-row {
grid-template-columns: 1fr 1fr;
margin-bottom: 8px;
}

/* =========================================================
ИКОНКИ
========================================================= */

.form-field label.link-label {
display: inline-flex;
align-items: center;
}

.form-field label.link-label::before {
content: "";
width: 11px;
height: 11px;
display: inline-block;
flex-shrink: 0;
margin-right: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666666' d='M8.11 12.389c.195.195.195.512 0 .707l-2.172 2.171c-.473.473-1.101.733-1.768.733-.668 0-1.296-.26-1.768-.732l-1.672-1.671c-.975-.975-.975-2.561 0-3.536l4.672-4.671c.942-.943 2.59-.945 3.535 0l1.672 1.671c.195.195.195.512 0 .707s-.512.195-.707 0l-1.671-1.672c-.567-.567-1.556-.565-2.121 0l-4.672 4.671c-.585.585-.585 1.537 0 2.122l1.672 1.671c.565.567 1.554.567 2.121 0l2.172-2.171c.195-.195.512-.195.707 0zm7.159-10.01-1.672-1.671c-.942-.943-2.589-.945-3.535 0l-2.172 2.171c-.195.195-.195.512 0 .707s.512.195.707 0l2.172-2.171c.566-.567 1.555-.567 2.121 0l1.672 1.671c.585.585.585 1.537 0 2.122l-4.672 4.671c-.565.566-1.554.568-2.121 0l-1.672-1.671c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l1.672 1.671c.473.472 1.101.732 1.768.732.668 0 1.296-.26 1.768-.732l4.672-4.671c.974-.975.974-2.561-.001-3.536z'/%3E%3C/svg%3E") center / contain no-repeat;
}

</style>

<div class="generator-shell">

<div class="generator-form">

<div class="form-main">

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ОБЩИЕ СВЕДЕНИЯ</span></div>

<div class="form-row">
<div class="form-field">
<label for="char_name">Имя на английском</label>
<input id="char_name" placeholder="Gemma Rogen">
</div>

<div class="form-field">
<label for="char_name_ru">Имя на русском</label>
<input id="char_name_ru" placeholder="Джемма Роген">
</div>
</div>

<div class="form-row age-row">
<div class="form-field form-field-empty" aria-hidden="true"></div>

<div class="form-field age-field">
<label for="age">Возраст</label>
<input id="age" placeholder="29 лет">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ВНУТРЕННЯЯ ИНФОРМАЦИЯ</span></div>

<div class="form-row job-meta-row">
<div class="form-field">
<label for="job">Деятельность</label>
<input id="job" placeholder="Агент">
</div>

<div class="form-field">
<label for="rank">Ранг</label>
<input id="rank" placeholder="V ранг">
</div>

<div class="form-field">
<label for="iro_experience">Стаж в IRO</label>
<input id="iro_experience" placeholder="9 лет">
</div>
</div>

<div class="form-row">
<div class="form-field">
<label for="status">Статус</label>
<input id="status" placeholder="Действующий агент">
</div>
</div>

<div class="form-row">
<div class="form-field full">
<label for="department">Департамент // Отдел</label>
<input id="department" placeholder="DOI, отдел ликвидации">
</div>
</div>

<div class="form-row">
<div class="form-field">
<label for="location">Дислокация</label>
<input id="location" placeholder="Западный Офис">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ЛИЧНОЕ ДЕЛО</span></div>

<div class="secret-header">
<div class="form-section-title">Временно рассекречено:</div>

<div class="editor-toolbar">
<button type="button" onclick="wrapHTML('b')"><b>B</b></button>
<button type="button" onclick="wrapHTML('i')"><i>I</i></button>
<button type="button" onclick="wrapHTML('u')"><u>U</u></button>
<button type="button" onclick="insertH1()">H1</button>
<button type="button" class="br-btn" onclick="insertBR()">Перенос строки</button>
</div>
</div>

<div class="form-row">
<div class="form-field full">
<textarea id="desc" placeholder="Знаешь ли ты, как меня называли в Чикаго?"></textarea>
</div>
</div>

<div class="form-row">
<div class="form-field">
<label for="img">Архивное фото</label>
<input id="img" placeholder="http://...">
</div>

<div class="form-field">
<label for="face">Ориентировка</label>
<input id="face" placeholder="Например: Тимоти Шаламе">
</div>
</div>

<div class="form-section stats-clean decorated">
<div class="section-banner">IRO DOSSIER //<span> ХАРАКТЕРИСТИКИ АГЕНТА</span></div>

<div class="form-row four">
<div class="form-field">
<label for="stat_strength">Сила</label>
<input id="stat_strength" placeholder="0-100">
</div>

<div class="form-field">
<label for="stat_intellect">Интеллект</label>
<input id="stat_intellect" placeholder="0-100">
</div>

<div class="form-field">
<label for="stat_psyche">Психика</label>
<input id="stat_psyche" placeholder="0-100">
</div>

<div class="form-field">
<label for="stat_social">Коммуникация</label>
<input id="stat_social" placeholder="0-100">
</div>
</div>

<div class="form-row">
<div class="form-field full">
<label for="skills">Экспертные навыки</label>
<input id="skills" placeholder="Тактическая стрельба, ближний бой, доводить окружающих до ручки">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> МАТЕРИАЛЫ ДЕЛА</span></div>

<div class="form-row attachments-row">
<div class="form-field">
<label for="top_img" class="link-label">Приложение #1</label>
<input id="top_img" placeholder="http://...">
</div>

<div class="form-field">
<label for="bottom_img" class="link-label">Приложение #2</label>
<input id="bottom_img" placeholder="http://...">
</div>
</div>

<div class="form-row attachments-row second-attachments-row">
<div class="form-field">
<label for="summary">Заметка</label>
<input id="summary" placeholder="Everybody's dancin' and their dancin' for me">
</div>

<div class="form-field">
<label for="contact_img" class="link-label">Приложение #3</label>
<input id="contact_img" placeholder="http://...">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> КОНТАКТНЫЕ ДАННЫЕ</span></div>

<div class="form-row contact-row-three">
<div class="form-field">
<label for="contact_note">Персональная справка</label>
<input id="contact_note" placeholder="Меня зовут Ариночка Цимеринг и я придумала Джемму Роген, чтобы Сайлас Доу страдал">
</div>

<div class="form-field">
<label for="contact_link">Канал связи</label>
<input id="contact_link" placeholder="t.me/zimering">
</div>

<div class="form-field">
<label for="contact_link_text">Название ссылки</label>
<input id="contact_link_text" placeholder="И она написала вот что">
</div>
</div>
</div>

</div>
</div>


<div class="preview-title">Т В О Е Д О С Ь Е</div>
<div class="preview-area">
<div class="preview-box">
<div class="preview-inner">
<div id="preview" class="preview-scale"></div>
</div>
</div>
</div>

<div class="generator-btn">
<button type="button" onclick="exportFormCode()">Сгенерировать анкету</button>
</div>


<div id="code-output" style="display:none;">
<div class="code-title">HTML-код анкеты</div>
<div class="code-area">
<textarea id="result" class="result-box" placeholder="Здесь появится готовый HTML-код анкеты"></textarea>

<div class="copy-btn-wrap">
<button type="button" onclick="copyFormCode()">Копировать код</button>
</div>
</div>
</div>

<script>
/* =========================================================
ОБОРАЧИВАНИЕ ВЫДЕЛЕННОГО ТЕКСТА В HTML-ТЕГ
Например: <b>...</b>, <i>...</i>, <u>...</u>
========================================================= */
function wrapHTML(tag) {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selected = textarea.value.substring(start, end);
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

textarea.value = before + "<" + tag + ">" + selected + "</" + tag + ">" + after;
textarea.focus();
generateForm();
}

/* =========================================================
ВСТАВКА <br> (и заголовка) В ОПИСАНИЕ
========================================================= */
function insertBR() {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

textarea.value = before + "<br>" + after;
textarea.focus();
generateForm();
}

function insertH1() {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selected = textarea.value.substring(start, end) || "Заголовок";
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

var h1Tag = '<h1 style="margin:0 0 14px 0;font-family:\'GothamBookForum\', Arial, sans-serif;font-size:28px;line-height:1.05;font-weight:500;color:#3a3a3a;text-transform:uppercase;">' + selected + '</h1>';

textarea.value = before + h1Tag + after;
textarea.focus();
generateForm();
}

/* =========================================================
АВТОПОДГОНКА ВЫСОТЫ ПРЕВЬЮ
После масштабирования карточки
========================================================= */

function fitScaledLayout(boxEl, innerEl, contentEl, baseWidth, extraSpace) {
if (!boxEl || !innerEl || !contentEl) return;

var availableWidth = boxEl.clientWidth || baseWidth;
var scale = Math.min(1, availableWidth / baseWidth);

contentEl.style.width = baseWidth + "px";
contentEl.style.transform = "scale(" + scale + ")";
contentEl.style.transformOrigin = "top left";

innerEl.style.width = Math.ceil(baseWidth * scale) + "px";
innerEl.style.height = Math.ceil(contentEl.scrollHeight * scale + (extraSpace || 0)) + "px";
}

function updatePreviewScale() {
var previewBox = document.querySelector(".preview-box");
var previewInner = document.querySelector(".preview-inner");
var previewEl = document.getElementById("preview");

fitScaledLayout(previewBox, previewInner, previewEl, 1190, 24);
}

/* =========================================================
ГЛАВНАЯ ФУНКЦИЯ ГЕНЕРАЦИИ
Читает поля, строит карточку, обновляет превью и код
========================================================= */
function generateForm() {

if (!window.dossierNumber) {
window.dossierNumber = Math.floor(10000 + Math.random() * 90000);
}

/* -------------------------------------------------------
ЧТЕНИЕ ТЕКСТОВЫХ ПОЛЕЙ ФОРМЫ
------------------------------------------------------- */
var charName = document.getElementById("char_name").value.trim() || "Gemma Rogen";
var charNameRu = document.getElementById("char_name_ru").value.trim() || "ДЖЕММА РОГЕН";
var age = document.getElementById("age").value.trim() || "29 лет";
var status = document.getElementById("status").value.trim() || "Действующий агент";
var job = document.getElementById("job").value.trim() || "Агент";
var rank = document.getElementById("rank").value.trim() || "IV ранг";
var department = document.getElementById("department").value.trim() || "DOI, отдел ликвидации";
var face = document.getElementById("face").value.trim() || "Steffy Argelich";
var img = document.getElementById("img").value.trim();
var summary = document.getElementById("summary").value.trim() || "Everybody's dancin' and their dancin' for me";
var desc = document.getElementById("desc").value.trim() || "Знаешь ли ты, как меня называли в Чикаго?";
var location = document.getElementById("location").value.trim() || "Восточный Офис";
var iroExperience = document.getElementById("iro_experience").value.trim() || "9 лет";
var skills = document.getElementById("skills").value.trim() || "Тактическая стрельба, ближний бой, умение доводить окружающих до ручки";
var contactNote = document.getElementById("contact_note").value.trim() || "Меня зовут Ариночка Цимеринг и я придумала Джемму Роген, чтобы Сайлас Доу страдал";
var contactLink = document.getElementById("contact_link").value.trim() || "t.me/zimering";
var contactLinkText = document.getElementById("contact_link_text").value.trim() || "И она написала вот что";

var contactHref = contactLink;
if (contactHref && !/^https?:\/\//i.test(contactHref)) {
contactHref = "https://" + contactHref;
}

var telegramIcon =
'<span style="display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0;">' +
'<svg viewBox="0 0 512 512" width="15" height="15" xmlns="http://www.w3.org/2000/svg" style="display:block;fill:#f1f1f1;">' +
'<path d="M512 50.49 431.02 458.77s-11.32 28.31-42.47 14.72L200.84 329.82c25.23-22.68 220.96-198.65 229.52-206.63 13.23-12.35 5.02-19.7-10.36-10.36L130.89 296.43 19.35 258.88S1.79 252.65.1 239.06c-1.7-13.59 19.82-20.95 19.82-20.95L474.63 39.73s37.37-16.42 37.37 10.76z"/>' +
'</svg>' +
'</span>';

var topImg = document.getElementById("top_img").value.trim();
var bottomImg = document.getElementById("bottom_img").value.trim();
var contactImg = document.getElementById("contact_img").value.trim();

/* -------------------------------------------------------
ЧТЕНИЕ ПОКАЗАТЕЛЕЙ АГЕНТА (0–100)
Сразу ограничиваются диапазоном от 0 до 100
------------------------------------------------------- */
var statStrength = Math.max(0, Math.min(100, parseInt(document.getElementById("stat_strength").value, 10) || 0));
var statIntellect = Math.max(0, Math.min(100, parseInt(document.getElementById("stat_intellect").value, 10) || 0));
var statPsyche = Math.max(0, Math.min(100, parseInt(document.getElementById("stat_psyche").value, 10) || 0));
var statSocial = Math.max(0, Math.min(100, parseInt(document.getElementById("stat_social").value, 10) || 0));

/* -------------------------------------------------------
СОХРАНЯЕМ ПЕРЕНОСЫ СТРОК В ТЕКСТЕ
------------------------------------------------------- */
summary = summary.replace(/\n/g, "<br>");
desc = desc.replace(/\n/g, "<br>");

/* -------------------------------------------------------
БЛОК ИЗОБРАЖЕНИЯ
------------------------------------------------------- */

var portraitPlaceholder =
'<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/15204.png" style="width:100%;height:100%;object-fit:cover;display:block;">' +
'</div>';

var widePlaceholder =
'<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/87409.png" style="width:100%;height:100%;object-fit:cover;display:block;">' +
'</div>';

var imageBlock = img
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + img + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: portraitPlaceholder;

var topImageBlock = topImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + topImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: widePlaceholder;

var bottomImageBlock = bottomImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + bottomImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: widePlaceholder;

var contactImageBlock = contactImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + contactImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/15204.png?v=1" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>';

/* -------------------------------------------------------
ШАБЛОН ГОТОВОЙ АНКЕТЫ
Здесь собирается весь итоговый HTML карточек
------------------------------------------------------- */
var result = `
<div style="width:1190px;margin:20px auto;font-family:'GothamNarrowForum', Arial, sans-serif;box-sizing:border-box;color:#f3f3f3;">
<div style="font-size:0;">


<div style="width:430px;display:inline-block;vertical-align:top;margin-right:44px;">


<div style="width:430px;height:860px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin-bottom:28px;overflow:hidden;">


<div style="width:100%;height:44px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);display:flex;align-items:center;justify-content:center;color:#7a7a7a;font-size:17px;font-weight:400;letter-spacing:0.6px;text-transform:uppercase;">
DOSSIER #${window.dossierNumber}
</div>


<div style="padding:28px 0 0 0;box-sizing:border-box;position:relative;z-index:2;">


<div style="width:338px;height:365px;margin:0 auto 26px auto;border-radius:54px;overflow:hidden;">
${imageBlock}
</div>


<div style="width:338px;margin:0 auto 18px auto;font-size:0;">
<div style="display:inline-block;vertical-align:top;width:240px;text-align:left;">
<div style="color:#f3f3f3;font-size:30px;line-height:1.2;font-weight:400;font-family:'StaatlichesForum', sans-serif;letter-spacing:0.5px;text-align:left;">
${charName}
</div>

<div style="margin-top:4px;color:#d8d8d8;font-size:12px;line-height:1.15;font-weight:400;font-family:'GothamNarrowForum', Arial, sans-serif;letter-spacing:0.8px;text-transform:uppercase;text-align:left;">
${charNameRu}
</div>
</div>

<div style="display:inline-block;vertical-align:top;width:98px;text-align:right;color:#f3f3f3;font-size:20px;line-height:1.2;">
${age}
</div>
</div>


<div style="width:338px;margin:0 auto 25px auto;color:#dddddd;font-size:23px;line-height:1.3;text-align:left;font-weight:400;font-style:italic;">
${summary}
</div>


<div style="width:338px;margin:0 auto 18px auto;font-size:0;">
<div style="display:inline-block;vertical-align:top;width:159px;height:36px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:center;margin-right:20px;box-sizing:border-box;">
${job}
</div>

<div style="display:inline-block;vertical-align:top;width:159px;height:36px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:center;box-sizing:border-box;">
${rank}
</div>
</div>


<div style="width:338px;height:36px;margin:0 auto 14px auto;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:left;padding-left:16px;box-sizing:border-box;">
${department}
</div>

<div style="width:338px;height:36px;margin:0 auto 34px auto;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:left;padding-left:16px;box-sizing:border-box;">
${location}
</div>


<div style="width:338px;margin:0 auto;font-size:0;">
<div style="display:inline-block;vertical-align:top;width:169px;color:#e2e2e2;font-size:12px;line-height:1.2;text-transform:uppercase;text-align:left;">
ИНДЕКСАЦИЯ: #DOSSIER
</div>

<div style="display:inline-block;vertical-align:top;width:169px;text-align:right;color:#e2e2e2;font-size:12px;line-height:1.2;text-transform:uppercase;">
ДИРЕКТОРИЯ: АРХИВ
</div>
</div>
</div>


<div style="position:absolute;top:44px;left:0;width:100%;height:calc(100% - 44px);pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.55;border-radius:0 0 28px 28px;"></div>
</div>


<div style="width:430px;height:315px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;padding:24px 30px 34px 30px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;">

<div style="font-size:28px;line-height:1.1;color:#ececec;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:16px;text-align:left;">
ПОКАЗАТЕЛИ АГЕНТА
</div>

<div style="display:flex;flex-direction:column;justify-content:space-between;flex:1;">

<div>
<div style="font-size:16px;line-height:1.1;color:#f0f0f0;text-transform:uppercase;font-weight:400;margin-bottom:6px;text-align:left;">Физическая сила</div>
<div style="width:100%;height:14px;background:#e8e8e8;border-radius:999px;overflow:hidden;">
<div style="width:${statStrength}%;height:100%;background:#8c8c8c;border-radius:999px;"></div>
</div>
</div>

<div>
<div style="font-size:16px;line-height:1.1;color:#f0f0f0;text-transform:uppercase;font-weight:400;margin-bottom:6px;text-align:left;">Интеллект</div>
<div style="width:100%;height:14px;background:#e8e8e8;border-radius:999px;overflow:hidden;">
<div style="width:${statIntellect}%;height:100%;background:#8c8c8c;border-radius:999px;"></div>
</div>
</div>

<div>
<div style="font-size:16px;line-height:1.1;color:#f0f0f0;text-transform:uppercase;font-weight:400;margin-bottom:6px;text-align:left;">Психологическая устойчивость</div>
<div style="width:100%;height:14px;background:#e8e8e8;border-radius:999px;overflow:hidden;">
<div style="width:${statPsyche}%;height:100%;background:#8c8c8c;border-radius:999px;"></div>
</div>
</div>

<div>
<div style="font-size:16px;line-height:1.1;color:#f0f0f0;text-transform:uppercase;font-weight:400;margin-bottom:6px;text-align:left;">Социальные навыки</div>
<div style="width:100%;height:14px;background:#e8e8e8;border-radius:999px;overflow:hidden;">
<div style="width:${statSocial}%;height:100%;background:#8c8c8c;border-radius:999px;"></div>
</div>
</div>

</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>


<div style="width:430px;height:315px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin-top:28px;overflow:hidden;">

<div style="width:100%;height:100%;position:relative;z-index:2;padding:30px 34px 30px 34px;box-sizing:border-box;">

<div style="width:100%;height:84px;margin:0 0 26px 0;border-radius:26px;overflow:hidden;">
${bottomImageBlock}
</div>

<div style="color:#f0f0f0;font-size:21px;line-height:1.1;font-weight:500;text-transform:uppercase;margin-bottom:5px;text-align:left;">
ЭКСПЕРТНЫЕ НАВЫКИ
</div>

<div style="color:#e6e6e6;font-size:18px;line-height:1.3;margin-bottom:22px;text-align:left;">
${skills}
</div>

<div style="color:#f0f0f0;font-size:21px;line-height:1.1;font-weight:500;text-transform:uppercase;margin-bottom:5px;text-align:left;">
СТАЖ В IRO
</div>

<div style="color:#e6e6e6;font-size:18px;line-height:1.3;text-align:left;">
${iroExperience}
</div>

</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>
</div>


<div style="width:700px;height:1550px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;display:inline-block;vertical-align:top;position:relative;overflow:hidden;">


<div style="width:100%;height:44px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);position:relative;">

<div style="position:absolute;top:50%;right:22px;transform:translateY(-50%);font-size:0;white-space:nowrap;">
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
</div>

</div>

<div style="padding:36px 0 0 0;box-sizing:border-box;position:relative;z-index:2;">


<div style="width:628px;height:110px;margin:0 auto 0 auto;border-radius:42px 42px 0 0;overflow:hidden;">
${topImageBlock}
</div>


<div style="width:628px;height:1240px;margin:0 auto 0 auto;background:linear-gradient(180deg, #dddddd 0%, #d6d6d6 100%);border-radius:0 0 42px 42px;padding:40px 28px 40px 46px;box-sizing:border-box;">
<div class="dossier-desc-scroll" style="width:100%;height:100%;overflow-y:auto;color:#555555;font-size:19px;line-height:1.25;text-align:left;font-family:'GothamBookForum', Arial, sans-serif;font-weight:400;padding-right:12px;box-sizing:border-box;">
${desc}
</div>
</div>

</div>


<div style="width:600px;position:absolute;left:50px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-start;z-index:3;">
<div style="width:260px;color:#b9b9b9;font-size:18px;line-height:1.2;text-align:left;">
<div style="font-weight:700;color:#d9d9d9;margin-bottom:4px;">Текущий статус агента:</div>
<div>${status}</div>
</div>

<div style="width:260px;color:#b9b9b9;font-size:18px;line-height:1.2;text-align:right;">
<div style="font-weight:700;color:#d9d9d9;margin-bottom:4px;">Идентификация:</div>
<div>${face}</div>
</div>
</div>


<div style="position:absolute;top:44px;left:0;width:100%;height:calc(100% - 44px);pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.55;border-radius:0 0 28px 28px;"></div>
</div>


<div style="width:1174px;height:130px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin:28px 0 0 0;overflow:hidden;">

<div style="width:100%;height:100%;position:relative;z-index:2;font-size:0;">

<div style="display:inline-block;vertical-align:top;width:964px;height:100%;padding:14px 18px 14px 22px;box-sizing:border-box;">
<div style="color:#d7d7d7;font-size:16px;line-height:1.28;font-weight:400;font-family:'GothamBookForum', Arial, sans-serif;text-align:left;">
${contactNote}
</div>
</div>

<div style="display:inline-block;vertical-align:top;width:210px;height:100%;position:relative;border-radius:0 28px 28px 0;overflow:hidden;">
${contactImageBlock}

<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:176px;height:34px;background:rgba(67,67,67,0.96);border-radius:999px;box-sizing:border-box;overflow:hidden;">
<div style="width:100%;height:100%;position:relative;z-index:2;padding:0 14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;">
${telegramIcon}
<a href="${contactHref}" target="_blank" style="color:#f1f1f1;font-size:12px;line-height:1;font-weight:400;font-family:'GothamNarrowForum', Arial, sans-serif;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:130px;">
${contactLinkText}
</a>
</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.18;border-radius:999px;"></div>
</div>
</div>

</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>

</div>
</div>
`;

/* -------------------------------------------------------
ВСТАВКА ПРЕВЬЮ В БЛОК
------------------------------------------------------- */
document.getElementById("preview").innerHTML = result;

/* -------------------------------------------------------
ПЕРЕСЧЕТ ВЫСОТЫ ПРЕВЬЮ
------------------------------------------------------- */
updatePreviewScale();

setTimeout(updatePreviewScale, 50);
setTimeout(updatePreviewScale, 150);
setTimeout(updatePreviewScale, 300);

var previewImages = document.querySelectorAll("#preview img");
for (var i = 0; i < previewImages.length; i++) {
previewImages[i].onload = updatePreviewScale;
previewImages[i].onerror = updatePreviewScale;
}

}

/* =========================================================
чето связанное с переносом анкеты в итоговое поле ввода
========================================================= */

function exportFormCode() {
generateForm();

var previewHtml = document.getElementById("preview").innerHTML;
var exportId = "forum-dossier-" + window.dossierNumber;

var fontFaces =
'<style>' +
'@font-face {' +
'font-family: "GothamBookForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/52309.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "StaatlichesForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/11649.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/16078.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/76301.woff2") format("woff2");' +
'font-weight: 500;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/40885.woff2") format("woff2");' +
'font-weight: 700;' +
'font-style: normal;' +
'}' +

'.forum-dossier-viewport{width:100%;max-width:100%;overflow:hidden;margin:20px auto 0 auto;}' +
'.forum-dossier-stage{position:relative;width:100%;height:0;}' +
'.forum-dossier-inner{width:1190px;transform-origin:top left;}' +
'</style>';

var responsiveWrapped =
'<div id="' + exportId + '" class="forum-dossier-viewport">' +
'<div class="forum-dossier-stage">' +
'<div class="forum-dossier-inner">' +
previewHtml +
'</div>' +
'</div>' +
'</div>' +
'<script>' +
'(function(){' +
'function fitForumDossier(){' +
'var root=document.getElementById("' + exportId + '");' +
'if(!root)return;' +
'var stage=root.getElementsByClassName("forum-dossier-stage")[0];' +
'var inner=root.getElementsByClassName("forum-dossier-inner")[0];' +
'if(!stage||!inner)return;' +
'var base=1190;' +
'var available=root.clientWidth||base;' +
'var scale=Math.min(1, available/base);' +
'inner.style.transform="scale("+scale+")";' +
'stage.style.height=Math.ceil(inner.scrollHeight*scale)+"px";' +
'}' +
'if(window.addEventListener){window.addEventListener("resize", fitForumDossier);}' +
'setTimeout(fitForumDossier,0);' +
'setTimeout(fitForumDossier,100);' +
'setTimeout(fitForumDossier,300);' +
'})();' +
'<\/script>';

var openTag = "[" + "html" + "]";
var closeTag = "[/" + "html" + "]";
var wrappedResult = openTag + "\n" + fontFaces + responsiveWrapped + "\n" + closeTag;

document.getElementById("result").value = wrappedResult;
document.getElementById("code-output").style.display = "block";
}

function copyFormCode() {
var resultField = document.getElementById("result");
if (!resultField || !resultField.value) return;

resultField.select();
resultField.setSelectionRange(0, 999999);

var success = false;

try {
success = document.execCommand("copy");
} catch (e) {
success = false;
}

var btn = document.querySelector(".copy-btn-wrap button");
if (btn && success) {
var oldText = btn.textContent;
btn.textContent = "Скопировано";
setTimeout(function() {
btn.textContent = oldText;
}, 1200);
}
}

/* =========================================================
СПИСОК ПОЛЕЙ, КОТОРЫЕ АВТООБНОВЛЯЮТ ПРЕВЬЮ
========================================================= */
var liveFields = [
"char_name",
"char_name_ru",
"age",
"status",
"job",
"rank",
"department",
"face",
"img",
"summary",
"desc",
"stat_strength",
"stat_intellect",
"stat_psyche",
"stat_social",
"location",
"iro_experience",
"skills",
"contact_note",
"contact_link",
"contact_link_text",
"top_img",
"bottom_img",
"contact_img"
];

/* =========================================================
ПОДКЛЮЧАЕМ АВТООБНОВЛЕНИЕ КАЖДОГО ПОЛЯ
========================================================= */
for (var i = 0; i < liveFields.length; i++) {
document.getElementById(liveFields[i]).addEventListener("input", generateForm);
}

window.addEventListener("resize", function() {
updatePreviewScale();
});

/* =========================================================
ПЕРВЫЙ ЗАПУСК ГЕНЕРАЦИИ ПРИ ЗАГРУЗКЕ
========================================================= */
generateForm();
</script>[/html]

0

Поделиться32026-03-12 21:10:44

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

Шаблон анкеты для всех рядом с IRO гуляющих

[html]<style>
@font-face {
font-family: 'GothamBookForum';
src: url('https://forumstatic.ru/files/001c/8f/61/52309.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'StaatlichesForum';
src: url('https://forumstatic.ru/files/001c/8f/61/11649.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/16078.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/76301.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/40885.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}

/* =========================================================
ОБЩАЯ ОБОЛОЧКА
========================================================= */

.generator-shell {
width: min(100%, 1180px);
margin: 20px auto;
padding: 0 14px;
box-sizing: border-box;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

/* =========================================================
ФОРМА ВВОДА
========================================================= */

.generator-form {
width: 100%;
max-width: 920px;
margin: 0 auto 30px auto;
display: block;
}

.form-main {
width: 100%;
min-width: 0;
padding-top: 0;
}

.form-section {
margin-bottom: 34px;
}

.form-section-title {
margin-bottom: 10px;
color: #2f2f2f;
font-size: 13px;
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 28px;
margin-bottom: 14px;
}

.form-row.three {
grid-template-columns: 1fr 1fr 1fr;
}

.form-row.four {
grid-template-columns: repeat(4, 1fr);
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

.form-field {
width: 100%;
min-width: 0;
}

.form-field.full {
grid-column: 1 / -1;
}

.form-field label {
display: block;
margin-bottom: 8px;
color: #2f2f2f;
font-size: 13px;
line-height: 1.1;
font-weight: 500;
text-transform: uppercase;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

.form-main input,
.form-main textarea {
width: 100%;
background: #fcfcfc;
border: 2px solid #cfcfcf;
box-sizing: border-box;
color: #000000;
font-size: 12px;
font-family: 'GothamBookForum', Arial, sans-serif;
}

.form-main input {
height: 34px;
padding: 0 14px;
border-radius: 999px;
}

.form-main textarea {
min-height: 240px;
padding: 18px;
border-radius: 28px;
resize: vertical;
}

.form-main input::placeholder,
.form-main textarea::placeholder {
color: #7f7f7f;
}

.secret-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}

.secret-header .form-section-title {
margin-bottom: 0;
}

.editor-toolbar {
display: flex;
gap: 4px;
flex-wrap: wrap;
justify-content: flex-end;
}

.editor-toolbar button {
min-width: 22px;
height: 22px;
padding: 0 8px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: #e7e7e7;
color: #666;
font-size: 11px;
cursor: pointer;
font-family: 'GothamNarrowForum', Arial, sans-serif;
white-space: nowrap;
}

.editor-toolbar .br-btn {
min-width: 84px;
padding: 0 6px;
}

.editor-toolbar button:hover {
background: #dddddd;
}

.stats-clean input {
text-align: center;
}

.generator-btn,
.copy-btn-wrap {
text-align: center;
margin-top: 12px;
}

.generator-btn button,
.copy-btn-wrap button {
padding: 9px 24px;
border: none;
border-radius: 20px;
background: #444;
color: white;
cursor: pointer;
font-size: 13px;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

.generator-btn button:hover,
.copy-btn-wrap button:hover {
background: #666;
}

.age-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px 28px;
margin-bottom: 14px;
align-items: start;
}

.age-field {
width: 100%;
max-width: 360px;
justify-self: end;
}

.form-field-empty {
visibility: hidden;
pointer-events: none;
}

.job-meta-row {
grid-template-columns: 2fr 1fr 1fr;
}

.contact-row {
grid-template-columns: 2fr 1fr;
}

.contact-row-three {
grid-template-columns: 2.2fr 0.8fr 0.8fr;
}

.double-row-field {
min-height: 78px !important;
height: 78px;
resize: vertical;
}

.threat-row {
grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
ПРЕВЬЮ И КОД
========================================================= */

.preview-title,
.code-title {
margin-top: 18px;
margin-bottom: 8px;
font-size: 13px;
color: #555;
text-align: center;
}

.preview-area {
width: 100%;
margin-top: 10px;
}

.preview-box {
width: 100%;
box-sizing: border-box;
overflow: hidden;
min-height: 0;
}

.preview-inner {
width: 100%;
margin: 0 auto;
position: relative;
height: 0;
overflow: hidden;
}

.preview-scale {
width: 1190px;
transform-origin: top left;
display: block;
}

.code-area {
width: min(100%, 760px);
margin: 0 auto;
}

#result {
width: 100%;
min-height: 280px;
display: block;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 8px;
resize: vertical;
font-size: 13px;
font-family: 'GothamNarrowForum', Arial, sans-serif;
}

/* =========================================================
СКРОЛЛ-БАР В СЕРОМ БЛОКЕ
========================================================= */

.dossier-desc-scroll {
scrollbar-width: thin;
scrollbar-color: #9f9f9f #d6d6d6;
}

.dossier-desc-scroll::-webkit-scrollbar {
width: 8px;
}

.dossier-desc-scroll::-webkit-scrollbar-track {
background: #d6d6d6;
border-radius: 999px;
margin: 12px 0;
}

.dossier-desc-scroll::-webkit-scrollbar-thumb {
background: #9f9f9f;
border-radius: 999px;
border: 2px solid #d6d6d6;
}

.dossier-desc-scroll::-webkit-scrollbar-thumb:hover {
background: #8c8c8c;
}

/* =========================================================
АДАПТИВ
========================================================= */

@media (max-width: 980px) {
.form-main {
padding-top: 0;
}

.form-row.three {
grid-template-columns: 1fr 1fr;
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
}

@media (max-width: 640px) {
.generator-shell {
padding: 0 10px;
}

.form-row,
.form-row.three {
grid-template-columns: 1fr;
gap: 12px;
}

.form-section.stats-clean .form-row.four {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}

.form-section.stats-clean .form-field label {
font-size: 10px;
}

.form-section.stats-clean input {
height: 32px;
padding: 0 6px;
font-size: 10px;
}

.secret-header {
align-items: flex-start;
flex-direction: column;
}

.form-main input,
.form-main textarea {
font-size: 16px;
}

.generator-btn button,
.copy-btn-wrap button {
width: 100%;
max-width: 320px;
}
}

/* =========================================================
ЗАГОЛОВКИ-СЕКЦИИ
========================================================= */

.section-banner::before {
content: "";
width: 13px;
height: 13px;
margin-right: 8px;
display: inline-block;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23cfcfcf' d='M14.5 14h-13C.673 14 0 13.327 0 12.5v-9C0 2.673.673 2 1.5 2h3.586c.4 0 .777.156 1.061.439l1.414 1.414c.094.095.22.147.354.147h6.585C15.327 4 16 4.673 16 5.5v7c0 .827-.673 1.5-1.5 1.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.section-banner {
width: 100%;
height: 42px;
margin: 0 0 18px 0;
padding: 0 22px;
box-sizing: border-box;
display: flex;
align-items: center;
background: #5a5a5a;
border-radius: 26px 26px 0 0;
color: #f1f1f1;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 12px;
line-height: 1;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
}

.section-banner span {
color: #cfcfcf;
margin-left: 6px;
}

.form-section.decorated {
margin-bottom: 34px;
}

.form-section.decorated .section-banner + .form-row,
.form-section.decorated .section-banner + .age-row,
.form-section.decorated .section-banner + .secret-header {
margin-top: 0;
}

.attachments-row {
grid-template-columns: 1fr 1fr;
margin-bottom: 8px;
}

/* =========================================================
ИКОНКИ
========================================================= */

.form-field label.link-label {
display: inline-flex;
align-items: center;
}

.form-field label.link-label::before {
content: "";
width: 11px;
height: 11px;
display: inline-block;
flex-shrink: 0;
margin-right: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666666' d='M8.11 12.389c.195.195.195.512 0 .707l-2.172 2.171c-.473.473-1.101.733-1.768.733-.668 0-1.296-.26-1.768-.732l-1.672-1.671c-.975-.975-.975-2.561 0-3.536l4.672-4.671c.942-.943 2.59-.945 3.535 0l1.672 1.671c.195.195.195.512 0 .707s-.512.195-.707 0l-1.671-1.672c-.567-.567-1.556-.565-2.121 0l-4.672 4.671c-.585.585-.585 1.537 0 2.122l1.672 1.671c.565.567 1.554.567 2.121 0l2.172-2.171c.195-.195.512-.195.707 0zm7.159-10.01-1.672-1.671c-.942-.943-2.589-.945-3.535 0l-2.172 2.171c-.195.195-.195.512 0 .707s.512.195.707 0l2.172-2.171c.566-.567 1.555-.567 2.121 0l1.672 1.671c.585.585.585 1.537 0 2.122l-4.672 4.671c-.565.566-1.554.568-2.121 0l-1.672-1.671c-.195-.195-.512-.195-.707 0s-.195.512 0 .707l1.672 1.671c.473.472 1.101.732 1.768.732.668 0 1.296-.26 1.768-.732l4.672-4.671c.974-.975.974-2.561-.001-3.536z'/%3E%3C/svg%3E") center / contain no-repeat;
}

</style>

<div class="generator-shell">

<div class="generator-form">

<div class="form-main">

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ОБЩИЕ СВЕДЕНИЯ О СУБЪЕКТЕ</span></div>

<div class="form-row">
<div class="form-field">
<label for="char_name">Имя на английском</label>
<input id="char_name" placeholder="Fiame the Magician">
</div>

<div class="form-field">
<label for="char_name_ru">Имя на русском</label>
<input id="char_name_ru" placeholder="Кудесник Фиаме">
</div>
</div>

<div class="form-row age-row">
<div class="form-field form-field-empty" aria-hidden="true"></div>

<div class="form-field age-field">
<label for="age">Возраст</label>
<input id="age" placeholder="secret">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ИЗВЕСТНАЯ ИНФОРМАЦИЯ О СУБЪЕКТЕ</span></div>

<div class="form-row">
<div class="form-field">
<label for="job">Деятельность</label>
<input id="job" placeholder="Хозяин магазина причуд">
</div>

<div class="form-field">
<label for="location">Место проживания</label>
<input id="location" placeholder="Сан-Франциско, Калифорния">
</div>
</div>

<div class="form-row threat-row">
<div class="form-field">
<label for="threat_level">Уровень угрозы</label>
<input id="threat_level" placeholder="0-100">
</div>

<div class="form-field">
<label for="iro_contact_level">Уровень контакта с IRO</label>
<input id="iro_contact_level" placeholder="0-100">
</div>

<div class="form-field">
<label for="paranormal_ability_level">Паранормальные способности</label>
<input id="paranormal_ability_level" placeholder="0-100">
</div>

<div class="form-field">
<label for="fame_level">Известность субъекта</label>
<input id="fame_level" placeholder="0-100">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ДЕЛО СУБЪЕКТА</span></div>

<div class="secret-header">
<div class="form-section-title">Описание дела:</div>

<div class="editor-toolbar">
<button type="button" onclick="wrapHTML('b')"><b>B</b></button>
<button type="button" onclick="wrapHTML('i')"><i>I</i></button>
<button type="button" onclick="wrapHTML('u')"><u>U</u></button>
<button type="button" onclick="insertH1()">H1</button>
<button type="button" class="br-btn" onclick="insertBR()">Перенос строки</button>
</div>
</div>

<div class="form-row">
<div class="form-field full">
<textarea id="desc" placeholder="Узкой улочки нить приведёт на базар, где шафран, кардамон и тмин... Ты смотри, не зевай, смело цену сбивай, будь то шёлк или же сатин!"></textarea>
</div>
</div>

<div class="form-row">
<div class="form-field">
<label for="img">Архивное фото</label>
<input id="img" placeholder="http://...">
</div>

<div class="form-field">
<label for="face">Ориентировка</label>
<input id="face" placeholder="Например: Тимоти Шаламе">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> ПОПАДАНИЕ В СИСТЕМУ</span></div>

<div class="form-row">
<div class="form-field full">
<label for="paranormal_connection">Связь с паранормальным миром</label>
<textarea id="paranormal_connection" class="double-row-field" placeholder="Тут была бы небольшая история о том, как Фиаме попал на сверхъестественную сторону жизни и открыл свой паранормальный бизнес, но это секретик хе хе"></textarea>
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> МАТЕРИАЛЫ ДЕЛА</span></div>

<div class="form-row attachments-row">
<div class="form-field">
<label for="top_img" class="link-label">Приложение #1</label>
<input id="top_img" placeholder="http://...">
</div>

<div class="form-field">
<label for="bottom_img" class="link-label">Приложение #2</label>
<input id="bottom_img" placeholder="http://...">
</div>
</div>

<div class="form-row attachments-row second-attachments-row">
<div class="form-field">
<label for="summary">Заметка</label>
<input id="summary" placeholder="Не развеять мираж — всё, что нажил, отдашь">
</div>

<div class="form-field">
<label for="contact_img" class="link-label">Приложение #3</label>
<input id="contact_img" placeholder="http://...">
</div>
</div>
</div>

<div class="form-section decorated">
<div class="section-banner">IRO DOSSIER //<span> КОНТАКТНЫЕ ДАННЫЕ</span></div>

<div class="form-row contact-row-three">
<div class="form-field">
<label for="contact_note">Персональная справка</label>
<input id="contact_note" placeholder="Меня зовут Ариночка Цимеринг и я придумала Кудесника Фиаме, потому что Кудесник Фиаме оч секси">
</div>

<div class="form-field">
<label for="contact_link">Канал связи</label>
<input id="contact_link" placeholder="t.me/zimering">
</div>

<div class="form-field">
<label for="contact_link_text">Название ссылки</label>
<input id="contact_link_text" placeholder="И она написала вот что">
</div>
</div>
</div>

</div>
</div>


<div class="preview-title">Т В О Е Д О С Ь Е</div>
<div class="preview-area">
<div class="preview-box">
<div class="preview-inner">
<div id="preview" class="preview-scale"></div>
</div>
</div>
</div>

<div class="generator-btn">
<button type="button" onclick="exportFormCode()">Сгенерировать анкету</button>
</div>


<div id="code-output" style="display:none;">
<div class="code-title">HTML-код анкеты</div>
<div class="code-area">
<textarea id="result" class="result-box" placeholder="Здесь появится готовый HTML-код анкеты"></textarea>

<div class="copy-btn-wrap">
<button type="button" onclick="copyFormCode()">Копировать код</button>
</div>
</div>
</div>
</div>

<script>
/* =========================================================
ОБОРАЧИВАНИЕ ВЫДЕЛЕННОГО ТЕКСТА В HTML-ТЕГ
Например: <b>...</b>, <i>...</i>, <u>...</u>
========================================================= */
function wrapHTML(tag) {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selected = textarea.value.substring(start, end);
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

textarea.value = before + "<" + tag + ">" + selected + "</" + tag + ">" + after;
textarea.focus();
generateForm();
}

/* =========================================================
ВСТАВКА <br> (и заголовка) В ОПИСАНИЕ
========================================================= */
function insertBR() {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

textarea.value = before + "<br>" + after;
textarea.focus();
generateForm();
}

function insertH1() {
var textarea = document.getElementById("desc");
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var selected = textarea.value.substring(start, end) || "Заголовок";
var before = textarea.value.substring(0, start);
var after = textarea.value.substring(end);

var h1Tag = '<h1 style="margin:0 0 14px 0;font-family:\'GothamBookForum\', Arial, sans-serif;font-size:28px;line-height:1.05;font-weight:500;color:#3a3a3a;text-transform:uppercase;">' + selected + '</h1>';

textarea.value = before + h1Tag + after;
textarea.focus();
generateForm();
}

/* =========================================================
АВТОПОДГОНКА ВЫСОТЫ ПРЕВЬЮ
После масштабирования карточки
========================================================= */

function fitScaledLayout(boxEl, innerEl, contentEl, baseWidth, extraSpace) {
if (!boxEl || !innerEl || !contentEl) return;

var availableWidth = boxEl.clientWidth || baseWidth;
var scale = Math.min(1, availableWidth / baseWidth);

contentEl.style.width = baseWidth + "px";
contentEl.style.transform = "scale(" + scale + ")";
contentEl.style.transformOrigin = "top left";

innerEl.style.width = Math.ceil(baseWidth * scale) + "px";
innerEl.style.height = Math.ceil(contentEl.scrollHeight * scale + (extraSpace || 0)) + "px";
}

function updatePreviewScale() {
var previewBox = document.querySelector(".preview-box");
var previewInner = document.querySelector(".preview-inner");
var previewEl = document.getElementById("preview");

fitScaledLayout(previewBox, previewInner, previewEl, 1190, 24);
}

/* =========================================================
ГЛАВНАЯ ФУНКЦИЯ ГЕНЕРАЦИИ
Читает поля, строит карточку, обновляет превью и код
========================================================= */
function generateForm() {

if (!window.dossierNumber) {
window.dossierNumber = Math.floor(10000 + Math.random() * 90000);
}

/* -------------------------------------------------------
ЧТЕНИЕ ТЕКСТОВЫХ ПОЛЕЙ ФОРМЫ
------------------------------------------------------- */
var charName = document.getElementById("char_name").value.trim() || "Fiame the Magician";
var charNameRu = document.getElementById("char_name_ru").value.trim() || "Кудесник Фиаме";
var age = document.getElementById("age").value.trim() || "secret";
var job = document.getElementById("job").value.trim() || "Хозяин магазина причуд";
var location = document.getElementById("location").value.trim() || "Сан-Франциско, Калифорния";
var face = document.getElementById("face").value.trim() || "different arabic faceclaims";
var img = document.getElementById("img").value.trim();
var summary = document.getElementById("summary").value.trim() || "Не развеять мираж — всё, что нажил, отдашь";
var desc = document.getElementById("desc").value.trim() || "Узкой улочки нить приведёт на базар, где шафран, кардамон и тмин... Ты смотри, не зевай, смело цену сбивай, будь то шёлк или же сатин!";
var paranormalConnection = document.getElementById("paranormal_connection").value.trim() || "Тут была бы небольшая история о том, как Фиаме попал на сверхъестественную сторону жизни и открыл свой паранормальный бизнес, но это секретик хе хе";

var threatLevel = Math.max(0, Math.min(100, parseInt(document.getElementById("threat_level").value, 10) || 0));
var iroContactLevel = Math.max(0, Math.min(100, parseInt(document.getElementById("iro_contact_level").value, 10) || 0));
var paranormalAbilityLevel = Math.max(0, Math.min(100, parseInt(document.getElementById("paranormal_ability_level").value, 10) || 0));
var fameLevel = Math.max(0, Math.min(100, parseInt(document.getElementById("fame_level").value, 10) || 0));

/* временные заглушки, чтобы старый рендер не падал */
var status = "Хозяин магазина причуд";
var rank = "Неизвестно";
var department = "Не классифицировано";

var contactNote = document.getElementById("contact_note").value.trim() || "Меня зовут Ариночка Цимеринг и я придумала Кудесника Фиаме, потому что Кудесник Фиаме оч секси";
var contactLink = document.getElementById("contact_link").value.trim() || "t.me/zimering";
var contactLinkText = document.getElementById("contact_link_text").value.trim() || "И она написала вот что";

var contactHref = contactLink;
if (contactHref && !/^https?:\/\//i.test(contactHref)) {
contactHref = "https://" + contactHref;
}

var telegramIcon =
'<span style="display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0;">' +
'<svg viewBox="0 0 512 512" width="15" height="15" xmlns="http://www.w3.org/2000/svg" style="display:block;fill:#f1f1f1;">' +
'<path d="M512 50.49 431.02 458.77s-11.32 28.31-42.47 14.72L200.84 329.82c25.23-22.68 220.96-198.65 229.52-206.63 13.23-12.35 5.02-19.7-10.36-10.36L130.89 296.43 19.35 258.88S1.79 252.65.1 239.06c-1.7-13.59 19.82-20.95 19.82-20.95L474.63 39.73s37.37-16.42 37.37 10.76z"/>' +
'</svg>' +
'</span>';

var topImg = document.getElementById("top_img").value.trim();
var bottomImg = document.getElementById("bottom_img").value.trim();
var contactImg = document.getElementById("contact_img").value.trim();

var statStrength = 0;
var statIntellect = 0;
var statPsyche = 0;
var statSocial = 0;

/* -------------------------------------------------------
СОХРАНЯЕМ ПЕРЕНОСЫ СТРОК В ТЕКСТЕ
------------------------------------------------------- */
summary = summary.replace(/\n/g, "<br>");
desc = desc.replace(/\n/g, "<br>");

/* -------------------------------------------------------
БЛОК ИЗОБРАЖЕНИЯ
------------------------------------------------------- */

var portraitPlaceholder =
'<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/15204.png" style="width:100%;height:100%;object-fit:cover;display:block;">' +
'</div>';

var widePlaceholder =
'<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/87409.png" style="width:100%;height:100%;object-fit:cover;display:block;">' +
'</div>';

var imageBlock = img
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + img + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: portraitPlaceholder;

var topImageBlock = topImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + topImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: widePlaceholder;

var bottomImageBlock = bottomImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + bottomImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: widePlaceholder;

var contactImageBlock = contactImg
? '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="' + contactImg + '" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>'
: '<div style="width:100%;height:100%;position:relative;overflow:hidden;">' +
'<img src="https://forumstatic.ru/files/001c/8f/61/15204.png?v=1" style="width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(115%) brightness(85%);">' +
'<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/83 … 13a.md.png);opacity:0.33;"></div>' +
'</div>';

/* -------------------------------------------------------
ШАБЛОН ГОТОВОЙ АНКЕТЫ
Здесь собирается весь итоговый HTML карточек
------------------------------------------------------- */
var result = `
<div style="width:1190px;margin:20px auto;font-family:'GothamNarrowForum', Arial, sans-serif;box-sizing:border-box;color:#f3f3f3;">
<div style="font-size:0;">


<div style="width:700px;height:1550px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;display:inline-block;vertical-align:top;position:relative;overflow:hidden;margin-right:44px;">


<div style="width:100%;height:44px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);position:relative;">

<div style="position:absolute;top:50%;left:22px;transform:translateY(-50%);font-size:0;white-space:nowrap;">
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
<div style="width:13px;height:13px;background:#555555;border-radius:4px;display:inline-block;margin-left:7px;"></div>
</div>

</div>

<div style="padding:36px 0 0 0;box-sizing:border-box;position:relative;z-index:2;">


<div style="width:628px;height:110px;margin:0 auto 0 auto;border-radius:42px 42px 0 0;overflow:hidden;">
${topImageBlock}
</div>


<div style="width:628px;height:1240px;margin:0 auto 0 auto;background:linear-gradient(180deg, #dddddd 0%, #d6d6d6 100%);border-radius:0 0 42px 42px;padding:40px 28px 40px 46px;box-sizing:border-box;">
<div class="dossier-desc-scroll" style="width:100%;height:100%;overflow-y:auto;color:#555555;font-size:19px;line-height:1.25;text-align:left;font-family:'GothamBookForum', Arial, sans-serif;font-weight:400;padding-right:12px;box-sizing:border-box;">
${desc}
</div>
</div>

</div>


<div style="width:600px;position:absolute;left:50px;bottom:28px;z-index:3;">
<div style="width:260px;margin-left:auto;color:#b9b9b9;font-size:18px;line-height:1.2;text-align:right;">
<div style="font-weight:700;color:#d9d9d9;margin-bottom:4px;">Идентификация:</div>
<div>${face}</div>
</div>
</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.55;border-radius:28px;"></div>
</div>


<div style="width:430px;display:inline-block;vertical-align:top;">


<div style="width:430px;height:860px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin-bottom:28px;overflow:hidden;">


<div style="width:100%;height:44px;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);display:flex;align-items:center;justify-content:center;color:#7a7a7a;font-size:17px;font-weight:400;letter-spacing:0.6px;text-transform:uppercase;">
DOSSIER #${window.dossierNumber}
</div>


<div style="padding:28px 0 0 0;box-sizing:border-box;position:relative;z-index:2;">


<div style="width:338px;height:365px;margin:0 auto 26px auto;border-radius:54px;overflow:hidden;">
${imageBlock}
</div>


<div style="width:338px;margin:0 auto 18px auto;font-size:0;">
<div style="display:inline-block;vertical-align:top;width:240px;text-align:left;">
<div style="color:#f3f3f3;font-size:30px;line-height:1.2;font-weight:400;font-family:'StaatlichesForum', sans-serif;letter-spacing:0.5px;text-align:left;">
${charName}
</div>

<div style="margin-top:4px;color:#d8d8d8;font-size:12px;line-height:1.15;font-weight:400;font-family:'GothamNarrowForum', Arial, sans-serif;letter-spacing:0.8px;text-transform:uppercase;text-align:left;">
${charNameRu}
</div>
</div>

<div style="display:inline-block;vertical-align:top;width:98px;text-align:right;color:#f3f3f3;font-size:20px;line-height:1.2;">
${age}
</div>
</div>


<div style="width:338px;margin:0 auto 25px auto;color:#dddddd;font-size:23px;line-height:1.3;text-align:left;font-weight:400;font-style:italic;">
${summary}
</div>


<div style="width:338px;height:36px;margin:0 auto 14px auto;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:left;padding-left:16px;box-sizing:border-box;">
${job}
</div>


<div style="width:338px;height:36px;margin:0 auto 34px auto;background:linear-gradient(90deg, #dbdbdb 0%, #cfcfcf 50%, #c3c3c3 100%);border-radius:20px;color:#494949;font-size:16px;font-weight:500;line-height:36px;text-align:left;padding-left:16px;box-sizing:border-box;">
${location}
</div>


<div style="width:338px;margin:0 auto;font-size:0;">
<div style="display:inline-block;vertical-align:top;width:169px;color:#e2e2e2;font-size:12px;line-height:1.2;text-transform:uppercase;text-align:left;">
ИНДЕКСАЦИЯ: #DOSSIER
</div>

<div style="display:inline-block;vertical-align:top;width:169px;text-align:right;color:#e2e2e2;font-size:12px;line-height:1.2;text-transform:uppercase;">
ДИРЕКТОРИЯ: АРХИВ
</div>
</div>
</div>


<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>


<div style="width:430px;height:315px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;padding:24px 30px 30px 30px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;">

<div style="position:relative;z-index:2;display:flex;flex-direction:column;height:100%;">
<div style="font-size:28px;line-height:1.1;color:#ececec;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:14px;text-align:left;">
СВЯЗЬ С ПАРАНОРМАЛЬНЫМ
</div>

<div style="color:#e6e6e6;font-size:18px;line-height:1.35;text-align:left;margin-bottom:18px;">
${paranormalConnection}
</div>

<div style="margin-top:auto;width:100%;height:84px;border-radius:26px;overflow:hidden;">
${bottomImageBlock}
</div>
</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>

<div style="width:430px;height:315px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin-top:28px;overflow:hidden;">

<div style="width:100%;height:100%;position:relative;z-index:2;padding:22px 22px 22px 22px;box-sizing:border-box;display:flex;flex-direction:column;">

<div style="color:#ececec;font-size:26px;line-height:1.05;text-transform:uppercase;letter-spacing:0.5px;text-align:left;margin-bottom:10px;">
ДАННЫЕ СУБЪЕКТА
</div>

<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex:1;padding-top:2px;">

<div style="width:calc((100% - 36px) / 4);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;">
<div style="width:100%;height:190px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;">
<div style="width:100%;max-width:56px;height:100%;border-radius:20px;background:rgba(255,255,255,0.10);display:flex;align-items:flex-end;overflow:hidden;">
<div style="width:100%;height:${threatLevel}%;min-height:${threatLevel > 0 ? '10px' : '0'};position:relative;overflow:hidden;background:linear-gradient(180deg,#efefef 0%,#d8d8d8 46%,#bfbfbf 100%);border-radius:20px;">
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);background-size:220px auto;opacity:0.38;mix-blend-mode:multiply;"></div>
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(0,0,0,0.08) 100%);"></div>
</div>
</div>
</div>
<div style="color:#f0f0f0;font-size:13px;line-height:1.05;text-transform:uppercase;text-align:center;margin-bottom:5px;">
УГРОЗА
</div>
<div style="color:#d0d0d0;font-size:20px;line-height:1;text-align:center;">
${threatLevel}
</div>
</div>

<div style="width:calc((100% - 36px) / 4);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;">
<div style="width:100%;height:190px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;">
<div style="width:100%;max-width:56px;height:100%;border-radius:20px;background:rgba(255,255,255,0.10);display:flex;align-items:flex-end;overflow:hidden;">
<div style="width:100%;height:${iroContactLevel}%;min-height:${iroContactLevel > 0 ? '10px' : '0'};position:relative;overflow:hidden;background:linear-gradient(180deg,#efefef 0%,#d8d8d8 46%,#bfbfbf 100%);border-radius:20px;">
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);background-size:220px auto;opacity:0.38;mix-blend-mode:multiply;"></div>
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(0,0,0,0.08) 100%);"></div>
</div>
</div>
</div>
<div style="color:#f0f0f0;font-size:13px;line-height:1.05;text-transform:uppercase;text-align:center;margin-bottom:5px;">
КОНТАКТ С IRO
</div>
<div style="color:#d0d0d0;font-size:20px;line-height:1;text-align:center;">
${iroContactLevel}
</div>
</div>

<div style="width:calc((100% - 36px) / 4);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;">
<div style="width:100%;height:190px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;">
<div style="width:100%;max-width:56px;height:100%;border-radius:20px;background:rgba(255,255,255,0.10);display:flex;align-items:flex-end;overflow:hidden;">
<div style="width:100%;height:${paranormalAbilityLevel}%;min-height:${paranormalAbilityLevel > 0 ? '10px' : '0'};position:relative;overflow:hidden;background:linear-gradient(180deg,#efefef 0%,#d8d8d8 46%,#bfbfbf 100%);border-radius:20px;">
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);background-size:220px auto;opacity:0.38;mix-blend-mode:multiply;"></div>
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(0,0,0,0.08) 100%);"></div>
</div>
</div>
</div>
<div style="color:#f0f0f0;font-size:13px;line-height:1.05;text-transform:uppercase;text-align:center;margin-bottom:5px;">
СПОСОБНОСТИ
</div>
<div style="color:#d0d0d0;font-size:20px;line-height:1;text-align:center;">
${paranormalAbilityLevel}
</div>
</div>

<div style="width:calc((100% - 36px) / 4);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;">
<div style="width:100%;height:190px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px;">
<div style="width:100%;max-width:56px;height:100%;border-radius:20px;background:rgba(255,255,255,0.10);display:flex;align-items:flex-end;overflow:hidden;">
<div style="width:100%;height:${fameLevel}%;min-height:${fameLevel > 0 ? '10px' : '0'};position:relative;overflow:hidden;background:linear-gradient(180deg,#efefef 0%,#d8d8d8 46%,#bfbfbf 100%);border-radius:20px;">
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);background-size:220px auto;opacity:0.38;mix-blend-mode:multiply;"></div>
<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(0,0,0,0.08) 100%);"></div>
</div>
</div>
</div>
<div style="color:#f0f0f0;font-size:13px;line-height:1.05;text-transform:uppercase;text-align:center;margin-bottom:5px;">
ИЗВЕСТНОСТЬ
</div>
<div style="color:#d0d0d0;font-size:20px;line-height:1;text-align:center;">
${fameLevel}
</div>
</div>

</div>
</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>
</div>


<div style="width:1174px;height:130px;background:linear-gradient(180deg, #505050 0%, #3f3f3f 45%, #2e2e2e 100%);border-radius:28px;box-sizing:border-box;position:relative;margin:28px 0 0 0;overflow:hidden;">

<div style="width:100%;height:100%;position:relative;z-index:2;font-size:0;">

<div style="display:inline-block;vertical-align:top;width:964px;height:100%;padding:14px 18px 14px 22px;box-sizing:border-box;">
<div style="color:#d7d7d7;font-size:16px;line-height:1.28;font-weight:400;font-family:'GothamBookForum', Arial, sans-serif;text-align:left;">
${contactNote}
</div>
</div>

<div style="display:inline-block;vertical-align:top;width:210px;height:100%;position:relative;border-radius:0 28px 28px 0;overflow:hidden;">
${contactImageBlock}

<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:176px;height:34px;background:rgba(67,67,67,0.96);border-radius:999px;box-sizing:border-box;overflow:hidden;">
<div style="width:100%;height:100%;position:relative;z-index:2;padding:0 14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;">
${telegramIcon}
<a href="${contactHref}" target="_blank" style="color:#f1f1f1;font-size:12px;line-height:1;font-weight:400;font-family:'GothamNarrowForum', Arial, sans-serif;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:130px;">
${contactLinkText}
</a>
</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.18;border-radius:999px;"></div>
</div>
</div>

</div>

<div style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:url(https://allwebs.ru/images/2026/03/11/1d … fcda94.png);opacity:0.35;border-radius:28px;"></div>
</div>

</div>
</div>
`;

/* -------------------------------------------------------
ВСТАВКА ПРЕВЬЮ В БЛОК
------------------------------------------------------- */
document.getElementById("preview").innerHTML = result;

/* -------------------------------------------------------
ПЕРЕСЧЕТ ВЫСОТЫ ПРЕВЬЮ
------------------------------------------------------- */
updatePreviewScale();

setTimeout(updatePreviewScale, 50);
setTimeout(updatePreviewScale, 150);
setTimeout(updatePreviewScale, 300);

var previewImages = document.querySelectorAll("#preview img");
for (var i = 0; i < previewImages.length; i++) {
previewImages[i].onload = updatePreviewScale;
previewImages[i].onerror = updatePreviewScale;
}

}

/* =========================================================
чето связанное с переносом анкеты в итоговое поле ввода
========================================================= */

function exportFormCode() {
generateForm();

var previewHtml = document.getElementById("preview").innerHTML;
var exportId = "forum-dossier-" + window.dossierNumber;

var fontFaces =
'<style>' +
'@font-face {' +
'font-family: "GothamBookForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/52309.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "StaatlichesForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/11649.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/16078.woff2") format("woff2");' +
'font-weight: 400;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/76301.woff2") format("woff2");' +
'font-weight: 500;' +
'font-style: normal;' +
'}' +
'@font-face {' +
'font-family: "GothamNarrowForum";' +
'src: url("https://forumstatic.ru/files/001c/8f/61/40885.woff2") format("woff2");' +
'font-weight: 700;' +
'font-style: normal;' +
'}' +

'.forum-dossier-viewport{width:100%;max-width:100%;overflow:hidden;margin:20px auto 0 auto;}' +
'.forum-dossier-stage{position:relative;width:100%;height:0;}' +
'.forum-dossier-inner{width:1190px;transform-origin:top left;}' +
'</style>';

var responsiveWrapped =
'<div id="' + exportId + '" class="forum-dossier-viewport">' +
'<div class="forum-dossier-stage">' +
'<div class="forum-dossier-inner">' +
previewHtml +
'</div>' +
'</div>' +
'</div>' +
'<script>' +
'(function(){' +
'function fitForumDossier(){' +
'var root=document.getElementById("' + exportId + '");' +
'if(!root)return;' +
'var stage=root.getElementsByClassName("forum-dossier-stage")[0];' +
'var inner=root.getElementsByClassName("forum-dossier-inner")[0];' +
'if(!stage||!inner)return;' +
'var base=1190;' +
'var available=root.clientWidth||base;' +
'var scale=Math.min(1, available/base);' +
'inner.style.transform="scale("+scale+")";' +
'stage.style.height=Math.ceil(inner.scrollHeight*scale)+"px";' +
'}' +
'if(window.addEventListener){window.addEventListener("resize", fitForumDossier);}' +
'setTimeout(fitForumDossier,0);' +
'setTimeout(fitForumDossier,100);' +
'setTimeout(fitForumDossier,300);' +
'})();' +
'<\/script>';

var openTag = "[" + "html" + "]";
var closeTag = "[/" + "html" + "]";
var wrappedResult = openTag + "\n" + fontFaces + responsiveWrapped + "\n" + closeTag;

document.getElementById("result").value = wrappedResult;
document.getElementById("code-output").style.display = "block";
}

function copyFormCode() {
var resultField = document.getElementById("result");
if (!resultField || !resultField.value) return;

resultField.select();
resultField.setSelectionRange(0, 999999);

var success = false;

try {
success = document.execCommand("copy");
} catch (e) {
success = false;
}

var btn = document.querySelector(".copy-btn-wrap button");
if (btn && success) {
var oldText = btn.textContent;
btn.textContent = "Скопировано";
setTimeout(function() {
btn.textContent = oldText;
}, 1200);
}
}

/* =========================================================
СПИСОК ПОЛЕЙ, КОТОРЫЕ АВТООБНОВЛЯЮТ ПРЕВЬЮ
========================================================= */
var liveFields = [
"char_name",
"char_name_ru",
"age",
"job",
"location",
"threat_level",
"iro_contact_level",
"paranormal_ability_level",
"fame_level",
"desc",
"img",
"face",
"paranormal_connection",
"summary",
"top_img",
"bottom_img",
"contact_img",
"contact_note",
"contact_link",
"contact_link_text"
];

/* =========================================================
ПОДКЛЮЧАЕМ АВТООБНОВЛЕНИЕ КАЖДОГО ПОЛЯ
========================================================= */
for (var i = 0; i < liveFields.length; i++) {
document.getElementById(liveFields[i]).addEventListener("input", generateForm);
}

window.addEventListener("resize", function() {
updatePreviewScale();
});

/* =========================================================
ПЕРВЫЙ ЗАПУСК ГЕНЕРАЦИИ ПРИ ЗАГРУЗКЕ
========================================================= */
generateForm();
</script>[/html]

0

Поделиться42026-03-14 16:36:20

Автор: IRO
Администратор
Сообщений: 91
Уважение: [+0/-0]
Последний визит:
2026-04-09 15:46:46

[html]
<style>
@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/16078.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/76301.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'GothamNarrowForum';
src: url('https://forumstatic.ru/files/001c/8f/61/40885.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}

.forum-header-line {
position: relative;
width: 100%;
margin: 0 auto;
line-height: 0;
font-size: 0;
}

.forum-header-line svg {
display: block;
width: 100%;
height: auto;
}

.forum-header-title {
position: absolute;
left: 8.7%;
top: 25%;
width: 78%;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 2.75vw;
line-height: 1;
color: #3f3f3f;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}

.forum-header-title-light {
font-weight: 400;
}

.forum-header-title-bold {
font-weight: 700;
}

.forum-header-directory {
position: absolute;
left: 10.6%;
top: 72%;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 0.68vw;
line-height: 1;
font-weight: 700;
color: #c7c7c7;
text-transform: uppercase;
letter-spacing: 0.53em;
white-space: nowrap;
}

.forum-header-number {
position: absolute;
left: 29.2%;
top: 66.5%;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 1.7vw;
line-height: 1;
font-weight: 700;
color: #c7c7c7;
text-transform: uppercase;
letter-spacing: 0.53em;
white-space: nowrap;
}

.forum-header-meta {
position: absolute;
left: 34.1%;
top: 72%;
font-family: 'GothamNarrowForum', Arial, sans-serif;
font-size: 0.68vw;
line-height: 1;
font-weight: 400;
color: #c7c7c7;
text-transform: uppercase;
letter-spacing: 0.53em;
white-space: nowrap;
}

@media (min-width: 1200px) {
.forum-header-title {
font-size: 44px;
}

.forum-header-directory,
.forum-header-meta {
font-size: 11px;
}

.forum-header-number {
font-size: 27px;
}
}

@media (max-width: 900px) {
.forum-header-title {
font-size: 3vw;
width: 80%;
white-space: normal;
line-height: 0.95;
}

.forum-header-directory,
.forum-header-meta {
font-size: 1vw;
}

.forum-header-number {
font-size: 2.3vw;
}
}
</style>

<div class="forum-header-line">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1618.06 173.42">
<defs>
<style>
.st0 {
font-size: 44.93px;
}

.st0, .st1 {
fill: #3f3f3f;
}

.st2 {
font-size: 27.65px;
letter-spacing: .53em;
}

.st2, .st3, .st4, .st5 {
fill: #c7c7c7;
}

.st2, .st6 {
font-family: Gotham-Bold, Gotham;
font-weight: 700;
}

.st3 {
letter-spacing: .53em;
}

.st3, .st7 {
font-family: Gotham-Light, Gotham;
font-weight: 300;
}

.st3, .st5 {
font-size: 11.28px;
}

.st8 {
fill: #efefef;
}

.st9 {
display: none;
}

.st5 {
font-family: Gotham-Black, Gotham;
font-weight: 800;
letter-spacing: .53em;
}
</style>
</defs>

<div class="forum-header-title">
<span class="forum-header-title-light">НАПОЛНЕНИЕ </span><span class="forum-header-title-bold">ТЕМЫ ПЕРСОНАЖА</span>
</div>

<div class="forum-header-directory">DIRECTORY</div>
<div class="forum-header-number">01</div>
<div class="forum-header-meta">PREDICTIVE MODELING</div>
</div>
[/html]

Жизнь после приёмки: что делать с темой персонажа дальше? (Спойлер: можно всё)

Итак, свершилось! Твою анкету приняли, модератор поставил заветную галочку, ты готов ворваться в игру и писать гениальные посты. Но давай задержимся на минуту и заглянем в раздел, куда только что перенесли твою тему.

Архив досье. Звучит как место, куда отправляют устаревшие досье, правда? Типа «спасибо, отыграл, можешь идти на покой». Но нет! На самом деле это живой, дышащий уголок форума, где твой персонаж обретает не только душу, но и целый гардероб, фотокарточки, плейлисты и даже табличку с врагами и друзьями.

Давай разбираться, зачем всё это нужно и как не утонуть в возможностях.

Что такое «Архив досье» и почему туда переносят мою тему?

Представь, что это библиотека личных дел всех агентов (и не только). Здесь хранятся принятые анкеты — и твоя теперь тоже здесь.

Это место, куда ты можешь зайти в любой момент и:

Перечитать свою анкету (освежить в памяти, какого цвета глаза у твоего персонажа и не забыл ли ты, что он боится пауков).

Почитать анкеты других игроков (вдруг кто-то идеально подходит тебе в напарники или заклятые враги?).

Просто полюбоваться на красивое оформление.

Но самое крутое: твоя тема остаётся открытой для постов. То есть ты можешь (и многие так делают) дополнять её чем угодно и когда угодно.

Зачем вообще что-то туда добавлять?

Отличный вопрос. Формально ты можешь вообще ничего не делать. Анкета есть — и ладно. Но представь, что твой персонаж — это не просто набор слов на форуме, а живой человек (или нечеловек), у которого есть:

Любимая музыка.

Красивые картинки, передающие его настроение.

Цитаты, которые он мог бы сказать.

Важные моменты биографии, которые не влезли в анкету.

Смешные истории из жизни.

Всё это можно и нужно добавлять в тему персонажа! Почему? Да потому что это работает как магнит для других игроков.

Представь: ты заходишь в тему персонажа, а там просто анкета. Ну, окей. Прочитал, понял, пошёл дальше.

А теперь представь другую тему:

Красивая шапка с цитатой. Ниже — атмосферные аэстетики. Потом плейлист с треками, которые, по мнению игрока, идеально описывают персонажа. Дальше — список завершённых эпизодов со ссылками (чтобы можно было почитать и проникнуться). И табличка отношений: этот — его начальник, с этим он враждует, этот — бывший, а этот — загадочный незнакомец, с которым только-только пересеклись.

Как думаешь, с каким персонажем захочется играть больше? В какого проще влюбиться? Какой кажется более живым и проработанным?

Второй, конечно. Потому что он объёмный. Потому что за ним видно человека (игрока), который вложил душу.

Что конкретно можно добавлять?

Что можно добавить Зачем это нужно
Аэстетики Красивые картинки, передающие внешность, настроение, атмосферу вокруг персонажа. Просто для вайба.
Плейлисты Музыка, которая ассоциируется с персонажем. Другие игроки могут включить фоном, когда читают твои посты.
Цитаты Любимые фразы персонажа или просто красивые/смешные цитаты, которые его характеризуют.
Важные моменты биографии То, что не влезло в анкету, но хочется рассказать. Детство, первая любовь, травма, смешной случай.
Ссылки на эпизоды Очень полезная штука! Ссылки на завершённые и активные отыгрыши с участием персонажа. Чтобы любой зашедший мог почитать и понять, как твой герой проявляет себя в деле.
Таблица отношений Кто кому кем приходится. Друзья, враги, любовники, коллеги, родственники. Это помогает другим игрокам быстро понять связи и, возможно, найти точки пересечения со своими персонажами.
Арты/фан-арт Если тебе кто-то нарисовал персонажа или ты нашёл арт, похожий на него, — делись!

💡 А это обязательно?

Нет! Нет и ещё раз нет.

Всё это — чистая опция. Как звёздочка в меню: «Для тех, кто хочет красиво». Ты можешь вообще ничего не добавлять, и твоя тема будет состоять ровно из одной анкеты. И это абсолютно нормально.

Но если ты любишь творчество, хочешь, чтобы твой персонаж заиграл новыми красками, и тебе есть чем поделиться, — почему бы и нет?

🎁 Как заполняться?

Мы подготовили для тебя красивые готовые шаблоны, чтобы ты не мучился с оформлением. Они лежат ниже (в специальной теме). Там есть:

Шаблон для аэстетик — вставил ссылки на картинки, и готово.
Шаблон для плейлиста — добавил названия треков или ссылки, и атмосфера готова.
Шаблон для таблицы отношений — просто заполни ячейки.
Шаблон для списка эпизодов — кидай ссылки на свои отыгрыши и подписывай, о чём они.

Как использовать: заходишь в тему своего персонажа в «Архиве», создаёшь новый пост, вставляешь туда шаблон, публикуешь. Всё. Красота появляется сама собой.

Но если ты не любишь шаблоны и хочешь творить в свободной форме — пожалуйста! Можешь писать вообще как угодно: хоть списком, хоть стихами, хоть потоком сознания с картинками вразнобой. Главное, чтобы тебе было красиво и удобно. Шаблоны — это просто подсказка для тех, кто не знает, с чего начать. А если у тебя есть своё видение — твори, выдумывай, пробуй!

Каждый шаблон — отдельным постом. Так удобнее: хочешь обновить плейлист — правишь один пост, хочешь добавить эпизод — дописываешь в соответствующий.

0

IRO

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

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

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

ɯᴀбᴧон ᴀнᴋᴇᴛы

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

Поделиться12025-10-20 20:37:31

Поделиться22026-03-12 14:04:56

Поделиться32026-03-12 21:10:44

Поделиться42026-03-14 16:36:20