занятые персонажи

[html]<style>
.tab-content-container { display: none; }
.tab-active { display: table; }
.scroll-box { height: 250px; overflow-y: scroll; padding-right: 15px; font-size: 12px; line-height: 1.5; }

/* Новый стиль для маленьких и эстетичных заголовков */
.tab-header {
padding: 8px 15px; /* Уменьшаем паддинг в два раза */
cursor: pointer;
background-color: #000; /* ИЗМЕНЕНО: ЧЕРНЫЙ ЦВЕТ */
color: white;
border-radius: 4px; /* Меньше скругление */
font-size: 12px; /* Уменьшенный шрифт */
font-weight: bold;
text-align: center;
text-transform: uppercase;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
margin-bottom: 5px; /* Отступ от верхнего блока */
}
.tab-header:hover { background-color: #333; } /* ИЗМЕНЕНО: Темно-серый ховер */

.aesthetic-container {
max-width: 700px;
margin: 30px auto;
font-family: 'Georgia', serif; /* Более эстетичный шрифт */
color: #333;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
/* ФОНОВАЯ КАРТИНКА */
background: url('https://forumstatic.ru/files/001c/8f/35/97003.jpg?v=1') center / cover no-repeat;
background-color: #ECECEC; /* Цвет, если картинка не загрузится */
padding: 10px;
}
.rules-block {
background-color: rgba(255, 255, 255, 0.85); /* Полупрозрачный фон для читаемости */
padding: 15px;
border-radius: 8px;
border: 1px solid #C0C0C0;
margin-bottom: 15px;
}
.rules-block ul {
list-style: none;
padding-left: 0;
margin: 0;
font-size: 13px;
color: #444;
}
.content-table-inner {
background-color: rgba(255, 255, 255, 0.95); /* Почти белый фон для контента */
border: 1px solid #333; /* ИЗМЕНЕНО: Темно-серая рамка */
border-radius: 8px;
overflow: hidden;
}
/* ИЗМЕНЕНО: СИНЕ-СЕРЫЕ ЭЛЕМЕНТЫ ВНУТРИ */
.rules-block ul li {
color: #333 !important; /* Делаем пункты правил темно-серыми */
}
</style>

<div class="aesthetic-container">
<div class="rules-block">
<ul style="list-style: none; padding-left: 0; margin: 0;">
<li style="margin-bottom: 5px; color: #333;">◆ Дубль внешностей допускается только для сюжетной необходимости [близнецы];</li>
<li style="margin-bottom: 5px; color: #333;">◆ Фамилии могут повторяться только у персонажей-родственников, имена находятся в свободном доступе;</li>
<li style="color: #333;">◆ Имена можно выкупать в банке, выкупленные помечены значком [✱]</li>
</ul>
</div>

<table style="width: 100%; border-collapse: collapse; margin-bottom: 5px;">
<tr>
<td style="width: 50%; padding-right: 5px;">
<div id="header-vnesh" class="tab-header" onclick="showContent('vnesh')">
ЗАНЯТЫЕ ВНЕШНОСТИ
</div>
</td>
<td style="width: 50%; padding-left: 5px;">
<div id="header-imen" class="tab-header" onclick="showContent('imen')">
ЗАНЯТЫЕ ИМЕНА И ФАМИЛИИ
</div>
</td>
</tr>
</table>

<table id="content-container" class="tab-content-container content-table-inner" style="width: 100%; border-collapse: collapse;">
<tr>
<td id="col-left" style="width: 50%; padding: 10px; vertical-align: top; border-right: 1px solid #ccc;">
</td>
<td id="col-right" style="width: 50%; padding: 10px; vertical-align: top;">
</td>
</tr>
</table>

</div><script>
// ДАННЫЕ СПИСКОВ (ИСПОЛЬЗУЙТЕ ВАШИ ДАННЫЕ)
const lists = {
// ----------------------------------------------------------------------
// СОДЕРЖИМОЕ ПРИ КЛИКЕ НА "ЗАНЯТЫЕ ВНЕШНОСТИ"
// Сценарий: Лево - Женские Внешности | Право - Мужские Внешности
// ----------------------------------------------------------------------
vnesh: {
title_left: 'ЖЕНСКИЕ ВНЕШНОСТИ',
content_left: `
<div class="scroll-box">
ABC 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
DEF 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
GHI 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
JKL 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
MNO 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
PQR 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
STU 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
VWX 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
YZ 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ.

</div>
`,
title_right: 'МУЖСКИЕ ВНЕШНОСТИ',
content_right: `
<div class="scroll-box">
ABC 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
DEF 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
GHI 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
JKL 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
MNO 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
PQR 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
STU 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
VWX 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
YZ 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
</div>
</div>
`
},

// ----------------------------------------------------------------------
// СОДЕРЖИМОЕ ПРИ КЛИКЕ НА "ЗАНЯТЫЕ ИМЕНА И ФАМИЛИИ"
// Сценарий: Лево - Имена | Право - Фамилии
// ----------------------------------------------------------------------
imen: {
title_left: 'ЖЕНСКИЕ ИМЕНА',
content_left: `
<div class="scroll-box">
ABC 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
DEF 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
GHI 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
JKL 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
MNO 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
PQR 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
STU 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
VWX 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
YZ 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
</div>
`,
title_right: 'МУЖСКИЕ ИМЕНА',
content_right: `
<div class="scroll-box">
ABC 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
DEF 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
GHI 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
JKL 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
MNO 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
PQR 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
STU 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
VWX 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
YZ 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
<a href="ссылка">Имя персонажа на англ.</a> - имя прототипа на англ. 
</div>
`
}
};

function showContent(tabId) {
const container = document.getElementById('content-container');
const colLeft = document.getElementById('col-left');
const colRight = document.getElementById('col-right');
const data = lists[tabId];

// 1. Показываем контейнер
container.classList.add('tab-active');

// 2. Очищаем старое содержимое
colLeft.innerHTML = '';
colRight.innerHTML = '';

// 3. Вставляем новое содержимое (Левая колонка)
colLeft.innerHTML = `
<div style="font-weight: bold; text-align: center; margin-bottom: 5px; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 5px;">${data.title_left}</div>
${data.content_left}
`;

// 4. Вставляем новое содержимое (Правая колонка)
colRight.innerHTML = `
<div style="font-weight: bold; text-align: center; margin-bottom: 5px; color: #333; border-bottom: 1px solid #ccc; padding-bottom: 5px;">${data.title_right}</div>
${data.content_right}
`;
}

// Убедитесь, что ни один список не открыт при загрузке.
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('content-container').classList.remove('tab-active');
});

</script>[/html]

obscurus chaos

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

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

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

занятые персонажи

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

Поделиться12025-10-06 19:12:56