и стучит пулеметом дождь

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>АНКЕТА ПЕРСОНАЖА by Taro</title>
<style>
/* ========== RESET & БАЗА ========== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #e8e8e8;
font-family: 'Anime Ace', 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'cursive', monospace;
font-size: 1.1rem;
color: #111;
padding: 2rem 1rem;
line-height: 1.45;
}

/* контейнер анкеты — белый лист с жирной обводкой, без скруглений */
.character-sheet {
max-width: 1200px;
margin: 0 auto;
background: #ffffff;
border: 4px solid #1a1a1a;
box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.08);
padding: 2rem 1.8rem 2rem 1.8rem;
transition: all 0.2s;
border-radius: 0; /* явно */
}

/* цитата */
.quote-block {
text-align: right;
margin-bottom: 2rem;
border-bottom: 3px solid #3a3a3a;
padding-bottom: 0.8rem;
}
.quote-text {
font-family: 'Anime Ace', 'Comic Neue', 'Comic Sans MS', cursive;
font-size: 0.9rem;
font-style: italic;
color: #2c2c2c;
background: #fafaf5;
display: inline-block;
padding: 0.5rem 1rem;
border-left: 5px solid #7e7e7e;
border-radius: 0;
}

/* ========== ВКЛАДКИ (TABS) ========== */
.tab-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
rgba(0,0,0,0.1) 0px,
rgba(0,0,0,0.1) 2px,
transparent 2px,
transparent 8px
);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}

.tab-button:hover::before {
opacity: 1;
}
.tabs-nav {
display: flex;
flex-wrap: wrap;
border-bottom: 4px solid #1e1e1e;
margin-bottom: 2rem;
gap: 0.2rem;
}
.tab-button {
background: #e9e9e9;
border: 2px solid #b0b0b0;
border-bottom: none;
font-family: 'Anime Ace', 'Comic Neue', 'Comic Sans MS', monospace;
font-weight: bold;
font-size: 1.1rem;
padding: 0.8rem 1.2rem;
cursor: pointer;
transition: 0.2s;
color: #1a1a1a;
letter-spacing: 0.5px;
border-radius: 0; /* убираем скругления */
margin-right: 4px;
text-transform: uppercase;
position: relative;
}
.tab-button:hover {
background: #d0d0d0;
transform: translateY(-2px);
}
.tab-button.active {
background: #1a1a1a;
color: white;
border-color: #1a1a1a;
box-shadow: 0 -2px 0 #1a1a1a;
}
.tab-content {
display: none;
animation: fadeIn 0.25s ease;
}
.tab-content.active-content {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px);}
to { opacity: 1; transform: translateY(0);}
}

/* общие карточки-блоки */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.8rem;
margin-bottom: 2rem;
}

/* НОВЫЙ КОНТЕЙНЕР ДЛЯ ГРУППЫ КАРТОЧЕК С РАВНОМЕРНЫМ РАСТЯЖЕНИЕМ */
.cards-stretch-row {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: space-between;
margin-bottom: 2rem;
}

/* КАРТОЧКИ, КОТОРЫЕ ЗАНИМАЮТ ШИРИНУ ПО КОНТЕНТУ, НО ГРУППА РАСТЯГИВАЕТ РАССТОЯНИЯ */
.cards-stretch-row .info-card {
flex: 0 0 auto; /* не растягивается, ширина по содержимому */
width: auto; /* авто-ширина */
min-width: 170px; /* минимальная ширина для читаемости, можно убрать если нужно строго по контенту */
max-width: 100%;
margin-top: 0; /* убираем лишний марджин */
}

/* Для адаптивности: на маленьких экранах карточки занимают доступную ширину, но не ломают макет */
@media (max-width: 680px) {
.cards-stretch-row {
gap: 1rem;
justify-content: center;
}
.cards-stretch-row .info-card {
flex: 1 1 auto;
min-width: 140px;
}
}

