[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>Tony Montoya</h2>
<br>
<span>• <strong>ПОЛ: </strong>мужской</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>24.04.1984</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>ХХ.ХХ.ХХХХ</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>41 год</span>
<br>
<span style="text-align: left !important">• <strong>МЕСТО РАБОТЫ: </strong>Городская Ассамблея</span>
<span style="text-align: left !important" title="Вас не слышно. Ноу. Не слышно! Ал-ло-о-о-о! Ай, сука, не хочу.
В смысле – работать? Зачем – работать? Воистину звучите, как бомжи.
А раз не работаю – то паразит. А раз паразит – то депутат.">• <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/4/329915.jpg"></div>
</div>
<!-- Кнопки управления слайдером -->
<button class="prev">❮</button> <!-- Кнопка «Назад» -->
<button class="next">❯</button> <!-- Кнопка «Вперёд» -->
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong> Naruto | Madara Uchiha</span>
<span>• <strong>РОСТ/ВЕС: </strong>193/96 • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>брюнет/тёмно-карие</span><br>
<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 title="Миллионер. Мильёнер, говорю! Ничего не симулирую! По годикам.
И по IQ. Да и в талии широк. Один к одному всё.">• <strong>ВОЗРАСТ:</strong> ~1 900 000 лет</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/4/307557.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><u>Активация:</u> Сознательное усилие воли.
<br><u>Радиус:</u> 5 метров.
<br><u>Эффект:</u> Все люди в радиусе действия на время активации обретают сверхуверенность. Дети требуют на праздничные тортики лишние свечи, потому что и их задуют! Не умеющие парковаться задом — лихо и сурово сводят брови, решаясь на манёвр. Гуманитарии обретают уверенность пользоваться сомнительными финансовыми услугами по инвестированию пенсионных накоплений. Технари рассказывают о разнице амфибрахиев и анапестов. Чувак, собиравшийся вальнут жену последние три года за множественные измены — наконец покупает пильные диски для болгарки. Нерешительная толстуха во славу похудения проходит мимо любимой кафешки с баристой-красавчиком. Полицейский лишь с косвенными уликами и недостаточной доказательной базой для суда всаживает всю обойму в подозреваемого, так мир будет лучше ж. Достаточно подойти к Тони на пять метров и ваша жизнь станет... ну... как если бы вы не боялись осуждения, социальных запретов и вас не сдерживали травмы детства от мамок с папками. Зе бест на который способен человек происходит. Ну или нет. <br><br>
<b>Ограничения/откаты:</b>
<br><u>Длительность эффекта:</u> Эффект длится ограниченное время (5-10 минут). После деактивации способности или выхода из радиуса действия неестественная уверенность у людей постепенно сходит на нет.
<br><u>Перезарядка (Откат):</u> После использования способности Тони не может активировать её снова в течение некоторого времени (30-60 минут), так как это требует концентрации и энергии.
Утомление: Активная и продолжительная эксплуатация способности приводит к сильной умственной и физической усталости.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><br>
Что случилось, что случилось… Возможно, Нигиль чихнул. Вот так и появились. Все. Всё. Больше ничего не знаю про своё рождение. Загадочно. Так-то.
<br><br>Был ли я благоразумен? Разумеется, не побоюсь этого словосочетания (хотя там больше двух слов, но математика для задротов) – я отец здравого смысла, эталон осознанности и любой психолог может использовать меня как референс проработанности! И это – всего лишь как ми-ни-мум. Все жрут – и я жру! Да, мы здесь (там?) все собрались, чтобы жрать. А вы? Вот как. А, нет, погодите, больше похоже на стадный инстинкт, чем на здравомыслие… Кто вам разрешил меня оскорблять, спрашивается?.. Ну-к не умничайте.
<br><br>Чморить и уплетать. Ведомо (ах-ха) мне, что повторяюсь, но, знаете ли, это как минимум два миллиона лет моей жизни! Два! Ладно бы один! Смог я или нет? Смог, я в себе не сомневаюсь и имею доказательную базу: мне так больше нравится. И вы не думайте. Вот с тех пор люблю бестрепетность. Отвагу, выходит. Чтобы прямо дерзостно было! Глаза боятся — руки-крюки. Один в поле не воин, а на диване — да. Акеллы пусть промахиваются, а ты — норм волчара. В общем-то, помимо изобретения народных мудростей, моё увлечение — героизм. Вещь потрясающая. Кого? Самоё бытие. Сади понты, умри, и пусть Боги смеются! Декоративная экспрессивность подобной души — обомлеть Армагеддон. Тон? Что — тон? Кто тут урчит? Ну, может, негромко и сдержанно — кто-то и ур-ур-ур. Отстаньте.
<br><br>Что дальше? Семь бед — один ответ. Ответ звучит следующим образом — даже если вы уже догадались, терпите! — всегда кто-то виноват. Может я и лучший. Так, это утверждение. Я — лучший. Итого. В случае, когда ты — прелесть (ну что вы, засмущали), всё равно остальные могут быть хреновыми. И будут. Однозначно. Мир не идеален. Кто-то где-то сызмурдится накосепорить во вселенских масштабах. Неудобства вам создаст. Поэтому. Гениев знаете? Довольно простая формула гениальности: если кто-то что-то сделал так же, как сделал бы я — это практически гениально. Итак. Азариэль и Сефирион — вжух. Вжух и Поток. «За» — обеими руками.
<br><br>Не понимаете, что ли? Упрощу. Революция — это значит предложить этику, сопоставимую или превышающую по духовности, но, главное, реализуемости, той, которая царит в данный момент. Зафиксируем. Сильно позже Потока появится фраза Руссо: "Человек по своей натуре добр". Очень справедливо. Будь соотношение не один к ста, давно бы перебили друг друга. Положительных эмоций из душ можно извлечь точно не меньше, чем отрицательных, и, ввиду усложнения социальной иерархии и введения в обиход правил гражданского общежития промеж людей. Манипулятивно-пропагандистский — в первом приближении, безусловно, поразмыслив получше, он вовсе не ложен — лозунг: "Ко всеобщему благу". Никогда не перестанет работать. А кто перестанет работать, если Поток шуршит? Правильно. Серафим Тириэль. О себе в третьем лице тут, не теряйтесь.
<br><br>Амбиции и некомпетентность — стройматериалы трындеца. Каждый кабздец-мудрец из них состоит на 99%. 1% оставляем для славной задницы, переводящей очередного щенявого в разряд — всё же и милашек. Н-ну, н-на. Бюро — суровая необходимость. Все эти грозные щеглы, любящие поиграть в анархию и святую упоротость — чего-то не догоняют про Землю-Матушку. Прихлебатели зла там эти демоны или же благоустроенные полки за державу твердостоятельных и ко ополчению дерзостных ангелов. Не суть важно, в действительности. Все — просто столовые приборы. Сервируют блюда, что не про их честь. Можно, пожалуй, выразиться и с чистейшей лингвистической осторожностью... Но я не буду. Хотя, конечно, как существо воплощающее благоразумность — мы с этого начали — младших я лелею. Да, не хило. Разделяют ли мои мировоззренческие установки остальные участники трапезы? Которые? Коллеги-серафимы? Да я их не спрашивал. Вслушайтесь. "Второй Договор". Слышите? Второй. С первого раза молодая хтонь — ничего не поняла, значит. Вот и думайте сами.
<br><br>
<b>Краткая биография человеческого воплощения.</b>
<br>24.04.1984 — родился (теоретически, по документам).
<br>2001 — окончил Лицей Сен-Луи-де-Гонзаг, Париж (очень фальшивый аттестат, йей!).
<br>2004 — окончил Сорбонну, получил бакалавра права. (Фактически сам — отсюда и далее).
<br>2007 — окончил Университет Брим-Ривер, магистр права.
<br>2019 — избран депутатом Городской Ассамблеи Брим-Ривер от социал-демократов.
<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]
Отредактировано Tony Montoya (18 Сен 2025 14:12:04)
