[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>Beatrice Richter</h2>
<br>
<span>• <strong>ПОЛ: </strong>женский</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>28.09.1998</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>28.09.2018</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>27 лет</span>
<br>
<span>• <strong>МЕСТО РАБОТЫ: </strong> бар "Far from Heaven"</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/53/741267.png"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong>VA-11 Hall-A — Julianne Stingray</span>
<span>• <strong>РОСТ/ВЕС: </strong>170/ХХ • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>фиолетовые (окр. черные)/карие</span><br>
<span>Стройная девушка среднего роста (около 170 см). Формами не выделяется. Волосы чёрные, очень длинные, обычно выкрашены в тёмно-фиолетовый и собраны в два хвоста, чтобы не мешали. И карие глаза во взгляде которых читается "Мне этот мир абсолютно понятен", а иногда "Чем в этот раз удивишь? Смертный".<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> 36 660</span><br>
<span>• <strong>ПОЛ:</strong> женский</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Конвентум (Демоны)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> Лорд 2-го круга </span>
<br>
<span>• <strong>ВНЕШНОСТЬ:</strong> Arknights — Ho'olheyak</span>
</div>
<img src="https://upforme.ru/uploads/001c/89/a0/53/538970.png" class="avatar" style="object-fit: cover;">
</div>
<span>На протяжении многих тысяч лет Лилит регулярно меняла облики, но с некоторых пор поняла бессмысленность выглядеть как "страшная тумбочка", как большинство хтоней. Гораздо лучше выглядеть как что-нибудь привлекательное, как что-то, что не представляет угрозы, поэтому Лилит выглядит как девушка ростом около 170 см и весьма привлекательными формами, не очень длинными серыми волосами и ярко-бирюзовыми глазами. Помимо прочего во внешности сильно выделяются небольшие крылья на голове, чешуйчатый хвост, длиной в почти два её роста, острые клыки и непропорционально длинный язык.<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>Способность: Sweet Dreams</h3><br>
<b>Описание:</b><br>
С помощью визуального контакта и/или голоса Лилит способна побуждать людей действовать изо всех сил, чтобы достигнуть своей цели. Подвох в том, что попавший под действие способности пытается достичь не своей мечты, нет. Он начинает отчаянно желать того, о чём думал в момент применения способности, даже если это просто кофе из кофейни через дорогу, которая закрылась 5 лет назад. Неспособность достигнуть того, чего отчаянно желаешь, способна буквально сжечь изнутри. Вот тут-то и появляется Лилит с предложением реализации желания в обмен на, всего лишь, душу.<br><br>
<b>Ограничения/откаты:</b><br>
<u>Ограничения:</u> Достаточно закрыть глаза и заткнуть уши так, чтобы ничего не слышать, тогда вы избежите воздействия способности.<br>
Действует способность массово непосредственно в области видимости и/или слышимости.<br>
Применение ограничено одним разом в сутки, но даже после этого появляется небольшое нервное возбуждение.<br>
Способность не действует постоянно, она лишь запускает процесс, но для поддержания и доведения желания до крайних стадий требуется регулярное обновление, для этой цели достаточно лишь услышать голос Лилит, а ещё лучше провести с ней диалог. Поэтому после попадания под влияние может пройти не один год, прежде чем неисполнимость "желания" начнёт сильно действовать на нервы и сознание.<br><br>
<u>Откаты:</u> При попытке превысить лимит может мгновенно дойти до полноценного нервного срыва. При регулярном применении последствия накапливаются, поэтому каждый день способность лучше не применять.<br>
Повторное использование на том же человеке возможно спустя 72 часа.<br>
Использование способности на другом человеке - спустя 24 часа.<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>
С удовольствием поддержит разговор в баре, смешивая вам очередной коктейль, однако производит впечатление холодной и даже немного отстранённой, "уставшей от жизни" если позволите. Но если вы попробуйте узнать поближе и вам удастся её заинтересовать, Беатрис откроется для вас совершенно с другой стороны. В компании хороших знакомых она жизнерадостная и весёлая.
Довольно часто курит.
</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]
Отредактировано Beatrice Richter (5 Ноя 2025 14:47:20)
