Ждет в ночи свою девицу змей

Морошка побывала во многих уголках Чернолесья, от гор до болот. Она общительна и заинтересована в хороших, дружеских отношениях, однако это не исключает и неприязни.
Готова к любым взаимодействиям как "на словах", так и в отыгрыше.

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: Arial, sans-serif;
}

/* Стиль для горизонтальных вкладок */
.main-tabs {
display: flex;
background-color: #366c78;
border-bottom: 2px solid #ccc;
}

.main-tab {
border: 1px solid #aaa79f;
margin-right: 5px;
margin: 5px;
padding: 10px 20px;
border-radius: 7px;
background-color: #1c1918;
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
color: #aaa79f;
}

.main-tab:hover {
background-color: #ddd;
}

.main-tabs {
display: flex;
background-color: #352e2e;
border-bottom: 2px solid #ccc;
font-family: Balkara, Verdana, Tahoma, Arial, Sans-Serif;
}

.main-tab.active {
background-color: #620606;
font-weight: bold;
font-family: Balkara, Verdana, Tahoma, Arial, Sans-Serif;
}

.tab-content {
display: none;
padding: 15px;
border-radius: 5px solid #620606;
background: #1c1918;
}

/* Контейнер для содержимого вкладки */
.tab-content {
display: none;
padding: 15px;
border-left: 1px solid #620606;
border-right: 1px solid #620606;
border-bottom: 1px solid #62060
}

.tab-content.active {
display: block;
}

/* Стиль для подвкладок — тоже горизонтальные */
.subtabs {
display: flex; /* горизонтально */
gap:10px; /* расстояние между подвкладками */
margin-top:10px;
border-bottom:1px solid #620606; /* разделитель */
padding-bottom:10px;
}

.subtab {
padding: 8px 12px;
background-color: #333;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
font-family: Balkara, Verdana, Tahoma, Arial, Sans-Serif;
}

.subtab:hover {
background-color:#d0d0d0;
}

/* Контент для каждой подвкладки внутри вкладки */
.subcontent {
display: none;
padding: 15px;
border-top: 1px solid #620606;
border-left: 1px solid #620606;
border-right: 1px solid #620606;
border-bottom: 1px solid #62060;
color: #ffffff; /* замените на нужный вам цвет */
justify-content: center; /* горизонтальное выравнивание по центру */
align-items: center; /* вертикальное выравнивание по центру */
background: #aaa79f;
color: #000000;
}

.tab-content.active {
display: block;
}

/*Свое изображение в каждую кнопку*/

