[html]
<style>
/* 1. ГЛАВНЫЙ КОНТЕЙНЕР */
.artifact-box-wrapper {
max-width: 600px;
margin: 20px auto;
font-family: 'Times New Roman', serif;
position: relative;
padding-top: 15px;
}
/* ГЛАВНЫЙ ЗАГОЛОВОК */
.artifact-header {
background-color: #5D4A66;
color: white;
padding: 8px 15px;
border-radius: 8px 8px 0 0;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
}
/* 2. ОСНОВНОЙ КОНТЕНТ (МЕНЮ + КОНТЕНТ) */
.artifact-main-container {
display: flex;
border: 3px solid #B8A8C7;
background-color: #FFFDF8;
border-radius: 0 0 10px 10px;
height: 580px; /* Высота сохранена */
position: relative;
}
/* ЛЕВОЕ МЕНЮ */
.artifact-tabs-vertical {
width: 150px;
background-color: #EFEFEF;
border-right: 1px solid #D3D3D3;
border-radius: 0 0 0 7px;
padding-top: 8px;
flex-shrink: 0;
}
/* КНОПКА ПО УМОЛЧАНИЮ (НЕАКТИВНАЯ) */
.artifact-tab-button {
display: block;
width: 90%;
text-align: left;
padding: 8px 10px;
margin-bottom: 5px;
margin-left: 5px;
cursor: pointer;
/* СТИЛЬ ПО УМОЛЧАНИЮ (ФИОЛЕТОВАЯ КНОПКА) */
border: 2px solid #5D4A66;
background-color: #5D4A66;
font-family: 'Times New Roman', serif;
font-size: 12px;
font-weight: bold;
color: white; /* Белый текст */
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
border-radius: 5px;
}
/* КНОПКА ПРИ АКТИВАЦИИ (АКТИВНАЯ) */
.artifact-tab-active {
background-color: transparent !important; /* Прозрачный фон */
color: #5D4A66 !important; /* Фиолетовый текст */
border: 0px solid transparent !important; /* Без обводки */
border-left: 5px solid #89515A !important; /* Левая линия-акцент */
margin-left: 0px !important; /* Смещаем, чтобы линия была на месте */
padding-left: 15px !important; /* Сдвигаем текст */
}
/* 3. ПРАВЫЙ КОНТЕНТ (СКРОЛЛ + БАННЕР) */
.artifact-content-area {
flex-grow: 1;
overflow-y: hidden;
position: relative;
}
.artifact-content-banner {
width: 100%;
height: 90px;
background-color: #D3D3D3;
overflow: hidden;
margin-bottom: 0;
position: relative;
z-index: 1;
/* ФОН ДЛЯ БАННЕРА */
background-image: url('https://forumstatic.ru/files/001c/8f/35/97003.jpg');
background-size: cover;
background-position: center;
}
.artifact-section-title {
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
background-color: #5D4A66;
color: white;
padding: 4px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 5;
}
/* СКРОЛЛИРУЕМАЯ ОБЛАСТЬ ДЛЯ КОНТЕНТА */
.artifact-content-scroll {
padding: 10px 15px 15px 15px;
height: calc(580px - 90px);
overflow-y: auto;
position: relative;
z-index: 2;
}
/* ЗАГОЛОВОК ГЛАВНОГО ДЕПАРТАМЕНТА (ЗАМЕНА category-description) */
.department-main-header {
text-align: center;
font-weight: bold;
color: white;
font-size: 14px;
padding: 8px 10px;
background-color: #5D4A66;
border-radius: 5px;
margin-top: 20px;
margin-bottom: 15px;
text-transform: uppercase;
}
/* ЗАГОЛОВОК ПОДРАЗДЕЛА (ЗАМЕНА category-description) */
.department-subheader {
text-align: center;
font-weight: bold;
color: #89515A;
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 5px;
border-bottom: 1px dotted #D3D3D3;
}
/* СТИЛИ СПИСКА (СКОПИРОВАНЫ ИЗ АРТЕФАКТОВ) */
.artifact-list-item {
margin-bottom: 10px; /* Уменьшил отступ */
padding: 5px 0;
}
.artifact-name-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0px;
border-bottom: 1px dotted #D3D3D3;
padding-bottom: 2px;
}
.artifact-icon {
margin-right: 7px;
font-size: 14px;
font-weight: bold;
color: #5D4A66;
}
.artifact-name {
font-weight: bold;
color: #5D4A66;
font-size: 13px;
flex-grow: 1;
}
.artifact-price {
font-weight: normal; /* Сделал нормальным, т.к. это должность */
color: #89515A; /* Цвет для занятости */
white-space: nowrap;
font-size: 13px;
margin-left: 15px;
text-align: right; /* Выравнивание справа */
min-width: 100px; /* Минимальная ширина для имени */
}
/* Скрываем неактивные вкладки */
.job-tab-content-block { /* Изменил имя класса на job, чтобы не конфликтовало */
display: none;
}
.job-tab-content-block.active {
display: block;
}
/* ССЫЛКА "СВОБОДНО" */
.job-free-link {
font-size: 11px;
color: #89515A;
text-decoration: none;
border-bottom: 1px dotted #89515A;
cursor: pointer;
transition: color 0.2s;
}
.job-free-link:hover {
color: #5D4A66;
border-bottom: 1px solid #5D4A66;
}
</style>
<div class="artifact-box-wrapper">
<div class="artifact-header">
МАГИЧЕСКИЕ ОРГАНИЗАЦИИ И ДОЛЖНОСТИ (1925 Г.)
</div>
<div class="artifact-main-container">
<div class="artifact-tabs-vertical">
<button onclick="showJobTab('england', this, 'АНГЛИЯ 🇬🇧')" class="artifact-tab-button artifact-tab-active" id="btn-england">АНГЛИЯ 🇬🇧</button>
<button onclick="showJobTab('america', this, 'АМЕРИКА 🇺🇸')" class="artifact-tab-button" id="btn-america">АМЕРИКА 🇺🇸</button>
<button onclick="showJobTab('ireland', this, 'ИРЛАНДИЯ 🇮🇪')" class="artifact-tab-button" id="btn-ireland">ИРЛАНДИЯ 🇮🇪</button>
</div>
<div class="artifact-content-area">
<div class="artifact-content-banner">
<img src="https://forumstatic.ru/files/001c/8f/35/97003.jpg" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="artifact-section-title" id="artifact-section-dynamic-title">
АНГЛИЯ 🇬🇧
</div>
<div class="artifact-content-scroll">
<div id="england" class="job-tab-content-block active">
<div class="department-main-header">Министерство Магии</div>
<div class="department-main-header">I. Министр магии и персонал</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Министр магии</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Заместитель Министра Магии</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Секретарь министра</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Сотрудники подразделения</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">II. Департамент магического правопорядка</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава департамента</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Штаб-квартира Авроров</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">глава аврората</span><span class="artifact-price"><a href="https://obscuruschaos.rusff.me/profile.php?id=9" class="job-free-link">alastor vance</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Авроры</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Штаб-квартира Хит-Визардов</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава хит-визардов</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Хит-визарды</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Группа внутренних расследований</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава группы</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Административные службы Визенгамота</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Верховный судья</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">III. Департамент магических происшествий и катастроф</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава департамента</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Штаб-квартира стирателей памяти</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава стирателей</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">V. Департамент международного магического сотрудничества</div>
<div class="department-subheader">» Британский филиал международной конфедерации магов</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Верховный маг конфедерации</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">VIII. Отдел тайн</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава отдела</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Зал пророчеств</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Сотрудники</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">Больница Св. Мунго и Торговый Квартал</div>
<div class="department-subheader">Больница Св. Мунго (Администрация)</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Главный Целитель</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Заведующий отделением</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Лондонский Торговый Квартал (Косой Переулок)</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Владелец Паба «Дырявый котёл»</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Главный гоблин Банка Гринготтс</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Владелец Лавки Олливандера</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Прочее (СМИ, Квиддич и т.д.)</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Журналист</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Игрок Квиддича</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
</div>
<div id="america" class="job-tab-content-block">
<div class="department-main-header">МАКУСА</div>
<div class="department-main-header">I. Президентство и Персонал</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Президент МАКУСА</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Заместитель Президента</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">II. Департамент магического правопорядка и безопасности</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава департамента</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Штаб-квартира Авроров</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава Аврората</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Верховный Суд Магической Америки (ВСМА)</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Верховный судья</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">III. Отдел международных отношений</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава отдела</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">IV. Департамент регулирования и контроля магических популяций</div>
<div class="department-subheader">» Подразделение тварей и опасных существ</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава подразделения</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Сектор регистрации и надзора за Обскурами</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава сектора</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">Магический Госпиталь Эхо и Нью-Йорк (Торговля)</div>
<div class="department-subheader">Магический Госпиталь Эхо</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Главный Целитель</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Нью-Йорк (Торговля / Чёрный Рынок)</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Владелец «The Blind Pig»</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Прочее</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Игрок в Кводпот/Тренер</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Агенты Гриндевальда</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
</div>
<div id="ireland" class="job-tab-content-block">
<div class="department-main-header">Ирландское Магическое Управление (ИМУ)</div>
<div class="department-main-header">I. Главный администратор и персонал</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Главный администратор</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Заместитель Администратора</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">II. Департамент защиты древних границ</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава департамента</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Штаб-квартира Авроров</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава Аврората</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">» Отдел по сдерживанию осколков</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Эксперты по сдерживанию</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">IV. Департамент контроля за популяциями и чистой кровью</div>
<div class="department-subheader">» Бюро регистрации оборотней и кланов</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Глава бюро</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">V. Отдел международного взаимодействия</div>
<div class="department-subheader">» Ирландский сектор международной конфедерации</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Верховный маг</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-main-header">Св. Клиника Ардмакнесс и Дублинский Маг. Рынок</div>
<div class="department-subheader">Св. Клиника Ардмакнесс</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Главный целитель</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Дублинский Магический Рынок</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Владелец Паба «Старый Друид»</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
<div class="department-subheader">Прочее</div>
<div class="artifact-list-item"><div class="artifact-name-row"><span class="artifact-icon">♦</span><span class="artifact-name">Сотрудники магических СМИ</span><span class="artifact-price"><a href="#" class="job-free-link">свободно</a></span></div></div>
</div>
</div>
</div>
</div>
</div>
<script>
function showJobTab(tabId, clickedButton, title) {
// Снять активный стиль со всех кнопок
const buttons = document.querySelectorAll('.artifact-tab-button');
buttons.forEach(button => {
button.classList.remove('artifact-tab-active');
});
// Установить активный стиль на выбранной кнопке
if (clickedButton) {
clickedButton.classList.add('artifact-tab-active');
}
// Обновить заголовок над баннером
const titleElement = document.getElementById('artifact-section-dynamic-title');
if (titleElement) {
titleElement.textContent = title;
}
// Скрыть весь контент
const contents = document.querySelectorAll('.job-tab-content-block');
contents.forEach(content => {
content.classList.remove('active');
});
// Показать выбранный контент
const activeContent = document.getElementById(tabId);
if (activeContent) {
activeContent.classList.add('active');
const scrollArea = document.querySelector('.artifact-content-scroll');
if(scrollArea) {
scrollArea.scrollTop = 0;
}
}
}
// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', () => {
const initialButton = document.getElementById('btn-england');
showJobTab('england', initialButton, 'АНГЛИЯ 🇬🇧');
});
</script>
[/html]