.info-card {
border: 3px solid #2c2c2c;
background: #ffffff;
padding: 1.3rem 1rem;
box-shadow: 4px 4px 0 #cbcbcb;
border-radius: 0;
transition: all 0.1s ease;
text-align: justify;
}
.info-card h3 {
font-size: 1.3rem;
border-left: 6px solid #2c2c2c;
padding-left: 0.7rem;
margin-bottom: 1rem;
font-weight: bold;
letter-spacing: -0.2px;
text-transform: uppercase;
}
.field-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 0.8rem;
border-bottom: 2px dashed #d4d4d4;
padding-bottom: 0.5rem;
}
.field-label {
font-weight: bold;
width: 130px;
flex-shrink: 0;
color: #2b2b2b;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
.field-value {
color: #3d3d3d;
font-family: monospace;
font-size: 0.95rem;
}
.placeholder-text {
color: #6f6f6f;
font-style: normal;
background: #f7f7f7;
padding: 0.1rem 0.3rem;
border-radius: 0;
}
hr {
margin: 1rem 0;
border: none;
border-top: 3px dotted #ababab;
}
.full-width {
margin-top: 1rem;
}
.img-placeholder {
background: #eaeaea;
border: 3px solid #3a3a3a;
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
color: #5a5a5a;
font-weight: bold;
text-align: center;
flex-direction: column;
font-size: 0.9rem;
padding: 1rem;
border-radius: 0;
}
.flex-between {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.bio-section {
margin-bottom: 2rem;
}
.badge {
background: #ececec;
padding: 0.2rem 0.6rem;
border-left: 5px solid #3a3a3a;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 0;
}
button, .tab-button {
background: none;
}
.mini-table {
width: 100%;
border-collapse: collapse;
}
.mini-table td {
padding: 0.4rem 0;
border-bottom: 2px dotted #ccc;
}
.clan-placeholder {
width: 60px;
height: 60px;
background: repeating-linear-gradient(45deg, #aaa, #aaa 8px, #ccc 8px, #ccc 16px);
border-radius: 0; /* квадратный герб */
margin: 0 auto 0.5rem auto;
border: 2px solid #333;
}
footer {
margin-top: 2rem;
text-align: center;
font-size: 0.7rem;
border-top: 3px solid #ccc;
padding-top: 1rem;
color: #5e5e5e;
}
@media (max-width: 680px) {
.character-sheet {
padding: 1.2rem;
}
.tab-button {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.field-label {
width: 100%;
margin-bottom: 0.2rem;
}
}
/* шрифт AnimeAce */
@font-face {
font-family: 'Anime Ace';
src: local('Anime Ace'), local('Comic Neue'), local('Comic Sans MS');
font-weight: normal;
font-style: normal;
}
/* убираем все возможные скругления */
.tab-button, .info-card, .img-placeholder, .badge, .clan-placeholder, .quote-text, .character-sheet {
border-radius: 0 !important;
}

/* дополнительно для изображений в карточках */
.info-card img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.info-card .field-value img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="character-sheet">

<div class="quote-block">
<div class="quote-text">
«Take down all the mirrors in my house. I hate my nose, eyes and my mouth.»
</div>
</div>

<div class="tabs-nav">
<button class="tab-button active" data-tab="tab1">ОСНОВНАЯ ИНФОРМАЦИЯ</button>
<button class="tab-button" data-tab="tab2">ВНЕШНОСТЬ</button>
<button class="tab-button" data-tab="tab3">ХАРАКТЕР</button>
<button class="tab-button" data-tab="tab4">БИОГРАФИЯ</button>
<button class="tab-button" data-tab="tab5">ТЕХНИЧЕСКИЕ ВОПРОСЫ</button>
</div>

<div id="tab1" class="tab-content active-content">

<div class="info-card full-width" style="text-align: center; margin-bottom: 1.8rem;">
<img src="https://upforme.ru/uploads/001a/74/14/449/318053.jpg" style="max-height: 300px; width: auto; margin: 0 auto;" alt="персонаж">
</div>


<div class="cards-stretch-row">

<div class="info-card">
<h3>ИМЯ</h3>
<div class="field-value placeholder-text"> 洋次 / Yōji / Йоджи </div>
</div>

<div class="info-card">
<h3>РАНГ</h3>
<div class="field-value placeholder-text">GENIN</div>
</div>

<div class="info-card">
<h3>ВОЗРАСТ</h3>
<div class="field-value placeholder-text">16 y.o. / 18.05.612</div>
</div>

<div class="info-card">
<h3>ПОЛ</h3>
<div class="field-value placeholder-text">MALE</div>
</div>

<div class="info-card">
<h3>ПРОЗВИЩЕ</h3>
<div class="field-value placeholder-text">名もなき洋次 / Namonaki Yōji / Безымянный Йоджи </div>
</div>

<div class="info-card">
<h3>ПРИНАДЛЕЖНОСТЬ</h3>
<div class="field-value" style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
<img src="https://upforme.ru/uploads/001a/74/14/449/801725.png" style="max-height: 50px;" alt="символ1">
<img src="https://upforme.ru/uploads/001a/74/14/449/133628.png" style="max-height: 50px;" alt="символ2">
</div>
</div>
</div>

</div>

<div id="tab2" class="tab-content">
<div class="cards-stretch-row">

<div class="info-card">
<h3>РОСТ</h3>
<div class="field-value placeholder-text">183 СМ</div>
</div>

<div class="info-card">
<h3>ВЕС</h3>
<div class="field-value placeholder-text">81 КГ</div>
</div>

<div class="info-card">
<h3>ЦВЕТ ГЛАЗ</h3>
<div class="field-value placeholder-text">КРАСНЫЕ</div>
</div>

<div class="info-card">
<h3>ЦВЕТ ВОЛОС</h3>
<div class="field-value placeholder-text">СВЕТЛЫЕ</div>
</div>

<div class="info-card">
<h3>ЦВЕТ КОЖИ</h3>
<div class="field-value placeholder-text">СВЕТЛЫЙ</div>
</div>

<div class="info-card">
<h3>ПРОТЕКТОР</h3>
<div class="field-value placeholder-text">ПРЯЖКА РЕМНЯ</div>
</div>
</div>
<div class="flex-between" style="gap: 2rem;">
<div style="flex: 2.3;">
<div class="info-card" style="height: 100%;">
<h3>ОБРАЗ И СТИЛЬ</h3>
<div class="field-row"><span class="field-label">ОТЛИЧИТЕЛЬНЫЕ ЧЕРТЫ:</span><span class="field-value placeholder-text">ШРАМЫ НА ГОЛОВЕ, ПИРСИНГ В УШАХ И НОСУ</span></div>
<div><span class="field-label">ОБЩЕЕ ОПИСАНИЕ:</span>
<div class="placeholder-text" style="margin-top: 6px;">Йоджи высок, широкоплеч, с жилистым телосложением и напряжённо-прямой осанкой.

Светлые волосы он стрижёт почти налысо, настолько коротко, что на висках и затылке они превращаются в жёсткую щетину. Узкие, глубоко посаженные глаза имеют красный оттенок — мрачный, тяжёлый взгляд, который делает его лицо суровым даже тогда, когда он не испытывает никаких эмоций.

Черты лица угловатые, словно вырубленные из не самого податливого камня. Чёткая линия подбородка, высокие скулы, выразительные брови, которые в моменты сосредоточенности сходятся к переносице. Но главная деталь, приковывающая взгляд, — это шрамы. Через весь лоб и над левым глазом проходит глубокий Х-образный рубец, оставленный, видимо, обломком балки или арматуры во время разрушения Такигакуре. Он пересекается с более мелкими, старыми шрамами, которые тянутся от виска к скуле, — следствие детских драк и неудачных миссий. Вся эта сеть повреждений делает лицо асимметричным, немного сбитым, но не лишённым странной, жёсткой выразительности. Когда Йоджи говорит или — что случается редко — скалится в усмешке, становится заметен щербатый рот: пару зубов были выбиты во время той же катастрофы, и в Аме их так и не восстановили.

Одежду Йоджи выдерживает в строгой монохромной гамме: поверх чёрной майки без рукавов он носит чёрную куртку. На левом рукаве — единственная деталь, выбивающаяся из мрачной лаконичности: нашивка в виде поросёнка с крыльями. Откуда она взялась, Намонаки не объясняет, но никогда не снимает эту куртку даже в тёплую погоду. Широкие чёрные брюки подхвачены массивным ремнём с пряжкой-протектором.
</div>
</div>
</div>
</div>
<div style="flex: 1;">
<div class="info-card" style="text-align: center; padding: 0; margin: 0;">
<img src="https://upforme.ru/uploads/001a/74/14/449/535562.jpg" style="max-height: 400px; display: block; margin: 0 auto; width: auto;" alt="образ">
</div>
</div>
</div>
</div>

<div id="tab3" class="tab-content">
<div class="info-grid">
<div class="info-card">
<h3>ПСИХОЛОГИЧЕСКИЙ ПРОФИЛЬ</h3>
<div class="field-row"><span class="field-label">ХАРАКТЕРНЫЕ ЧЕРТЫ:</span><span class="field-value">УГРЮМОСТЬ, САМОБИЧЕВАНИЕ, УПРЯМСТВО</span></div>
<div class="field-row"><span class="field-label">ХОББИ:</span><span class="field-value">КАЛЛИГРАФИЯ, ШИТЬЁ, НОЧЬ</span></div>
<div class="field-row"><span class="field-label">ЛЮБИТ:</span><span class="field-value">КРЕПКИЙ ЧАЙ, ГОРЬКИЙ ШОКОЛАД</span></div>
<div class="field-row"><span class="field-label">НЕ ЛЮБИТ:</span><span class="field-value">ЗЕРКАЛА, СЛАДКОЕ, ДОЖДЬ</span></div>
</div>
<div class="info-card">
<h3>МОТИВАЦИЯ И МИРОВОЗЗРЕНИЕ</h3>
<div class="field-row"><span class="field-label">СТРАНА / ДЕРЕВНЯ:</span><span class="field-value placeholder-text">Такигакуре для него — запретная тема. Он не говорит о ней, если его спрашивают, отвечает односложно: «её больше нет». К Аме относится как к месту вынужденного изгнания. Он не чувствует принадлежности к этой деревне, не доверяет местным, ненавидит бесконечный дождь, вопринимая его как отражение собственного внутреннего состояния — мрачного, холодного и беспросветного.</span></div>
<div class="field-row"><span class="field-label">РЕМЕСЛО НИНДЗЯ:</span><span class="field-value placeholder-text">Он ненавидит быть шиноби. Для него это не честь, не долг и не путь к силе — это проклятие, которое отняло всё. Он попытается спасти сокомандников, но никогда не поставит на кон свою жизнь. </span></div>
</div>
</div>
<div class="info-card full-width">
<h3>ОПИСАНИЕ ХАРАКТЕРА</h3>
<div class="placeholder-text" style="line-height: 1.5;">
Человек, который после катастрофы так и не смог собрать себя заново. Он функционирует, выполняет задачи, но внутри него — пустота, заполненная самоотрицанием и виной. Все зеркала в его доме завешаны, потому что он не выносит вид собственного лица. Он избегает близости, потому что уверен, что приносит несчастье. Если кто-то из новых знакомых проявляет настойчивое дружелюбие, Йоджи начинает вести себя нарочито грубо или холодно, чтобы оттолкнуть человека «во благо». Он считает, что избавляет их от будущей боли. При этом внутри он может испытывать острую, почти физическую тоску по той теплоте, которую сам же и пресекает. Он продолжает заниматься каллиграфией и шитьём втайне, как последнюю связь с теми, кого любил, — и ненавидит себя за то, что не может от этого отказаться.
</div>
</div>
</div>

<div id="tab4" class="tab-content">
<div class="info-card full-width">
<h3>НАСЛЕДИЕ</h3>
<div class="field-row"><span class="field-label">НАСЛЕДИЕ ТАКИГАКУРЕ</span></div>
</div>

<div class="info-card full-width">
<h3>ХРОНОЛОГИЯ ЖИЗНИ</h3>
<div class="bio-section">
<div class="badge">РАННИЕ ГОДЫ (612–618)</div>
<div class="placeholder-text" style="margin: 0.6rem 0 1rem 0;">Его отец был шиноби среднего звена в Такигакуре — человек, вечно пропадавший на миссиях и приносивший домой лишь усталость да скромное жалованье. Мать, обычная женщина, работала в прачечной. Они жили на окраине деревни, в тесном доме, и каждая монета была на счету.

Будучи ребенком, Йоджи был настоящим ураганом. Он компенсировал бедность семьи дерзостью: лазил по запретным местам, воровал фрукты с рынков и постоянно участвовал в драках. Односельчане знали его как «шебутного Йоджи», а родители не знали, как унять его буйный нрав.

Отчаявшись найти управу на сына, мать, которая гордилась старинным искусством каллиграфии, заставляла его часами выводить иероглифы тушью. Поначалу Йоджи ненавидел это занятие, считая его девчачим и скучным, но со временем музыка скольжения кисти по бумаге начала его гипнотизировать. Это был единственный момент в детстве, когда он мог усидеть на месте.</div>
<div class="badge">АКАДЕМИЯ ШИНОБИ (618–625)</div>
<div class="placeholder-text" style="margin: 0.6rem 0 1rem 0;">В 6 лет Йоджи поступил в Академию Такигакуре. Учился он посредственно: у него была хорошая физическая форма и острый язык, но напрочь отсутствовала дисциплина. Он был задирой, из-за чего сверстники его сторонились. Учителя считали его трудным, но не безнадежным.

Единственным человеком, который не испугался его репутации, была девочка по имени Ренка. Скромная и терпеливая, она, к удивлению всего класса, решила во что бы то ни стало подружиться с плохим мальчишкой. Она видела в нем не злость, а одиночество и усталость от предвзятого отношения.

Их дружба стала для Йоджи переломным моментом. Ренка была терпелива к его вспышкам гнева и научила его шитью. Оказалось, что каллиграфия, привитая матерью, дала ему хорошую мелкую моторику и терпение для кропотливой работы. Йоджи быстро освоил починку формы и вышивку, но страшно стыдился этого «не мужского» увлечения, скрывая свое мастерство от одноклассников.

В 13 лет они выпустились из Академии, успевшно освободившись от пут, и, как это часто бывает, попали в одну команду под руководством опытного джонина.</div>
<div class="badge">ВЫПУСК И СТАНОВЛЕНИЕ ГЕНИНОМ (625-628)</div>
<div class="placeholder-text" style="margin: 0.6rem 0 1rem 0;">Карьера шиноби сама по себе не привлекала Йоджи. Он видел в этом ремесле лишь продолжение серой жизни своего отца: опасность и гроши. Однако Ренка горела этой профессией. Она мечтала стать элитным куноичи, чтобы защищать Такигакуре, и ради нее Йоджи остался в строю.

Три года, с 13 до 16 лет, они провели бок о бок. Йоджи выполнял миссии без энтузиазма, но с железной надежностью, прикрывая спину подруги.

Ко дню, когда им исполнилось по 16 лет, Йоджи наконец осознал, что его чувства к Ренке давно переросли дружеские. Он купил небольшой сверток с цветами и заколкой для волос и решил признаться.</div>

<div class="badge">НАПАДЕНИЕ СЕМИХВОСТОГО (628)</div>
<div class="placeholder-text" style="margin: 0.6rem 0 1rem 0;">
Йоджи собирался пригласить Ренку на вечернюю прогулку к водопаду, но планы были прерваны ревом, от которого содрогнулась земля.

«Чакра, которая не принадлежит человеку...»

Семихвостый — Чомей, обрушился на Такигакуре.

Деревня была стерта в считанные минуты. Йоджи помнит лишь взрывную волну, обломки зданий и крики. Он пытался добраться до дома Ренки и своего собственного жилища, но стихия была быстрее.

Он пришел в себя под завалами спустя несколько часов. Отделался он «легко» — множественные переломы ребер, травма позвоночника и глубокая рваная рана ноги, которая позже стала причиной легкой хромоты в холодную погоду. Очнулся он уже не в родной деревне. Йоджи перевезли в Амегакуре — ближайшую крупную деревню, готовую принимать беженцев.

Его семья погибла полностью: отец, мать, бабушки и дедушки. Ренка тоже не выжила. Из всего рода остался лишь дальний родственник — то ли двоюродный дядя, то ли двоюродный дед по отцовской линии, пожилой мужчина, которого Йоджи видел всего пару раз в жизни. Этот родственник, суровый и немногословный мужчина, появился в палате лишь однажды. Он положил на тумбочку ключи от дешевой съемной квартиры в нижнем уровне города и конверт с деньгами, сказав:
«Я приду за тобой, когда придет время. А пока не путайся под ногами».

Он ушел и больше не появлялся.</div>
<div class="badge">ТЕКУЩИЙ ПЕРИОД (629)</div>
<div class="placeholder-text">Три месяца Йоджи провел в госпиталях Амегакуре. Физические травмы заживали медленно, но душевные — не зажили вовсе. Он был раздавлен. Чувство вины выжившего пожирало его изнутри. Ему казалось, что он предал всех, оставшись в живых. Заколка, которую он так и не успел подарить Ренке, лежала в кармане его старой, прожженной куртки.

Перед ним встал выбор: остаться никем в городе беженцев или попытаться выжить. Денег родственника хватало только на еду на пару месяцев. Единственной профессией, которую он знал, было ремесло шиноби.

Когда он смог ходить, он прошел ускоренную переподготовку в Академии Амегакуре. Чужой стиль боя, чужая иерархия, холодное и подозрительное отношение местных. Его знания оценили формально, и спустя два месяца изнурительной «переквалификации» Йоджи был официально зачислен в ряды генинов Амегакуре.</div>
</div>
</div>
</div>

<div id="tab5" class="tab-content">
<div class="info-grid">
<div class="info-card">
<h3>АКТИВНОСТЬ</h3>
<div class="field-row"><span class="field-label">ЧАСТОТА ПОСТОВ:</span><span class="field-value placeholder-text">1–2 РАЗА В НЕДЕЛЮ</span></div>
</div>
<div class="info-card">
<h3>СВЯЗЬ С ВАМИ</h3>
<div class="field-row"><span class="field-label">TELEGRAM:</span><span class="field-value placeholder-text">@maxcuso</span></div>
</div>
</div>
</div>

</div>

function switchTab(tabId) {
contents.forEach(content => {
content.classList.remove('active-content');
});
const activeContent = document.getElementById(tabId);
if(activeContent) activeContent.classList.add('active-content');

buttons.forEach(btn => {
btn.classList.remove('active');
if(btn.getAttribute('data-tab') === tabId) {
btn.classList.add('active');
}
});
}

buttons.forEach(btn => {
btn.addEventListener('click', (e) => {
const tabId = btn.getAttribute('data-tab');
if(tabId) switchTab(tabId);
});
});

const defaultActive = document.querySelector('.tab-button.active');
if(defaultActive) {
const defaultTabId = defaultActive.getAttribute('data-tab');
if(defaultTabId) switchTab(defaultTabId);
} else {
switchTab('tab1');
}
})();
</script>
</body>
</html>[/html]

Отредактировано Yoji (Сегодня 07:31)

+13

NARUTO: Exile

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

и стучит пулеметом дождь

Сообщений 1 страница 1 из 1

Поделиться1Сегодня 07:26