[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.anketa {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 690px;
background: Black;
background-image: url('https://forumstatic.ru/files/001c/89/a0/35701.jpg');
background-repeat: repeat-y;
background-position: top;
}
.infoblock {
display: flex;
background-color: #9ab9c0;
flex-direction: column;
flex-wrap: nowrap;
margin: -1em 6.05em 0 1.5em;
width: 650px;
padding-top: 1em;
}
.history {
display: block;
background-color: #a5c0c7;
border: 10px double #9ab9c0;
padding: 1em 1em;
margin: 8px;
font: 1.1em 'Roboto Condensed';
color: #15485a;
}
.shapka {
display: flex;
flex-wrap: nowrap;
position: relative;
left: 0;
width: 650px;
height: auto;
margin: 10px 0 10px 6px !important;
z-index: 999;
padding: 4em 1em 0 1em;
}
.avatar {
width: 200px;
height: 250px;
padding: 1em 1em 0.8em 0.5em;
}
h1 {
font: 2em 'Roboto Condensed' !important;
font-weight: 600 !important;
text-align: left;
text-transform: uppercase;
padding: 0.3em 0.3em 0 0.3em;
color: #15485a;
border-top: 1px solid #00848d;
border-left: 1px solid #00848d;
}
h2 {
font: 1.5em 'Roboto Condensed' !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-align: right;
text-transform: uppercase;
color: #00848d;
border-bottom: 1px solid #00848d;
border-right: 1px solid #00848d;
padding-bottom: 0.2em;
padding-right: 0.5em;
}
h3 {
font: 1.3em 'Roboto Condensed' !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
color: #00848d;
border-bottom: 1px solid #00848d;
padding-left: 1.5em;
}
span {
font: 1.1em 'Roboto Condensed' !important;
text-align: left;
color: #15485a;
text-align: justify;
padding-right: 1em;
}
strong {
font: 1.1em 'Roboto Condensed' !important;
text-align: left;
color: #15485a!important;
font-weight: 600 !important;
}
body {font-family: Arial;}
/* Стиль вкладок */
.tab {
display: flex;
flex-direction: column;
width: auto;
background-color: #9ab9c0;
}
/* Стиль кнопок внутри вкладок */
.tab button {
background-color: #a5c0c7;
border: none;
cursor: pointer;
width: 56px;
height: 50%;
max-height: 150px;
font-size: 1em;
font: 1.3em 'Roboto Condensed' !important;
color: #15485a;
font-weight: 600 !important;
writing-mode: vertical-rl;
}
/* Изменение цвета фона кнопок при наведении курсора мыши */
.tab button:hover {
background-color: transparent;
text-align: center;
color: #00848d;
}
/* Создание активного/текущего класса связей вкладок */
.tab button.active {
background-color: #9ab9c0;
}
/* Стиль содержимого вкладки */
.tabcontent {
width: 100%;
height: auto;
display: none;
background-color: #9ab9c0;
padding: 6px 6px;
}
.tabprofile {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #a5c0c7;
border: 10px double #9ab9c0;
padding-left: 1em;
}
.profile {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.parametry {
display: flex;
flex-direction: column;
line-height: 1.1;
width: 100%;
}
/* Основной контейнер слайдера */
.slider {
width: 200px; /* Фиксированная ширина слайдера */
height: 250px; /* Фиксированная ширина слайдера */
overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
position: relative; /* Необходимо для правильного позиционирования кнопок */
}
/* Контейнер всех слайдов */
.slides {
display: flex; /* Размещаем слайды в одну линию */
transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */
}
/* Каждый отдельный слайд */
.slide {
width: 100%; /* Занимает всю ширину контейнера */
flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
}
/* Стили для изображений */
.slide img {
object-fit: cover;
width: 200px;
height: 250px;
display: block; /* Убираем пробелы вокруг изображений */
}
/* Кнопки «Назад» и «Вперёд» */
.prev, .next {
position: absolute; /* Позволяет располагать кнопки поверх слайдов */
top: 50%; /* Размещаем по вертикали по центру */
transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */
background: rgba(0, 0, 0, 0.3); /* Полупрозрачный фон кнопок */
color: rgba(255, 255, 255, 0.5); /* Белый цвет текста */
border: none; /* Убираем границы */
padding: 9.1em 3px; /* Отступы внутри кнопки */
cursor: pointer; /* Изменяем курсор на указатель */
font-size: 1em; /* Размер шрифта */
font-weight: normal; /* Делаем текст жирным */
z-index: 2; /* Размещаем кнопки выше всех элементов */
}
/* Позиционируем кнопку «Назад» слева */
.prev {
left: 0px;
}
/* Позиционируем кнопку «Вперёд» справа */
.next {
right: 0px;
}
</style>
</head>
<body>
<div class="anketa">
<div class="shapka">
<div id="Man" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br> <h1>Мирт Хэксфолл</h1>
<h2>Myrth Hexfall</h2>
<br>
<span>• <strong>ПОЛ: </strong>гендерофлюид</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>01.04.1998</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>15.05.2017</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>27 лет</span>
<br>
<span>• <strong>МЕСТО РАБОТЫ: </strong>Брим-Ривер</span>
<span style="text-align: left !important">• <strong>ДОЛЖНОСТЬ: </strong>современный популярный художник.</span>
</div>
<div class="avatar">
<div class="slider">
<!-- Контейнер, который содержит все слайды -->
<div class="slides">
<div class="slide"><img src="https://forumstatic.ru/files/001c/89/a0/48078.jpg?v=1"></div>
<div class="slide"><img src="https://forumstatic.ru/files/001c/89/a0/45237.jpg?v=1"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong>Final Fantasy XIV — Hythlodaeus | Hypnosis Mic — Jakurai Jinguji</span>
<span>• <strong>РОСТ/ВЕС: </strong>165|179см / 48|74кг • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>фиолетовые / голубые</span><br>
<span>Волосы фиолетовые и длинные, вид чуть неформальный. Что парень, что девушка из Мирт в стиле своем немного бесполые — оверсайз на оверсайзе, тяжелая обувь и железная отмаза “Я художник — я так вижу”. Девушка худая, глаза большие, чуть навыкате, превращают взгляд в слегка “не от мира сего”, парень — миловидный, с тонкими чертами лица и таким же чуть отсутствующим или мечтательным взглядом.
<br>Часто волосы взъерошены, на носу — темные очки, в огромных карманах — скетчбук и несколько карандашей.
<br> <br></span>
</div>
</div>
<div id="Hton" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br><h1>Мидьярра</h1>
<h2>демон 8-го круга</h2>
<br>
<span>• <strong>ВОЗРАСТ:</strong> 527 лет</span><br>
<span>• <strong>ПОЛ:</strong> неопределен</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Конвентум (Демоны)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> падший ангел, ныне — саргат</span>
<br>
<span>• <strong>ВНЕШНОСТЬ:</strong> Original Art</span>
</div>
<img src="https://forumstatic.ru/files/001c/89/a0/23838.jpg?v=1" class="avatar" style="object-fit: cover;">
</div>
<span>Неоформленный и перетекающий из одного в другой облик, в постоянных цветных разводах. Раньше было что-то эфирное в этом дымке и и мимолетности переломлений форм.
Теперь, без сил — тяжелое, медленное, стекающее и мучительно вязкое.
<details><summary>В бытие ангелом</summary><img src="https://i.ibb.co/PzZv3Tn6/ef63c7944c4b00de3cf5e3f31f6ee8a8.jpg" style="max-width: 530px;"></details>
<details><summary>В полную силу</summary><img src="https://i.ibb.co/XfZKdSLc/In-Collage-20250912-113607607.jpg" style="max-width: 530px;"></details>
<details><summary>Сейчас, без сил</summary><img src="https://i.ibb.co/WWhq5xtz/In-Collage-20250912-113637373.jpg" style="max-width: 530px;"></details>
<br> <br></span>
</div>
</div>
<div class="tab">
<button class="tablinks" onclick="openProfile(event, 'Man')"id="defaultOpen">ОБОЛОЧКА</button>
<button class="tablinks" onclick="openProfile(event, 'Hton')">ХТОНЬ</button>
</div>
</div>
<div class="infoblock">
<div class="history">
<h3>Способность: Метаморфизм</h3><br>
<details><summary>В полной силе</summary>
<b>Описание:</b> <br>
Изменение роста, фигуры, пола, голоса, черт лица, длины и цвета волос в любой другой.
Свое человеческое тело может трансформировать только в рамках людской расы (никаких отрощенных рогов, хвостов, крыльев и т.п.)
Может менять массу тела и рост, но создать больше мышц/роста/веса — тратится много внутренней силы. Убрать — надо "развеять" энергию, в себя её обратно забрать, увы, уже невозможно. Соответственно старается не превращаться в кого-то крупнее изначально выданного тела, поскольку это требует отдых и пополнения сил сил после. А если все же приходится, "набранную" массу тратит очень медленно.
<br><br><b>Ограничения/откаты:</b>
Максимум полных превращений за день — 5
Изменения неполные, одного параметра, только черт лица, в зависимости от масштаба изменения — от 5 (смена роста и фигуры, всех черт лица) до 20 (ну совсем уж мелочей, вроде оттенка глаз).
Скорость изменения зависит от “объема работ” от пяти секунд до двух часов на полную трансформацию.
При привышении лимитов — боль во всем теле, утомленность, повышенная температура. Для восстановления может понадобится пару дней сна.</details>
<br><u>Огрызки, доступные сейчас:</u> СМЕНА ПОЛА<br>
<br>
<b>Описание:</b> <br>
На данный момент, из-за недавнего падения и потери почти всех своих сил, а, так же, достаточно голодной диеты, Мирт почти не может использовать свою силу.<br>
Все что доступно — медленная смена пола, занимающая порядка двадцати минут перестройки тела в физической муке. Черты лица меняются мало, лишь чуть смягчаясь или, наоборот, утяжеляясь. Основная трансформация касается фигуры и роста.
<br><br><b>Ограничения/откаты:</b><br>
Вся жизнь — ограничение.<br>
Меняться может не более двух раз в день.<br>
Меняется сложно, долго и грустно, сам процесс перестройки, который раньше давался легко, теперь неприятный и муторный, отнимает когнитивные и физические силы, и сопровождается приступами боли в костях и мышцах.
Очень устает после превращения, если опять нормально не подпитывалась — может лежать пластом часами.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><br>
Родился случайно, случайно пожил. Потом пал. Ну, хоть это не случайно сделал, а на этом все достижения и того…
<br><br>Он даже разочарованием особо не был, сложно им быть, когда тобой особо и не чаруются. И ничего не ждут.
<br><br>Появился неоформленным сгустком без четких границ. И, пока рядом, два ангела создавали возлюбленное свое дитя, из большой и светлой любви, его родители, напротив — отпочковали нового ангела от Потока скорее для того, чтобы закрыть будущую кадровую недостаточность среди астерионов. Ну и вроде как положено иметь хоть что-то вот такое, неопределенное как и их взаимное чувство, но совместное. В особенности, когда вы вместе не проводите досуг, вместе не работаете, и вообще уже вместе не особо друг друга видите веками.
<br><br>Столетия и смены эпох человечества пронесутся для Яра даже как-то слишком быстро. Люди, оказывается, создания весьма забавные! И тогда и потом, всегда будет искренне любопытно узнавать про их методы созидания, и вглядываться в разумы и мысли, заигрываться в их поделки больше, чем в сам процесс добычи душ.
<br><br>Поток позволял порой забывать, что все откуда-то берется, раз приливает в энергетические жилы силой. Так что можно выполнять план на души и контракты, держась самого минимума лишь бы обратно не отправили. А вот растирать восторженно новый яркий пигмент между пальцев – целый час. Гулять по только выстраивающемуся городу, и слушать жизнь. Быть неприкаянным, бестолковым, бесцельным и добродушным, с редкой любовью на бесплатные мелкие чудеса для людей. Не чтобы получить потом их силу, а просто потому что, кажется, это забавно — смотреть на светлеющее от счастья и удивления лицо.
<br><br>Стать так себе, в сущности, ангелом. Предлагать авантюры и эксперементировать, с трудом выжидать официоз и долгие разговоры о великом будущем. Быть отчаянно неуместным везде, среди строгих людей, среди строгих ангелов, среди строгого шага времени и стройных иерархий, структур, и всего упорядоченного. Быть чуждым и к хаосу, слишком гневливому, расчетливому и эгоистичному. Разрушительному.
<br><br>Вообще не понимать “зачем и что и где”, кажется, с самого рождения.
Не научили, не воспитали, не рассказали как надо, решив что сам собой поймет. И пришлось придумать это “зачем”, определиться “где” больше нравится, догадаться до того, “что” правильно. И так и не найти это “как надо”.
<br><br>Иногда его брали за шкирку, намекая что выполнять минимум и только минимум — кажется, лень, а не работа на общее благо. Приходилось сочинять что-то быстро, прям сейчас.
<br><br>Селена была вот таким контрактом – состряпанным на скорую руку, лишь бы отметить галочкой, что все готово, отстаньте от меня, а? Спешным, всего на три года. Не идеальным — уж очень та металась между желанием тепла и света и свободолюбивым эгоизмом, становясь все большим бунтарем и индивидуалистом.
<br><br>И особенным.
<br><br>Любить человека – неидеального, вздорного, с сотней идей на уме, с холстами изображающими саму жизнь такую же неидеальную, как и их хозяйка. Но очень… настоящую. Быть любимым и любимой в ответ — Селену всегда веселила непостоянность обликов Яра. И с ужасом понимать, что натворил этой поспешностью. Глотать каждую секунду. Даже уже и не пытаться повлиять на эту душу.
<br><br>Прожить свои семь сотен лет как в тумане, а три года — как целую вечность. И получить по итогу трепещущую в ладонях душу, неровную, неправильную, для всех ангелов вокруг – брак, грязь в Потоке, будущий диссонанс. Развей в ничто, и забудь о неудачном контракте и контрактнике.
<br><br>И поглотить её самому, как делают это демоны. Чтобы стать хоть в последний раз единым с любимой.
<br><br>Суд назвал это извращением. Демоническим подобием. И отрезал от Потока, скинув из рядов ангелов с такой головокружительной быстротой, что Яр и опомнится не успел, как оказался среди Нигиля, без надежной пуповины из светлых сил, в самом центре клоаки из вечно пожирающих друг друга новорожденных демонов.
<br><br>Душа Селены, поглощенная лично, внутри грела силой. Наверное, если бы не она, и если бы его не нашел Мефистофель, заинтересовавшийся такой оказией — светлый, но падший, да еще и из-за любви, как же это интересно!.. Яр бы погиб.
<br><br>В новом воплощении Мирт, с ироничной фамилией от сотрудника Бюро, пришлось привыкать к новому статусу и соскребать остатки сил. Официально, по документам, новое тело — женское. Никогда не задумывался о внешнем виде в бытие ангелом, но то, что раньше давалось просто, как дышать — менять облики, голоса и вид, стало чем-то трудным и медленным, безжалостно урезанным. Друзья и знакомые отодвинулись. Мир стал очень одиноким местом.
<br><br>А поглощать души людей, всех людей, не Селены — до сих пор вызывает что-то вроде рвотного рефлекса.
<br><br>Существует на минимуме сил. Контрактников едва ли может склонить ко злу, и питается впроголодь светлыми в общем-то душами.
Много депрессует, уходит в творчество с головой от обоих миров и их проблем.
<br><br>На данный момент, с помощью изначальной легенды, соцсетей, таланта и любви к созиданию, Мирт Хэксфолл стала одной из самых популярных современных художниц в инстаграме, с достаточно редкими публичными появлениями, но безумной продуктивностью в количестве контента, арт-инсталляций и новых работ. Потому что если прекратить созидать – придется вынырнуть из эскапизма и все же столкнуться с новым и очень жутким реальным миром.<br>
</div> </div>
</div>
<script>
function openProfile(evt, Face) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(Face).style.display = "block";
evt.currentTarget.className += " active";
}
//Делаем активной одну вкладку
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Находим контейнер со слайдами
const slides = document.querySelector('.slides');
// Определяем количество слайдов
const slideCount = document.querySelectorAll('.slide').length;
// Находим кнопки «Назад» и «Вперёд»
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let currentIndex = 0; // Переменная для хранения текущего слайда
// Функция смены слайдов
function goToSlide(index) {
if (index < 0) {
index = slideCount - 1; // Если нажали «Назад» на первом слайде, переходим на последний
} else if (index >= slideCount) {
index = 0; // Если нажали «Вперёд» на последнем слайде, переходим на первый
}
currentIndex = index; // Запоминаем текущий слайд
slides.style.transform = `translateX(${-index * 100}%)`; // Сдвигаем контейнер со слайдами
}
// Добавляем обработчик клика для кнопки «Назад»
prevButton.addEventListener('click', () => {
goToSlide(currentIndex - 1);
});
// Добавляем обработчик клика для кнопки «Вперёд»
nextButton.addEventListener('click', () => {
goToSlide(currentIndex + 1);
});
// Устанавливаем первый активный слайд при загрузке страницы
goToSlide(0);
</script>
</body>
</html>[/html]
