[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>Costilia Albre</h2>
<br>
<span>• <strong>ПОЛ: </strong>женский</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>23.05.1998</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>ХХ.ХХ.ХХХХ</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>27 лет</span>
<br>
<span>• <strong>МЕСТО РАБОТЫ: </strong>Бюро судмедэкспертизы</span>
<span>• <strong>ДОЛЖНОСТЬ: </strong>судебный антрополог</span>
</div>
<div class="avatar">
<div class="slider">
<!-- Контейнер, который содержит все слайды -->
<div class="slides">
<div class="slide"><img src="https://upforme.ru/uploads/001c/89/a0/47/971152.png"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong>Honkai: Star Rail | Cyrene</span>
<span>• <strong>РОСТ/ВЕС: </strong>ХХХ/ХХ • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>розовые/голубые</span><br>
<span>Кости — образ утончённой хрупкости, в котором соединяются холодная ясность и наигранная игривость.
Волосы близкие к розовому, с едва уловимым белым отблеском; они струятся мягкими локонами, обрамляя лицо и подчёркивая тонкие черты. Кожа бледная, почти фарфоровая, что создаёт контраст с глазами — прохладными, ясными, цвета неба или бледного аметиста под углом, в которых скрывается тихая решимость.<br><br>
В чертах читается аристократическая выправка не в смысле фамильных корней, а как привычка держать себя: даже в улыбке слышится выдержка, а во взгляде — привычка оценивать мир с лёгким, почти благородным скептицизмом.
Худая, но крепкая: длинные конечности, сухие линии плеч и запястий, мышцы, знакомые с дисциплиной тренировок и долгими пробежками. Это тело, которое умеет работать и выдерживать нагрузку, не теряя женственности, — немного как инструмент, отполированный для точной задачи.<br><br>
Одежда — вторая кожа. Чаще всего это практичная рабочая форма — лаконичная, сдержанная, со множеством карманов и молний, или же байкерский аутфит: тёмная, гладкая кожа, прошитая и подсвеченная матовыми заклёпками, с идеально сидящей курткой и сапогами, которые знают пропитанные ветром дороги. Иногда может сменить черное на мягкие цвета, если есть настроение, но ей больше нравится контраст розовых, зефирных волос и байкерских приколов.
Запах — тоже часть образа, сложная и многослойная: сначала слышен лёгкий дымок дорогого табака — не резкий, а тёплый, благородный, как старое виски в бокале; за ним раскрывается тёмная, чуть горьковатая нота шоколада, оставляющая остаточный уют; и весь ансамбль сверху окутан тонким шлейфом духов — ненавязчивым, едва уловимым, с пудровыми и сладкими акцентами, чтобы не заглушать, а подчеркнуть.<br> <br></span>
</div>
</div>
<div id="Hton" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br><h1>Страж Анафиил</h1>
<h2>Воплотитель баланса</h2>
<br>
<span>• <strong>ВОЗРАСТ:</strong> ~20500 лет</span><br>
<span>• <strong>ПОЛ:</strong> мужской</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Орднунг (Ангелы)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> 9-е светило — Умеренность</span>
<br>
<span>• <strong>ВНЕШНОСТЬ:</strong> original art</span>
</div>
<img src="https://upforme.ru/uploads/001c/89/a0/47/212913.png" class="avatar" style="object-fit: cover;">
</div>
<span> Схоже с человеческим обликом, но не обладает полом. Черная, идеально гладкая кожа, как обсидиан, ткань, сотканная из энергии, с переливами звезд и неба. Глаз нет, только золотые линии, идущие вдоль лица, губами не шевелит — голос будто звучит внутри существ, которые должны услышать Анафиила.<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>
<b>Описание:</b> Активная. Филя может видеть невидимыми «нити», которые в обычном понимании людей называется судьбой. Каждая нить – это событие, которое влияет на живого существа и выводит его из равновесия. Например, автомобильная авария или сильная сора с женой, после которой человек станет наркоманом – именно важные моменты с весом на баланс Анафиил может узнать, и, тем самым, попробовать повлиять. Конечно, то, что уже свершилось, изменить нельзя.<br><br>
<b>Ограничения/откаты:</b> Способность не работает мгновенно, а требует времени подготовки 3-5 секунд, в течение которого Феля может быть прерван или, если потеряет концентрацию перед или после, прервется.<br>
Во время активации видит целую кучу нитей, которые обозначают разные события, из-за чего теряет возможность нормально ориентироваться в пространстве. Также требуется время, чтобы найти нужную – от 2 минут (время зависит от конкретного существа, ибо у него может быть мало в жизни подобных событий, а может быть много).<br>
Способность показывается именно то, что влияет на равновесие жизни существа, поэтому просто просмотреть все «будущее» не получится.<br>
Чтобы активировать способность, требуется находиться с нужным существом в радиусе 5 метров. Может активировать способность только на одном существе, максимум в сутки 5 существ, по времени на поиск до 10 минут. Если в течение этого времени Филя не сможет найти нужную нить, он начинает испытывать сильную головную боль и мозг начинает перегружаться, выкидывая его. Повторно активировать способность на ком-то он может только через 24 часа, даже если в самом начале концентрации прервался.<br>
Может также посмотреть то, что уже свершилось. Например, по какой причине человек умер, и его равновесие жизни просто оборвалось – работает также с останками, которым не старше 5 лет.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><br>
Анафиил не был ни светом, ни тенью, а тем серым тоном, который появляется между ними, когда спор утихает и остаётся только счёт утрат. Его крылья не блистали, как у многих братьев и сестре, они были матовыми, как остывшая сталь, и в них не было стремления побеждать — было желание удержать. Он видел монету полностью: обе её лица — не противоположности, а звенья одного обречённого круга. Оттого другие ангелы смотрели с холодным презрением: как уважать того, кто видит в демонах не мерзость, а неизбежность? Демоны же подозревали в спокойствии Фили слабость.
<br><br>
Когда войны между светом и тьмой разоряли мир, начиная с сёл и концов дорог, Анафиил был одним из первых, кто счёл необходимым говорить о счёте. Он поддержал идею первого договора не ради компромисса ради компромисса, а ради жестких, неудобных границ: мер радикальных и суровых, которые могли бы сдержать ярость обеих сторон и спасти жизни тех, кто вовсе не просил быть полем брани. Его слишком жестокие методы не поддержали, и договор стал бумагой для вытирания ног. А может не только ног.<br>
И вот, когда братья его, ведомые яростью и правдой, начали бойню с демоном, Анафиил сделал выбор, который для многих остался невозможным: он встал на сторону того демона. Не потому, что полюбил тьму, а потому что увидел в ней расчёт, что сберегает человеческие жизни сильнее, чем слепая доблесть ангелов. Тех немногих людей, которых можно было спасти, тот демон считал ценнее бесконечной мести.<br>
За это, имя Анафиила крошилось в уста обвинения: предатель, убийца собственных братьев. Они кричали, что он повернулся спиной к свету и выбрал тьму. Сам же он не признавался в картине предательства. В своих глазах оставался стражем измерения: тот, кто сделал тяжёлый выбор ради меньшего зла, кто предпочёл счёт жертв гордому, но пустому триумфу.<br>
Стоял между обвинениями и сожалением, между криком и тишиной, и ждал — не от желания увидеть падение, а от немалой надежды. Чтобы кто-нибудь, наконец, понял цену границ. Лицо его было сурово, но не жестоко; в словах — не оправдание, вызов: понять, прежде чем взывать к суду.
<br><br>
<p>«Не присягаюсь ни свету, ни тьме. Я присягаюсь балансу, сколь бы он не был хрупок, и потому могу выглядеть предателем для тех, кто любит жертвовать ради победы.»</p>
Он сидел в тишине ожидания, готовый отречься от Потока и пасть — не из нужды в искуплении, а, чтобы снять с себя ту яркость, что делала поступки видимыми и удобными для обвинений. Но вместо приговора подошёл совет и принес весточку: над миром снова работали перья и пергаменты, второй договор рождался заново. Бюро перелопатило устои, вписало в свод новые, жёсткие ограничения — те самые, которые, когда‑то предлагал он, и которые тогда сочли ненужными. Мир в это поверил медленно, но поверил: печати стали значить больше, чем клятвы на слове.
Анафиила оправдали — не только формально, но и по сути. Движение умов, которое он, когда‑то, едва сумел запустить, начало менять расчёты, мир. Ангелы стали считать не только правду и славу, но и цену человеческой крови. Конечно, осталась горстка тех, кто не простил: им удобнее жить с однозначностью, даже если она кровава. Анафиил же давно научился не питать иллюзий о всеобщем признании.
<br><br>
Эти испытания сделали его ещё холоднее к общему пиру ангелов. Отстранённость не была презрением — это была необходимая скорлупа для того, кто хочет взвешивать. Продолжал смотреть на обе расы не как на актёров в пьесе добра и зла, а как на элементы одной механики, которую нельзя любить по отдельности, если хочешь сохранить её работу. Это позволило быть честным: не примыкать, не внушать доверия, не требовать служения.
<br><br>
<p>Равновесие, как и прежде, требовало одиночества.</p>
И, возможно, именно поэтому его часто зовет сотрудничать Бюро. Просят дать формулу, поставить печать, или просто присутствовать, чтобы решение не наклонилось в сторону слепой веры. Он приходит бесшумно, касается весов и уходит — оставляя после себя порядок, который не всем нравится, но который, как ни странно, ещё позволяет миру дышать.
<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]
Отредактировано Costilia Albre (22 Окт 2025 12:00:14)