.subtab[data-subtab="sub-vikul"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/188632.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-veresk"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/511032.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-dyagil"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/955569.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-siren"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/680803.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-krapiva"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/597154.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-ostroskal"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/343319.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-morana"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/465733.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-helga"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/858716.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-mogevelnik"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/251060.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-klukva"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/947342.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-zveroboy"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/84049.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-nikto"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/754459.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-lihar"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/175397.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-krigovnok"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/70496.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-bes"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/149972.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-ragna"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/378952.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-merk"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/215073.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-voronika"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/527098.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

.subtab[data-subtab="sub-chernika"] {
background-image: url('https://upforme.ru/uploads/001b/a1/c4/16/869566.png');
background-size: cover;
background-position: center;
width: 110px;
height: 110px;
}

/* Активная подвкладка */
.subtab.active {;
font-weight: bold;
transform: scale(1.1);
}

.subcontent.active {
display:block;
}
</style>
</head>
<body>

<div class="main-tabs" id="mainTabs">
<button class="main-tab active" data-tab="moe">МОЕ</button>
<button class="main-tab" data-tab="staya-yaroboga">ЯРОБОЖЬИ</button>
<button class="main-tab" data-tab="sumerechiky">СУМЕРЕЧНИКИ</button>
<button class="main-tab" data-tab="chernousty">ЧЕРНОУСТЫ</button>
<button class="main-tab" data-tab="korhuny">КОРШУНЫ</button>
<button class="main-tab" data-tab="odinochky">ОДИНОЧКИ</button>
<button class="main-tab" data-tab="pogibshie">ПОГИБШИЕ</button>
</div>

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

<div class="subtabs" data-parent="moe">
<div class="subtab" data-subtab="sub-vikul"></div>
<div class="subtab" data-subtab="sub-veresk"></div>
<div class="subtab" data-subtab="sub-dyagil"></div>
<div class="subtab" data-subtab="sub-siren"></div>
<div class="subtab" data-subtab="sub-krapiva"></div>
</div>

<div id='sub-vikul' class='subcontent'>
<p>СИВИРЬ (ВИКУЛ)<br>
ведун • самец • 7 лет<br>бывший брат древних<br>супруг, одиночка, жив</p>

<p>Любовь, уважение, тепло, нежность, доверие.</p>

<p>Волк, с которым нас связывает столько всего, что, пожалуй, не хватит и вечера, чтобы рассказать эту историю от начала до наших дней. Кому-то она покажется трагичной, кому-то кошмарной, кто-то посмеется над моей наивностью, другие позлорадствуют, потому что на злого черноуста наконец нашлась управа.<br>
И пусть говорят, что хотят, пусть перевирают нашу историю, как вздумается, главное, что мы знаем правду.<br>
Проклятье ли, провидение свело нас однажды, и в жутких топях, среди сырости и мертвецов мы нашли свое счастье. Каждый по-своему. Ты говоришь, что влюбился в меня там, в тепле одинокой целительской норы, и я признаю, что никогда не встречала волка ярче, свирепее, сильнее тебя. Жаль, что тогда мы говорили на разных языках и не могли признаться в своих чувствах по множеству причин.</p>
</div>
<div id='sub-veresk' class='subcontent'><p>ВЕРЕСК<br>
волчонок • самец • 3 месяца<br>сын, одиночка, жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-dyagil' class='subcontent'><p>ДЯГИЛЬ<br>
волчонок • самец • 3 месяца<br>сын, одиночка, жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-siren' class='subcontent'><p>СИРЕНЬ<br>
волчонок • самка • 3 месяца<br>дочь, одиночка, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-krapiva' class='subcontent'><p>КРАПИВА<br>
ведун • самка • 1 год<br>приемная дочь, одиночка, неизвестно</p>

<p>Признание, доверие, понимание.</p>

<p>Мы встретились у Никто, когда я искала Викула. Сперва мне показалось, что ты ее ученица, однако в тебе так мало от целителя и так много от храброго воина, что места в уютной норе тебе попросту не нашлось, и ты присоединилась к нам в путешествии в горах. На самом деле без тебя было бы сложнее. Без тебя мы бы не справились с преградами, что стояли тогда на нашем пути. Я признательна тебе и очень ценю.<br>
Хитрая, изворотливая, озорная и в меру непоседливая волчица, однако в той же степени осторожная, наученная горьким опытом и нелегкой жизнью. Мне нравится, что ты никогда не унываешь и стремишься стать сильнее, не смотря на трагичный отпечаток, что оставили на тебе Черные Топи. </p></div>
</div>

<div class="tab-content" id="staya-yaroboga">

<div id='sub-ostroskal' class='subcontent'><p>ОСТРОСКАЛ<br>
воин • самец • 8 лет<br>князь, жив</p>

<p>Краткое описание.</p>

<p>Я уважаю тебя и справедлива буду, сказав, что Яробожья стая не выбирает слабых духом в свои вожаки. Ты силен и могуч, и в стае нет волка, что не считался бы с твоим влиянием, однако теперь у меня достаточно поводов бояться твоего гнева, княже. Я привела безбожника на суд в надежде, что стану для стаи чем-то большим, что Морошкой, над которой надругалось зло, но боюсь, что зло и добро давно перемешались и не найти в нем правых и виноватых. Я освободила черноуста, и если решишь казнить меня, свирепый князь, то знай, что казнишь за любовь.</p></div>

<div id='sub-morana' class='subcontent'><p>МОРАНА<br>
ведун • самка • 8 лет<br>княгиня, жива</p>

<p>Краткое описание.</p>

<p>Волчица под стать своему статусу, воин и ведунья, подтвердившая свою силу, сразившись с Братом Древних. Я восхищалась тобой, я тянулась к тебе. Я дружна с твоими детьми, я помогала лечить княжича и знаю, что заботлива ты в той же степени, сколь свирепа. Но матушка-княгиня, как так вышло, что ты спуталась с темной ворожбой? Я бы не поверила таким сплетням, как не верила и другим, если бы то не сказал черноуст, ни разу меня не обманувший.</p></div>

<div id='sub-helga' class='subcontent'><p>ХЕЛЬГА<br>
ведун • самка • 13 лет<br>наставница<br>
сводящая, жива</p>

<p>Краткое описание.</p>

<p>Любимая наставница, каждый урок которой я усваивала лучше всех и чьи ожидания не оправдала после. Я предала тебя, семью и стаю, а ты все равно верила в мою невиновность до последнего, и я виню себя за то, что пошатнула эту веру. Но я сделала свой выбор и надеюсь, что ты его поймешь и, даже если не одобришь, то примешь.</p></div>

<div id='sub-mogevelnik' class='subcontent'><p>МОЖЖЕВЕЛЬНИК<br>
воин • самец • 13 лет<br>дед, старейшина ягодной семьи, жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>

<div id='sub-klukva' class='subcontent'><p>КЛЮКВА<br>
воин • самка • 7 лет<br>мать, воин, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>

<div id='sub-zveroboy' class='subcontent'><p>ЗВЕРОБОЙ<br>
воин • самец • 5 лет<br>воин, жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>

</div>

<div class="tab-content" id="sumerechiky">
<div class='subtabs' data-parent='sumerechiky'>
<div class='subtab' data-subtab='sub-merk'></div>
<div class='subtab' data-subtab='sub-voronika'></div>
<div class='subtab' data-subtab='sub-chernika'></div>
</div>

<div id='sub-merk' class='subcontent'><p>МЁРЬК<br>
ведун • самка • 7 лет<br>верховный волхв, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-voronika' class='subcontent'><p>ВОРОНИКА<br>
ведун • самка • 3 года<br>двоюродная сестра, чародейка, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-chernika' class='subcontent'><p>ЧЕРНИКА<br>
ведун • самка • 3 года<br>двоюродная сестра, чародейка, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
</div>

<div class="tab-content" id="chernousty">
<div class='subtabs' data-parent='chernousty'>
<div class='subtab' data-subtab='sub-bes'></div>
<div class='subtab' data-subtab='sub-ragna'></div>
</div>
<div id='sub-bes' class='subcontent'><p>БЕС<br>
черноуст • самец • 3 года<br>жнец гнева, жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
<div id='sub-ragna' class='subcontent'><p>РАГНА<br>
черноуст • самка • 4 года<br>жнец ужаса, жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
</div>

<div class="tab-content" id="korhuny">
<div class='subtabs' data-parent='korhuny'>
<div class='subtab' data-subtab='sub9'>Подвкладка 5</div>
<div class='subtab' data-subtab='sub10'>Подвкладка 6</div>
</div>
<div id='sub9' class='subcontent'>Это содержание подвкладки 5.</div>
<div id='sub10' class='subcontent'>Это содержание подвкладки 6.</div>
</div>

<div class="tab-content" id="odinochky">
<div class='subtabs' data-parent='odinochky'>
<div class='subtab' data-subtab='sub-nikto'></div>
<div class='subtab' data-subtab='sub-lihar'></div>
</div>
<div id='sub-nikto' class='subcontent'><p>НИКТО<br>
??? • самка • ???<br>жива</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>

<div id='sub-lihar' class='subcontent'><p>ЛИХАРЬ<br>
черноуст • самец • 8 лет<br>жив</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
</div>

<div class="tab-content" id="pogibshie">
<div class='subtabs' data-parent='pogibshie'>
<div class='subtab' data-subtab='sub-krigovnok'></div>
</div>
<div id='sub-krigovnok' class='subcontent'><p>КРЫЖОВНИК<br>
воин • самец • 3 года<br>брат, мертв (убит)</p>

<p>Краткое описание.</p>

<p>Полное описание.</p></div>
</div>

</div>

mainTabs.forEach(tab => {
tab.addEventListener('click', () => {
// Удаляем активность у всех
mainTabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');

// Показываем соответствующий контент
const selected = tab.getAttribute('data-tab');
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
document.getElementById(selected).classList.add('active');

// Обновляем подвкладки внутри выбранной вкладки
updateSubtabs(selected);
});
});

// Обновление подвкладок при смене вкладки
function updateSubtabs(parentId) {
const allSubtabsContainers = document.querySelectorAll('.subtabs');
allSubtabsContainers.forEach(st => {
if(st.getAttribute('data-parent') === parentId){
st.style.display = 'flex';
// активируем первую подвкладку по умолчанию
const subtabs = st.querySelectorAll('.subtab');
subtabs.forEach(s => s.classList.remove('active'));
if(subtabs.length >0){
subtips[0].classList.add('active');
showSubcontent(subtips[0]);
}
} else{
st.style.display = 'none';
}
});
}

// Обработка кликов по подвкладам
document.querySelectorAll('.subtabs').forEach(st => {
st.addEventListener('click', (e) => {
if(e.target.classList.contains('subtab')){
const parentId = st.getAttribute('data-parent');
// Удаляем активность у всех внутри этого контейнера
st.querySelectorAll('.subtab').forEach(s => s.classList.remove('active'));
e.target.classList.add('active');
showSubcontent(e.target);
}
});
});

// Показ контента выбранной подвклади
function showSubcontent(subTab) {
const subId = subTab.getAttribute('data-subtab');
// скрываем все содержимое
document.querySelectorAll('.subcontent').forEach(div => div.classList.remove('active'));
// показываем нужное содержимое
document.getElementById(subId).classList.add('active');
}
</script>

</body>
</html>
[/html]

Подпись автора: но а во мне к солнцу лишь песня. к тёплым лучам я воспарю.
и пусть судьба мне неизвеста, к солнцу я путь в небе найду.

Морошка
согласен, забирай меня полностью
/упал в лапки/

Подпись автора

ава от Черномора :З

я боюсь младенцев, я боюсь мертвецов
я ощупываю пальцами свое лицо
и внутри у меня холодеет от жути
неужели я такой же, как все эти люди?

я отдал бы немало за пару крыльев
я отдал бы немало за третий глаз
за руку, на которой четырнадцать пальцев
мне нужен для дыхания другой газ

викулу от дека, видимо с любовью

кто в болоте? а, это Викул
он всё время там, пакость, лежит
но не слушайте, дети, посул
его слово - отрава во лжи

не ходите в болото к нему,
он нарочно сидит там и ждёт...
вот сейчас я морошку веду,
а он ей гад бочок отгрызёт

викулу от морошки, точно с любовью