[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;
}
.infoblock_man {
display: flex;
background-color: #9ab9c0;
flex-direction: column;
flex-wrap: nowrap;
margin: 5em 6.05em 0 1.5em;
width: 650px;
}
.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';
text-align: left;
color: #15485a;
text-align: justify;
padding-right: 1em;
}
strong {
font: 1.1em 'Roboto Condensed';
text-align: left;
color: #15485a!important;
font-weight: 600 !important;
}
body {font-family: Arial;}
.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="infoblock_man">
<div class="history"><div class="profile">
<div class="parametry">
<br> <h1>Тайлер Хикс</h1>
<h2>Tyler Hicks</h2>
<br>
<span>• <strong>ПОЛ: </strong>мужской</span>
<span>• <strong>РАСА: </strong>полукровка [Ангел/Человек]</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>17.03.2001, 24 года</span>
<span>• <strong>ВОЗРАСТ ВИЗУАЛЬНЫЙ: </strong>19 лет</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://upforme.ru/uploads/001c/89/a0/56/439556.png"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div></div>
<div class="history">
• <strong>ВНЕШНОСТЬ: </strong>original art<br>
<span>• <strong>РОСТ/ВЕС: </strong>178/70</span>
<span>• <strong>ЦВЕТ ВОЛОС/ГЛАЗ:</strong></span>русые/голубые<br><br>
У Тайлера светлые, пшеничного цвета волосы, средней длины. Глаза голубые, ресницы длинные, пушистые. Тонкий нос, аккуратные, ровно очерченные губы. Большие, лазурного оттенка глаза. Уши проколоты, но серьги носит по настроению.
Взгляд чаще хмурый, от чего иногда кажется высокомерным.<br>
В одежде не особо привередлив, но предпочтения всегда отдает светлым оттенкам.<br>
У Тайлера спортивная, привыкшая к тренировкам фигура, но выраженной мускулатуры, под одеждой почти не видно.
</div>
<div class="history">
<h3>Способность: «Гамельнский крысолов»</h3><br>
<b>Описание:</b> <br>
Издавая звуки разной тональности, способен влиять на окружающих подобно транквилизатору, постепенно успокаивая, усмиряя гнев и агрессию, в отдельных случаях способен усыпить. Для более четкого контроля способности и необходимого тона использует бамбуковую флейту. Без флейты эффект способности ненаправленный, распределяется на всех в радиусе четырех метров, что делает ее значительно слабее.
<br><br>
<b>Ограничения/откаты:</b> <br>
В полной мере начинает работать в радиусе четырех метров. Чем дальше и тише звук, тем слабее реакция. Если целей несколько, то эффект делится между ними и, соответственно, будет слабее. На данный момент эффект ощутим не более чем на двух целях. Без использования флейты эффект распределяется на всех, кто рядом, соответственно ослабевая и становясь незаметным в людном месте. Как только звучание обрывается, эффект постепенно спадает, способен продержаться от 5 до 10 минут, в зависимости от восприимчивости цели и того, насколько близко она находилась.
При использовании более 10 минут начинается тошнота и головокружение. Свыше 15 минут начинают лопаться сосуды, может начаться кровотечение из носа. Свыше 20 минут вероятна потеря сознания и существенный вред здоровью.
</div>
<div class="history">
<h3>История персонажа</h3><br>
<i>Все началось с Джули.</i><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>
<i>В чем-то Тайлер все же очень похож на Джули.</i>
<br>
</div> </div></div></div></div>
</div><script>
// Находим контейнер со слайдами
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]
Отредактировано Tyler Hicks (8 Ноя 2025 16:49:38)
