[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>Mark Ingram</h2>
<br>
<span>• <strong>ПОЛ: </strong>мужской</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>02.11.1988</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>05.03.2010</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>37 лет</span>
<br>
<span style="text-align: left !important">• <strong>МЕСТО РАБОТЫ: </strong>мафия "Le Milieu"</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://upforme.ru/uploads/001c/89/a0/54/t73992.jpg"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong>original art</span>
<span>• <strong>РОСТ/ВЕС: </strong>189/93 • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>брюнет/карий с бордовым оттенком</span><br>
<span>Высокий темноволосый мужчина среднего телосложения, но с проглядывающей сквозь одежду развитой мускулатурой. С виду — парень с обложки глянца, где прическа, на первый взгляд, кажется небрежной, а на деле каждая прядь уложена ровно так, как хочет обладатель. Лицо правильной формы с тонко очерченными скулами и карими глазами портит разве что тонкий шрам, прорезающий бровь, веко и выходящий за его пределы. Но это лишь дело вкуса.
<br><br>
Из одежды предпочитает хорошо сидящие по фигуре костюмы, рубашки, водолазки — все, что подчеркнуло бы его любовь к упорядоченности и регламенту. На ладонях часто можно заметить обрезанные на пальцах черные кожаные перчатки или кольца/перстни из черненного серебра.</span>
<span></span>
</div>
</div>
<div id="Hton" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br><h1>Сефирион</h1>
<h3>Министр порядка и закона</h3>
<br>
<span>• <strong>ВОЗРАСТ:</strong> >2 млн. лет</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://upforme.ru/uploads/001c/89/a0/54/t416562.jpg" 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><u>Описание:</u></b><br>
Активная. Суть способности заключается в использовании абсолютного гипноза, затрагивающего все пять органов чувств: осязание, обоняние, зрение, слух и вкус. Выбранная жертва будет чувствовать и видеть то, что захочет Сефирион. Похоже на наложение иллюзии с полным погружением. С помощью этой способности обладатель показывает нужные ему картины, с помощью которых вызывает подходящие эмоции, дабы вразумить и наставить на истинный путь (тот, который сам таковым считает, исходя из своей благодетели). Чаще всего это ужасающие и бередящие душу вещи и последствия неверно принятых решений.<br><br>
<b><u>Ограничения/откаты:</u></b><br>
Сефирион может воздействовать сразу на все органы чувств или выборочно, но для каждого должен использовать подходящие инструменты. Для зрения — зрительный контакт, для слуха — голос, осязание — прикосновение, обоняние — запах, вкус — разделить с жертвой еду, питье или воспользоваться иным способом. Сила погружения зависит от желания обладателя и восприимчивости другого существа. Использование способности для всех пяти органов чувств в человеческой оболочке ограничено от четырех до пяти минут и только одной жертвой, так как требует большого расхода сил и концентрации, чтобы держать иллюзию полностью. Если затронуто 1-3 органов восприятия, то может влиять одновременно на пять человек, но не настолько существенно. Накладывать иллюзию на один из органов восприятия может раз в сутки, на все — раз в трое.
<br><br>
Откат после использования способности проявляется в сильной слабости, головокружении, носовом кровотечении и возможных галлюцинациях и кошмарах, неизменно мучающих по ночам.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><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]
Отредактировано Mark Ingram (9 Ноя 2025 21:53:43)
