[html]
<div class="fp-wrap">
<div class="fp-bg"></div>
<div class="fp-body">
<div class="fp-title fp-title--ms" style="text-align: center">New Arrival's Dossier</div>
<div class="fp-divider-soft"></div>
<p>Для гостей представляем возможность собрать персонажа по конструктору. Нажимаете на стрелки, подбираете себе образ, имя, черты характера и фракцию. О том, что проходите по конструктору, важно указать в анкете и дописать в дополнительное все факты из разделов. На старте такая сборка даст вам <b>70 галлеонов</b> в профиль (и артефакт в анкету из списка ниже). Чтобы получить монеты, важно использовать все пункты из всех слайдеров (изменить на свой вкус можно только имя и внешность).</p>
</div>
<div class="cc-root">
<div class="cc-bg"></div>
<div class="cc-in">
<div class="cc-cover">
<div class="cc-deco"><div class="ln"></div><div class="dm"></div><div class="ln"></div></div>
<h1>Character Constructor</h1>
</div>
<!-- FACE ZONE -->
<div class="fc-zone">
<div class="fc-prev" id="fp">
<div class="fc-emp" id="fe">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" rx="3"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<path d="M21 15l-5-5L5 21"></path>
</svg>
выберите<br>внешность
</div>
<img id="fi" style="display:none" alt="">
<div class="fc-tag hid" id="ft"><span id="ftt"></span></div>
</div>
<div class="fc-gw">
<div class="fc-gl">Внешности</div>
<div class="fc-gr" id="fg"></div>
</div>
</div>
<!-- NAME + BLOODLINE ROW -->
<div class="cc-topgrid">
<!-- NAME -->
<div class="cc-topcell">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<path d="M12 12a5 5 0 100-10 5 5 0 000 10z"></path>
<path d="M4 22a8 8 0 0116 0"></path>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Имя персонажа</div>
<div class="pg-s">выбор имени персонажа</div>
</div>
<div class="pg-nav" id="nav_nmw">
<button type="button" class="ca" onclick="ccCarGo('nmw',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('nmw',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c">
<div id="nmw"></div>
</div>
</div>
<!-- RACE -->
<div class="cc-topcell">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<path d="M12 3c-1.5 2-4 4-4 7a4 4 0 008 0c0-3-2.5-5-4-7z"></path>
<path d="M12 17v4"></path>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Раса</div>
<div class="pg-s">выберите расу персонажа</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('rBlood',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('rBlood',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="rRace"></div>
</div>
</div>
<div class="cc-sep"><span class="arr">←</span><div class="rl"></div><span class="arr">→</span></div>
<!-- STACKED SECTIONS -->
<div class="cc-stack">
<div class="sl-p">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
<line x1="4" y1="22" x2="4" y2="15"></line>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Фракция</div>
<div class="pg-s">лояльность и сторона конфликта</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('wFac',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('wFac',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="wFac"></div>
</div>
<div class="sl-p">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<path d="M4 19.5A2.5 2.5 0 016.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"></path>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Профессия</div>
<div class="pg-s">род занятий в магическом мире</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('wPro',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('wPro',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="wPro"></div>
</div>
<div class="sl-p">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"></path>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Черта характера</div>
<div class="pg-s">что определяет персонажа</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('wTra',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('wTra',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="wTra"></div>
</div>
<div class="sl-p">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Артефакт</div>
<div class="pg-s">магический предмет</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('wArt',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('wArt',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="wArt"></div>
</div>
<div class="sl-p">
<div class="pg-h">
<div class="pg-i">
<svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
</div>
<div class="pg-ht">
<div class="pg-l">Факт из жизни</div>
<div class="pg-s">нечто странное, мистическое, забавное</div>
</div>
<div class="pg-nav">
<button type="button" class="ca" onclick="ccCarGo('wFct',-1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 18l-6-6 6-6"></path></svg></button>
<button type="button" class="ca" onclick="ccCarGo('wFct',1)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18l6-6-6-6"></path></svg></button>
</div>
</div>
<div class="pg-c" id="wFct"></div>
</div>
</div>
<div style="height:20px"></div>
</div>
</div>
</div>
<script>
var ccFaces = [
{n:"victoria pedretti",u:"https://i.pinimg.com/originals/c1/2e/d9/c12ed9304f5ceb22ed8097469bad5756.gif"},
{n:"elizabeth olsen",u:"https://i.pinimg.com/originals/d1/1b/35/d11b3564dd6c136fefaad6ff295442b4.gif"},
{n:"aaron taylor johnson",u:"https://64.media.tumblr.com/04e8e6614daeae167bc33be05a3855cd/344f140417d96f0c-2d/s540x810/7f52e9661254484e28652f574ff204547767cfc9.gif"},
{n:"elizabeth lail",u:"https://i.pinimg.com/originals/5b/05/a9/5b05a902f75068d5f572370261398383.gif"},
{n:"joe keery",u:"https://i.pinimg.com/originals/b3/80/89/b38089f5a4b7493c22035ddb03cc894b.gif"},
{n:"elle fanning",u:"https://i.pinimg.com/originals/81/af/70/81af702323a6e452ea680e0357a49d68.gif"},
{n:"dylan o'brien",u:"https://64.media.tumblr.com/6f64f9d9e46d4fc7f3cc423f573e1669/730df7531a5c7708-93/s540x810/1750aa2518259ead060da707628c3ec3f6d9707a.gif"},
{n:"jensen ackles",u:"https://i.pinimg.com/originals/ea/08/08/ea08086a44d190bb80feba31db611878.gif"},
{n:"margaret qualley ",u:"https://64.media.tumblr.com/3b269b9174e974726cd92e93cfa1ebd8/85f001c32c07fea3-af/s540x810/67d5031c245cf98c98c9e6884a2be43a02c1b9ee.gif"},
];
var ccNames = [
"Elara Blackwood","Caspian Ashford","Morgana Whitmore","Dorian Graves",
"Isolde Ravenscroft","Theron Nightshade","Lydia Thornwell","Percival Crane",
"Rowena Sinclair","Alaric Voss","Dorian Holloway","Rowena Thistlecroft",
"Septimus Vane","Tiberius Crowley","Mara Ellington","Adrian Whitlock",
];
var ccBlood = ["Полукровный","Магглорождённый","Сквиб","Маггл, знающий о мире","Оборотень","Вампир","Вейла","Полувейла"];
var ccFac = [
{t:"Орден Феникса",d:"Сопротивление под руководством Дамблдора. Идеалисты, загнанные в угол."},
{t:"Пожиратели Смерти",d:"Террористическая организация Волдеморта. Боевики, агенты влияния."},
{t:"Министерство Магии",d:"Коррумпированная структура. Внешне правительство, внутри — гниль."},
{t:"Чёрный рынок",d:"Нейтральная криминальная территория Лютного под контролем Скорпиуса."},
{t:"Серые Плащи",d:"Дезертиры с обеих сторон. Те, кто бежал от войны."},
{t:"Осквернители",d:"Радикализированные магглорождённые и полукровки. Ответ террором на террор."},
{t:"Изгои",d:"Стая Фенрира и одиночки. Те, кого отвергло общество."},
{t:"Нейтралитет",d:"Не примкнувшие ни к одной стороне. Молчание — тоже выбор."},
];
var ccPro = [
{t:"Аврор",d:"Боевая единица Отдела магического правопорядка. Потери среди авроров — каждую неделю новые имена в некрологах."},
{t:"Ликвидатор проклятий",d:"Гринготтс или ММ. Разбирается в тёмной магии — от родовых проклятий и защиты гробниц до артефактов, оставшихся после рейдов."},
{t:"Колдомедик",d:"Мунго, полевой госпиталь, подпольная практика. Раненых всё больше, а сил каждый день видеть кровь на руках — гораздо меньше."},
{t:"Невыразимец",d:"Отдел тайн. О характере работы не говорят — особенно сейчас, когда исследования переведены в закрытый режим."},
{t:"Преподаватель",d:"Хогвартс, Гебриды, частное репетиторство. Учить детей в военное время — отдельное искусство."},
{t:"Журналист",d:"Пророк или Придира, вольный пересмешник. Одно неудачное слово — и перо переломят вместе с пальцами."},
{t:"Портретист",d:"Пишет волшебные портреты — от парадных для Министерства до посмертных по заказу семей. Каждый холст требует месяцев работы и фрагмента памяти самого натурщика. В последние годы заказов на посмертные стало больше, чем на прижизненные."},
{t:"Создатель бытовых предметов",d:"Самомоющаяся посуда, сумки с чарами незримого расширения, самогладящееся бельё, котлы с автоподогревом. Работа кропотливая, клиентура — от домохозяек до министерских чиновников. Изделия мастеров этого цеха десятилетиями передают по наследству."},
{t:"Сотрудник Портального управления",d:"Отдел магического транспорта. Рассчитывает координаты, активирует порт-ключи, ведёт реестр. С начала войны половина маршрутов закрыта или под контролем — а начальство требует не задавать вопросов о том, кому и куда выдаются экстренные разрешения."},
{t:"Заклинатель тканей",d:"Мантии, меняющие цвет по настроению, плащи с чарами водоотталкивания, парадные одежды для балов. Ателье в Косом переулке или частный мастер. Последний год идет волна заказов на траурные мантии и на подклад с защитными рунами."},
{t:"Семейный поверенный",d:"Ведёт дела чистокровных родов: завещания, брачные контракты, родовые артефакты, споры о наследстве. Хранит столько чужих тайн, что сам стал ходячим компроматом. С начала войны переписывает завещания по три раза в месяц."},
{t:"Ритуалист",d:"Специалист по старой обрядовой магии — родовые клятвы, обручения, именования, погребальные обряды. Министерство относится с подозрением, чистокровные семьи с почтением. Практика держится на репутации и рекомендациях."},
{t:"Переводчик древних текстов",d:"Руны, древнегреческий, гоблинский. Работает с частными библиотеками, иногда с Отделом тайн. Знает слишком много, чтобы спать спокойно."},
{t:"Составитель маршрутов",d:"Сопровождающий для путешествий через зачарованные территории — от леса Дин до румынских драконьих заповедников. Совмещает роли проводника, охранника и переговорщика. В военное время работа резко разделилась: легальные туры почти исчезли, зато выросли заказы на «тихий вывоз»."},
{t:"Оценщик артефактов",d:"Гринготтс, аукционные дома, страховые конторы. Определяет подлинность, возраст, проклятия, рыночную стоимость. За последний год через руки прошло подозрительно много предметов с гербами «пропавших без вести» семей."},
{t:"Травник",d:"Выращивает редкие ингредиенты для зельеваров и Мунго. Имеет собственные теплицы и контракт с крупными аптеками. Один сезон неурожая — и на чёрном рынке цены взлетают втрое."},
{t:"Архивариус",d:"Министерский архив, библиотека Хогвартса, частные собрания чистокровных родов. Знает, где лежит каждая бумажка за последние триста лет. С начала войны участились «пропажи» документов — и запросы на их срочное восстановление."},
{t:"Специалист по магическим замкам",d:"Взломщик или, если угодно, «консультант по безопасности». Официально работает на страховые компании и банки, неофициально берёт частные заказы. В военное время разница между двумя занятиями почти стёрлась."},
{t:"Фотограф-колдохудожник",d:"Семейные портреты, свадьбы, репортажи для «Пророка». Знает, как заставить человека на фотографии улыбаться, даже если натурщик не хочет. За последний год всё чаще зовут снимать не свадьбы, а похороны (но непонятно — зачем)."},
{t:"Гробовщик",d:"Погребальные обряды, зачарованные гробы, семейные склепы. Непопулярная профессия в мирное время и одна из самых востребованных сейчас. Знает все чистокровные семьи по их потерям."},
{t:"Наёмник",d:"Телохранитель, охотник, исполнитель заказов. Сторон в этой войне больше двух, и у каждой есть кошелёк."},
{t:"Контрабандист",d:"Перевозит запрещённые ингредиенты, артефакты, документы, иногда связанных людей. Свой в Лютном, владеет порт-ключами в обход Министерства, есть международные связи на чёрных рынках."},
{t:"Информатор",d:"Умеет слушать и слышать, разговорить собеседника. И потом торгует не товаром, а сведениями. Работает сразу на всех, пока еще получается."},
{t:"Домовладелец поместья",d:"Содержание родового имения как основное занятие. Владеет землями, собирает выплаты с арендаторов. Бережет семейные архивы и политические связи."},
{t:"Безработный",d:"Война, чистки, закрытые отделы, сожжённые лавки тому виной. Средства есть, пока терпят родственники."},
{t:"Бродяга",d:"Ни дома, ни работы, ни планов дальше завтрашнего дня. Кто-то пьёт, кто-то прячется, кто-то ждёт счастливого часа."},
];
var ccTra = [
{t:"Паранойя",d:"Не доверяет никому. Проверяет выходы, спит лицом к двери, и это уже не похоже на здоровую черту."},
{t:"Идеализм",d:"Верит, что мир можно изменить. Даже когда всё горит, сохраняет веру в ценности и идеалы добра."},
{t:"Жестокость",d:"Война обнажила то, что пряталось внутри — и портрет этого нового лица совсем не приятный."},
{t:"Двуличность",d:"Носит маску для каждого. Никто не знает его настоящей натуры, но многие догадываются, что он хитрый лис."},
{t:"Верность",d:"До последнего вздоха, даже если объект того не заслуживает, он будет рядом. Цена всегда высока."},
{t:"Чувство вины",d:"Груз чужих смертей напоминает камень, тянущий ко дну. Каждую ночь он видит лица тех, кого не спас."},
{t:"Амбиции",d:"Война — это лестница. Кто-то падает, кто-то карабкается вверх по чужим головам или трупам."},
{t:"Сострадание",d:"Не различает цвета флагов и значки на мантиях, защищает всех, кому может помочь."},
{t:"Цинизм",d:"Верил — но обжёгся. Теперь в каждым красивом слове видит расчёт, а в героизме чей-то интерес. Иногда ошибается."},
{t:"Отрешённость",d:"Смотрит на происходящее будто через мутное стекло — сработал защитный механизм. Включиться обратно получается не сразу и не всегда."},
{t:"Одержимость",d:"Есть одна идея, одно имя, одна цель — и всё остальное меркнет. Сон, еда, близкие — уже не приоритет. Война даёт одержимости слишком много пищи."},
{t:"Гордость",d:"Не переступит через принципы даже ради спасения себя или близкого, а извинения даются ему тяжело. Родовая черта или приобретённая — не имеет значения."},
{t:"Трусость",d:"Замечает за собой и ненавидит себя за это. Каждый раз обещает себе в следующий раз не отступить — и отступает. Живёт с этим как может."},
{t:"Азартность",d:"Живёт на грани — иначе скучно. Ставит на кон то, что ставить нельзя, даже если шанс выиграть мал. Война для таких — худшее из возможных казино."},
{t:"Сентиментальность",d:"Хранит письма, засушенные цветы, пуговицы. За внешней твёрдостью прячет целый архив из чужих голосов, строчек, безделушек, которые не может выбросить."},
{t:"Упрямство",d:"Сказал — сделает, решил — не свернёт. Окружающие называют это то стойкостью, то тупостью, в зависимости от результата."},
{t:"Ирония",d:"Шутит на похоронах, шутит в бою, шутит когда страшно. Многие путают с нервозностью — либо защита, либо диагноз, либо и то и другое."},
{t:"Импульсивность",d:"Сначала действует, потом думает, иногда жалеет о быстром выборе. Спас нескольких именно так, но погубил нескольких тоже."},
{t:"Мстительность",d:"Не забывает ни обид, ни долгов. Ведёт внутренний список — и он длинный. Война добавляет в него имена всё быстрее, и не все из них получается вычёркивать."},
{t:"Сдержанность",d:"Не повышает голос, не показывает боль, не плачет при свидетелях. Внутри может быть что угодно — снаружи всегда тишь да гладь."},
{t:"Великодушие",d:"Прощает там, где прощать необязательно. Делится тем, чего самому не хватает. Иногда от этого становится только хуже — причём всем."},
{t:"Самопожертвование",d:"Всегда готов встать под удар первым. Красиво со стороны, но изматывающе изнутри. Часто путают со смелостью, хотя корни бывают совсем другие."},
{t:"Прагматизм",d:"Выбирает то, что работает, а не то, что правильно. Неудобная черта для идеалистов рядом — и крайне полезная, когда надо выжить."},
{t:"Меланхолия",d:"Грусть как вечный фон. Красиво пишет, долго молчит и горестно вздыхает, глядя в окно с чашкой чая. Любит дожди и старые вещи."},
{t:"Харизма",d:"За ним идут, ему верят, его слушают — иногда против собственной воли. Дар обоюдоострый: война любит таких и быстро их сжигает."},
{t:"Недоверчивость",d:"Пока еще не паранойя — но вечно требует доказательств. Дружбу с ним заслуживают годами, а теряют за один неверный шаг."},
{t:"Перфекционизм",d:"Делает либо идеально, либо никак. В мирной профессии — достоинство мастера. В военное время — источник постоянного чувства провала."},
{t:"Романтизм",d:"Видит в происходящем сюжет. Ищет красоту в поступках, смысл в совпадениях, судьбу в случайностях. Реальность регулярно эту веру испытывает."},
{t:"Беспринципность",d:"Нет линии, которую он не переступит. С такими легко договориться и невозможно предсказать, кому они продадут тебя завтра."},
];
var ccArt = [
{t:"Кольцо-предвестник",d:"Нагревается перед опасностью. Подвох в том, что «опасность» оно определяет по собственной логике: иногда предупреждает о проклятом письме, иногда молчит под прицелом палочки. Доверять можно, полагаться не стоит."},
{t:"Парное зеркало",d:"Одно из пары для связи на расстоянии. Второе осталось у того, кого больше нет — и иногда поверхность всё равно мутнеет, как будто кто-то пытается выйти на связь с той стороны. Владелец старается не смотреть в него после полуночи."},
{t:"Стрелка тревоги",d:"Карманные часы без цифр — единственная стрелка указывает в сторону ближайшей угрозы и дрожит тем сильнее, чем ближе источник. Определять природу угрозы часы не умеют."},
{t:"Запечатанный фиал",d:"Флакон с чьим-то воспоминанием. Владелец сам его туда поместил — и сам же не помнит, что именно извлёк. Разбить печать можно в любой момент. Пока не разбил, спится спокойнее."},
{t:"Костяной нож",d:"Ритуальный клинок старой работы. Каждое серьёзное использование оставляет на владельце шрам — и не всегда там, где ожидаешь."},
{t:"Медальон-тень",d:"На нем чары отвода глаз: взгляд окружающих соскальзывает с владельца, внимание рассеивается, имя забывается. Работает около 5 минут, но не против того, кто знает, кого ищет."},
{t:"Перо-самописец",d:"Записывает речь на расстоянии слышимости — а в умелых руках улавливает и обрывки мыслей. Чернила проявляются не сразу, иногда через сутки."},
{t:"Чернильница наследника",d:"Семейная вещь — чернила в ней не кончаются, пока жив последний носитель фамилии. Удобный индикатор: проверил утром уровень — узнал, жив ли ещё кто-то из родни. В военное время смотреть туда страшно."},
{t:"Брошь-хранительница",d:"Старая серебряная брошь с камнем, меняющим цвет от прозрачного к чёрному. Темнеет от близости тёмной магии, использованной с намерением причинить вред. В Лютном переулке носить её бессмысленно — чернеет постоянно."},
{t:"Портсигар-укрытие",d:"На вид обычный серебряный портсигар. Но внутри размещён пространственный карман размером с небольшую комнату. Доступ туда только у владельца по ключевому слову. Хранят там всё: от контрабандных товаров до заключенных людей."},
{t:"Монета связи",d:"Одна из пары или группы. Нагревается и проявляет надпись, когда другой владелец активирует свою. Чары просты, но надёжны — и, в отличие от сов, не перехватываются."},
{t:"Фляга трезвости",d:"Любая жидкость, налитая внутрь, очищается от зелий, ядов, сывороток правды и прочих примесей. Вкус при этом становится отвратительным, но живым остаёшься."},
{t:"Перчатки мастера",d:"Тонкие кожаные перчатки, позволяющие касаться проклятых предметов без последствий — один раз. После каждого использования одна нить в шве перчатки чернеет, и когда шов чернеет полностью, перчатки рассыпаются."},
{t:"Платок с монограммой",d:"Обычный на вид платок с вышитыми инициалами. Приложенный к ране, останавливает кровь и затягивает её, но забирает у владельца ровно столько сил, сколько нужно для исцеления. Быстрое восстановление стоит нескольких часов слабости."},
{t:"Компас верности",d:"Стрелка указывает не на север, а на того, кого владелец считает самым дорогим человеком. Проблема в том, что компас читает подсознание — и иногда показывает совсем не того, кого ожидаешь."},
{t:"Книга-дневник",d:"Обычная записная книжка, которая копирует записи в парную — у того, кому подарена. Проблема только в том, что носитель забыл, кому дарил вторую или как первая оказалась у него."},
{t:"Венец невесты",d:"Диадема, передающаяся в семье. Женщина, надевшая его, на одну ночь видит во сне тех, кто носил его до неё. Иногда получает от них совет или предостережение."},
{t:"Свеча поминовения",d:"Горит ровно столько, пока жив тот, чьё имя было произнесено при зажжении. Погасла — значит, всё кончилось. Именно потому многие не зажигают такие свечи из суеверия."},
];
var ccFct = [
{t:"Видит тени",d:"Каждое полнолуние замечает невнятные чёрные силуэты, но пока не выяснил, что его преследует."},
{t:"Ложные воспоминания",d:"Сирота помнит детство в доме, который по документам никогда не существовал. Обливиаторы не видят изменений в сознании."},
{t:"Говорит во сне",d:"Ночами выдает случайный набор фраз на языке, которого не знает — старогэльском. Близкие записывают эти слова по просьбе"},
{t:"Незаживающий рубец",d:"Рана от тёмного проклятия периодически кровоточит, целители перепробовали всё, чтобы это остановить, но борьба продолжается."},
{t:"Доппельгангер",d:"Есть родственник-близнец со стороны магглов или сквибов, обиженный на несправедливость судьбы. Они не общаются, но волшебник боится мести."},
{t:"Запах пепла",d:"После инцидента 1978-го постоянно чувствует вокруг запах гари. Боится огня, но его чары порой сбоят и поджигают предметы."},
{t:"Письмо без отправителя",d:"Каждый месяц, уже шесть лет подряд, к дому прилетает сова и приносит чистый пергамент. Ждет, когда там появится хотя бы слово."},
{t:"Боггарт изменился",d:"Раньше боялся высоты, а теперь закрытую дверь. Причину не понимает и о смене узнал случайно."},
{t:"Колдует без палочки",d:"Не проходил стажировку в Африке, но одно конкретное заклинание получается без палочки — и только оно. Откуда научился — не помнит."},
{t:"Семь лет удачи",d:"С определённого дня — помнит его точно — ему везёт в мелочах. Мелкие лотерейные билеты, ставки в Яме, чудом пролетевший мимо кирпич или проклятье, падающая чашка не разбивается. Семь лет закончатся этой осенью."},
{t:"Фамильное проклятие",d:"В роду через поколение кто-то умирает в тридцать три. Случайности, болезни, несчастные случаи — но всегда в этом возрасте. Сейчас ему тридцать два."},
{t:"Животные сторонятся",d:"Кошки шипят, собаки отступают, совы не садятся на предплечье. В Мунго не нашли следов тёмной магии, хотя главный целительно долго записывал что-то в отдельную тетрадь."},
{t:"Тёзка в списках",d:"В архиве Министерства числится волшебник с тем же именем, фамилией и датой рождения. Погиб при невыясненных обстоятельствах несколько лет назад. Запрос на уточнение остался без ответа."},
{t:"Запретная секция",d:"В школьные годы получал разрешения на посещение Запретной секции библиотеки чаще других — стояли подписи разных преподавателей, и темы были не всегда связанные с учёбой. Мадам Пинс до сих пор помнит его фамилию."},
{t:"Любимый преподаватель",d:"Один из школьных учителей выделял его среди других — дополнительные занятия, личные разговоры. Шли неприличные шепотки об их связи. Преподаватель покинул Хогвартс при странных обстоятельствах на его выпускном курсе."},
{t:"Должник",d:"Однажды спас незнакомца, а тот пообещал однажды вернуть долг и ушёл. Прошло несколько лет, на пороге стали появляться мелкие подарки без записки."},
{t:"Письма из прошлого",d:"Периодически получает письма с датами отправления десятилетней давности. Содержание актуальное — текущие события, упоминает людей, которых владелец встретил недавно. Почерк разный в каждом письме."},
{t:"Угадывает погоду",d:"За несколько часов до дождя, грозы или снега точно знает, что он будет. Не может объяснить, как именно — по ломоте в костях, как старики, или иначе."},
];
var ccCarStates = {};
/* ── face grid ── */
function ccPickFC(i) {
var thumbs = document.getElementById("fg").children;
for (var j = 0; j < thumbs.length; j++) thumbs[j].className = "fc-th";
thumbs[i].className = "fc-th on";
var img = document.getElementById("fi");
img.src = ccFaces[i].u;
img.style.display = "block";
document.getElementById("fe").style.display = "none";
document.getElementById("ftt").textContent = ccFaces[i].n;
document.getElementById("ft").className = "fc-tag";
}
function ccInitFC() {
var g = document.getElementById("fg");
if (!g) return;
var html = "";
for (var i = 0; i < ccFaces.length; i++) {
html += '<div class="fc-th" onclick="ccPickFC(' + i + ')"><img src="' + ccFaces[i].u + '" alt="' + ccFaces[i].n + '"></div>';
}
g.innerHTML = html;
}
/* ── race slider — same pattern as name carousel ── */
function ccMkInline(id, items) {
var w = document.getElementById("rRace");
if (!w) return;
ccCarStates[id] = {idx: 0, items: items.map(function(n){return {t:n};})};
var html = '<div class="cv"><div class="ct" id="ct_' + id + '">';
for (var i = 0; i < items.length; i++) {
html += '<div class="ci"><div class="cm">' + items[i] + '</div></div>';
}
html += '</div></div>';
html += '<div class="cds" id="cd_' + id + '">';
for (var j = 0; j < items.length; j++) {
html += '<button type="button" class="cdt' + (j===0?" on":"") + '" onclick="ccCarTo(\'' + id + '\',' + j + ')"></button>';
}
html += '</div>';
w.innerHTML = html;
}
/* ── card carousel (no nav in markup — nav is in pg-h) ── */
function ccMkCar(id, items) {
var w = document.getElementById(id);
if (!w) return;
ccCarStates[id] = {idx: 0, items: items};
var html = '<div class="cv"><div class="ct" id="ct_' + id + '">';
for (var i = 0; i < items.length; i++) {
html += '<div class="ci"><div class="cm">' + items[i].t + '</div>';
html += '<div class="cd">' + items[i].d + '</div>';
html += '</div>';
}
html += '</div></div>';
html += '<div class="cds" id="cd_' + id + '">';
for (var j = 0; j < items.length; j++) {
html += '<button type="button" class="cdt' + (j===0?" on":"") + '" onclick="ccCarTo(\'' + id + '\',' + j + ')"></button>';
}
html += '</div>';
w.innerHTML = html;
}
/* ── name carousel (no desc, nav in pg-h) ── */
function ccMkNameCar(id, names) {
var w = document.getElementById(id);
if (!w) return;
ccCarStates[id] = {idx: 0, items: names.map(function(n){return {t:n};})};
var html = '<div class="cv"><div class="ct" id="ct_' + id + '">';
for (var i = 0; i < names.length; i++) {
html += '<div class="ci"><div class="cm">' + names[i] + '</div></div>';
}
html += '</div></div>';
html += '<div class="cds" id="cd_' + id + '">';
for (var j = 0; j < names.length; j++) {
html += '<button type="button" class="cdt' + (j===0?" on":"") + '" onclick="ccCarTo(\'nmw\',' + j + ')"></button>';
}
html += '</div>';
w.innerHTML = html;
}
function ccCarGo(id, dir) {
var s = ccCarStates[id];
if (!s) return;
var n = s.idx + dir;
if (n < 0) n = s.items.length - 1;
if (n >= s.items.length) n = 0;
ccCarTo(id, n);
}
function ccCarTo(id, n) {
var s = ccCarStates[id];
if (!s) return;
s.idx = n;
var track = document.getElementById("ct_" + id);
var dotsWrap = document.getElementById("cd_" + id);
if (track) track.style.transform = "translateX(-" + (n * 100) + "%)";
if (dotsWrap) {
var ds = dotsWrap.children;
for (var j = 0; j < ds.length; j++) ds[j].className = (j===n)?"cdt on":"cdt";
}
}
function ccBoot() {
ccInitFC();
ccMkNameCar("nmw", ccNames);
ccMkInline("rBlood", ccBlood);
ccMkCar("wFac", ccFac);
ccMkCar("wPro", ccPro);
ccMkCar("wTra", ccTra);
ccMkCar("wArt", ccArt);
ccMkCar("wFct", ccFct);
}
ccBoot();
</script>
<style>
.cc-root {
--fp-bg: #E2E2E2;
--fp-stroke: #C2C2C2;
--fp-ink: #151515;
--fp-muted: #777777;
--fp-green: #606C57;
--fp-lt: #909A89;
--fp-tan: #B2A186;
--fp-r: 14px;
--fp-deep: #D6D6D4;
--fp-parchment: #E8E6E0;
font-family: "Manrope", sans-serif;
color: var(--fp-ink);
position: relative;
width: 100%;
max-width: 850px;
margin: 0 auto;
border-radius: var(--fp-r);
border: 1px solid var(--fp-stroke);
overflow: hidden;
background: var(--fp-bg);
box-sizing: border-box;
}
.cc-root *, .cc-root *::before, .cc-root *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cc-bg {
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(226,226,226,.88) 0%, rgba(222,222,222,.82) 40%, rgba(210,215,205,.75) 100%);
pointer-events: none;
z-index: 0;
}
.cc-in {
position: relative;
z-index: 1;
}
/* ── cover ── */
.cc-cover {
text-align: center;
padding: 36px 30px 12px;
}
.cc-deco {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 6px;
}
.cc-deco .ln { width: 70px; height: 1px; background: var(--fp-lt); }
.cc-deco .dm { width: 6px; height: 6px; background: var(--fp-lt); transform: rotate(45deg); flex-shrink: 0; }
.cc-cover h1 {
font-family: "Playfair Display", serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--fp-green);
}
.cc-csub {
font-size: 11px;
color: var(--fp-muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
}
/* ── face zone ── */
.fc-zone {
display: grid;
grid-template-columns: 1fr 300px;
gap: 16px;
padding: 12px 30px 20px;
}
.fc-prev {
/* fixed height so image never changes the layout */
height: 300px;
border-radius: 10px;
overflow: hidden;
background: var(--fp-deep);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.fc-prev img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(25%) contrast(1.05);
mix-blend-mode: multiply;
mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, black 50%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, black 50%, transparent 100%);
}
.fc-emp {
position: relative;
z-index: 1;
color: var(--fp-muted);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
line-height: 1.6;
}
.fc-emp svg { display: block; margin: 0 auto 8px; opacity: .35; }
.fc-tag {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
.fc-tag span {
display: inline-block;
padding: 5px 18px;
background: rgba(226,226,226,.82);
backdrop-filter: blur(4px);
border: 1px solid var(--fp-stroke);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fp-green);
}
.fc-tag.hid { display: none; }
.fc-gw {
display: flex;
flex-direction: column;
gap: 8px;
}
.fc-gl {
font-family: "Playfair Display", serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--fp-green);
text-align: center;
}
.fc-gr {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
height: 280px;
padding: 4px;
overflow: hidden;
}
.fc-th {
border-radius: 6px;
border: 2px solid transparent;
overflow: hidden;
cursor: pointer;
background: var(--fp-deep);
transition: border-color .25s, transform .2s;
}
.fc-th:hover { border-color: var(--fp-lt); transform: scale(1.04); }
.fc-th.on { border-color: var(--fp-green); }
.fc-th img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(30%) contrast(1.05);
mix-blend-mode: multiply;
display: block;
}
/* ── top grid: name + race ── */
.cc-topgrid {
display: flex;
gap: 16px;
padding: 0 30px 6px;
align-items: stretch;
}
.cc-topcell {
flex: 1 1 0;
min-width: 0;
border: 1px solid var(--fp-stroke);
border-radius: 10px;
padding: 16px 20px;
}
/* ── pg-h with nav inline ── */
.pg-h {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.pg-ht { flex: 1; min-width: 0; }
.pg-nav {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.pg-i {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--fp-green);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pg-i svg { width: 15px; height: 15px; }
.pg-l {
font-family: "Playfair Display", serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--fp-green);
}
.pg-s {
font-size: 10px;
color: var(--fp-muted);
letter-spacing: 1px;
margin-top: 1px;
}
/* ── pg-c card body ── */
.pg-c {
background: var(--fp-parchment);
border: 1px solid var(--fp-stroke);
border-radius: 10px;
padding: 14px 18px;
}
/* ── carousel track ── */
.cv { overflow: hidden; }
.ct {
display: flex;
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ci {
min-width: 100%;
text-align: center;
padding: 4px 2px;
}
.cm {
font-family: "Playfair Display", serif;
font-size: 17px;
font-weight: 600;
color: var(--fp-ink);
letter-spacing: .5px;
display: flex;
align-items: center;
justify-content: center;
min-height: 26px;
}
.cd {
font-size: 11px;
color: var(--fp-muted);
margin-top: 5px;
line-height: 1.5;
}
/* ── inline race slider ── */
.rs-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.rs-lbl {
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--fp-muted);
}
.rs-mid {
display: flex;
align-items: center;
gap: 8px;
}
.rs-val {
flex: 1;
font-family: "Playfair Display", serif;
font-size: 14px;
font-weight: 600;
color: var(--fp-ink);
letter-spacing: .3px;
text-align: center;
}
/* ── dots ── */
.cds {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 6px;
flex-wrap: wrap;
}
.cds.sm { gap: 3px; margin-top: 3px; }
.cdt {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--fp-stroke);
transition: all .2s;
border: none;
padding: 0;
cursor: pointer;
}
.cdt.on { background: var(--fp-green); transform: scale(1.3); }
/* ── buttons ── */
.ca {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--fp-stroke);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--fp-muted);
transition: all .2s;
flex-shrink: 0;
}
.ca:hover { border-color: var(--fp-green); color: var(--fp-green); }
.ca svg { width: 13px; height: 13px; }
.ca.sm {
width: 22px;
height: 22px;
}
.ca.sm svg { width: 11px; height: 11px; }
/* ── sep ── */
.cc-sep {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 40px;
}
.cc-sep .arr { color: var(--fp-lt); font-size: 13px; }
.cc-sep .rl { flex: 1; height: 1px; background: var(--fp-stroke); }
/* ── stacked sections ── */
.cc-stack {
display: flex;
flex-direction: column;
gap: 0;
}
.sl-p {
padding: 0 30px 16px;
}
/* ── scrollbar ── */
.cc-root ::-webkit-scrollbar { width: 4px; }
.cc-root ::-webkit-scrollbar-track { background: transparent; }
.cc-root ::-webkit-scrollbar-thumb { background: var(--fp-lt); border-radius: 10px; }
@media (max-width: 600px) {
.cc-topgrid { flex-direction: column; }
.fc-zone { grid-template-columns: 1fr; }
}
</style>
[/html]
[sign] [/sign]
