[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>Leonard Kennedy</h2>
<br>
<span>• <strong>ПОЛ: </strong>мужской</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>31.12.1994</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>ХХ.ХХ.ХХХХ</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>30 лет</span>
<br>
<span style="text-align: left !important">• <strong>МЕСТО РАБОТЫ: </strong>адвокатская контора "Regalis Legal"</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/46/771826.jpg"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong>Honkai: Star Rail — Phainon</span>
<span>• <strong>РОСТ/ВЕС: </strong>ХХХ/ХХ • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>пепельный/голубые</span><br>
<span> <sup><s>Я хорош, я прекрасен, у меня белые волосы и голубые глаза</s></sup><br>
Высокий атлетичного телосложения мужчина с вечно растрёпанными серебристо-белыми волосами и ярко-голубыми глазами. На шее выделяется татуировка в виде Солнца, выполненная золотыми чернилами, которую он не редко прячет за высоким воротом или чем-то еще.</span>
<span></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> ~35 000 лет</span><br>
<span>• <strong>ПОЛ:</strong> мужской</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Орднунг (Ангелы)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> 3-е Светило</span>
<br>
<span>• <strong>ВНЕШНОСТЬ: </strong>Honkai: Star Rail — Phainon</span>
</div>
<img src="https://upforme.ru/uploads/001c/89/a0/46/105065.jpg" class="avatar" style="object-fit: cover;">
</div>
<span> <sup><s>Я хорош, я прекрасен, у меня золотистые волосы и золотые глаза</s></sup><br>
Сотканный из золотого сияния человекоподобный стройный образ, скрытый доспехами полночно-черного цвета. Светлые волосы, золотистые глаза, словно источают свет, спокойное лицо. За спиной два крыла из тонких белоснежных крыльев, за головой ореол сложной формы, светящийся мягким золотистым светом.<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>
Для тех, кто не нуждается в исцелении, действие этой способности работает иным образом: она пробуждает в них отзывчивость и глубокую заботу о ближних. Возникает внутреннее желание поддерживать и помогать, что способствует созданию атмосферы милосердия и взаимопонимания в окружающем мире.<br><br>
<b><u>Ограничения/откаты:</u></b><br>
Ограничения способности указывают на её временный характер — исцеление и облегчение, которые она приносит, не носят постоянного и необратимого эффекта, а служат поддержкой в критические моменты, помогая человеку справиться с тяжкими переживаниями и вернуть уверенность в себе, но ненадолго, лишь на два часа в сутки. Радиус активации: 10 метров. Объектом может быть как один человек, так и несколько (до 20 человек), но в обмен на количество сокращается как время действия способности, так и эффект который она вызывает, ровно распределяясь в зависимости от количества существ. Один будет чувствовать себя великолепно, забудет о боли и тревогах, десять будут чувствовать себя лучше, физическая боль будет вызывать меньше дискомфорта, станет приглушенной, потеряет остроту, ментальное здоровье пусть и не придет в полный покой, но переживания будут меньше обращать на себя внимание, на максимальном же количестве людей влияние будет подобно слабому обезболивающему, лишь снизив дискомфорт от боли физической и мук моральных терзаний. Для активации нужно находиться в радиусе десяти метров от Рафаила, но способен концентрировать силу на одном объекте, стоит лишь прикоснуться или сфокусировать взгляд.
<br><br>
При попытке превысить лимит способности, испытывает физическое и моральное истощение, использование способности приводит к огромным затратам энергии, может привести к головным болям, быстрой утомляемости, вызвать стресс или тревожность. Повторное использование возможно лишь на следующие сутки, после восстановления запаса энергии и морального восстановления.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><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]
