[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Вседоступные заклинания</title>
<style>
/* Сброс и базовые стили */
body {
margin: 0;
padding: 40px 20px;
font-family: sans-serif;
background: #f0f0f0;
text-align: center;
}
/* Контейнер для вкладок */
.tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
/* Кнопки вкладок */
.tab-button {
padding: 10px 20px;
border: none;
background-color: #3d3d3d;
color: white;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
}
/* Активная вкладка */
.tab-button.active {
background-color: #502b5a;
}
/* Контент вкладки */
.tab-content {
display: none;
max-width: 1100px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
text-align: left;
}
.tab-content.active {
display: block;
}
/* Таблицы */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 10 px solid #ccc;
padding: 8px 12px;
text-align: left;
}
/* Промежуточные заголовки внутри таблицы */
.subheader {
text-align: center;
font-weight: bold;
font-size: 16px;
color: #333;
}
em {
color: #555;
}
</style>
</head>
<body>
<!-- Кнопки вкладок -->
<div class="tabs">
<button class="tab-button active" onclick="showTab(0)">Общеизвестные заклинания</button>
<button class="tab-button" onclick="showTab(1)">Специальные заклинания</button>
<button class="tab-button" onclick="showTab(2)">Хогвартские заклинания</button>
<button class="tab-button" onclick="showTab(3)">Ритуалистика и наука</button>
<button class="tab-button" onclick="showTab(4)">Ментальная магия</button>
<button class="tab-button" onclick="showTab(5)">Сноходство</button>
<button class="tab-button" onclick="showTab(6)">Магия рода</button>
<button class="tab-button" onclick="showTab(7)">Магический транспорт</button>
</div>
<!-- Вкладка 1 -->
<div class="tab-content active">
<table>
<tr><th>Формула</th><th>Описание</th><th>Дополнительно</th></tr>
<tr><td colspan="3" class="subheader">1 курс Хогвартса</td></tr>
<tr><td>Alohomora</td><td>Открывает замки</td><td>Учат на 1 курсе</td></tr>
<tr><td>Colloprotus</td><td>Закрывает замки</td><td>Контрзаклятие к Alohomora</td></tr>
<tr><td>Lumos</td><td>Свет на кончике палочки</td><td>Ночное освещение</td></tr>
<tr><td>Nox</td><td>Гасит свет</td><td>Контрзаклятие к Lumos</td></tr>
<tr><td colspan="3" class="subheader">Боевые заклинания</td></tr>
<tr><td>Deluvium</td><td>Заключает в водяной шар</td><td>Контр: Incendio</td></tr>
<tr><td>Incendio</td><td>Вызывает огонь</td><td>Контр: Deluvium</td></tr>
<tr><td>Analgéo</td><td>Обезболивание</td><td>Вариант Maxima</td></tr>
</table>
</div>
<!-- Вкладка 2 -->
<div class="tab-content">
<h3>Специальные заклинания</h3>
<table>
<tr><th>Формула</th><th>Описание</th><th>Примечания</th></tr>
<tr><td colspan="3" class="subheader">Тактические</td></tr>
<tr><td>Protego</td><td>Щит, отражает заклятия</td><td>Базовая защита</td></tr>
<tr><td>Expelliarmus</td><td>Обезоруживает</td><td>Выбивает палочку</td></tr>
<tr><td colspan="3" class="subheader">Уникальные</td></tr>
<tr><td>Obliviate</td><td>Стирает память</td><td>Опасное, требует лицензии</td></tr>
</table>
</div>
<!-- Вкладка 3 -->
<div class="tab-content">
<h3>Хогвартские заклинания</h3>
<p>Используются преимущественно в рамках школьной программы обучения.</p>
<table>
<tr><th>Формула</th><th>Описание</th><th>Курс</th></tr>
<tr><td>Wingardium Leviosa</td><td>Поднимает предметы</td><td>1 курс</td></tr>
<tr><td>Rictusempra</td><td>Щекотка</td><td>2 курс</td></tr>
</table>
</div>
<!-- Остальные вкладки -->
<div class="tab-content">
<h3>Ритуалистика и наука</h3>
<p>Ритуальные заклятия, магические схемы и длительные магические процессы.</p>
<table>
<tr><th>Название</th><th>Суть</th><th>Примечания</th></tr>
<tr><td>Круг защиты</td><td>Создаёт магическую границу</td><td>Требует компонентов</td></tr>
</table>
</div>
<div class="tab-content">
<h3>Ментальная магия</h3>
<p>Магия разума, эмоций и ментальных щитов.</p>
<table>
<tr><th>Формула</th><th>Эффект</th><th>Сложность</th></tr>
<tr><td>Legilimens</td><td>Чтение мыслей</td><td>Высокая</td></tr>
</table>
</div>
<div class="tab-content">
<h3>Сноходство</h3>
<p>Магия сна, сновидений и астральных переходов.</p>
</div>
<div class="tab-content">
<h3>Магия рода</h3>
<p>Фамильные заклятия, передаваемые по наследству.</p>
</div>
<div class="tab-content">
<h3>Магический транспорт</h3>
<p>Способы перемещения: трансгрессия, порталы, летучий порох.</p>
</div>
<!-- JavaScript: логика вкладок -->
<script>
function showTab(index) {
const tabs = document.querySelectorAll('.tab-content');
const buttons = document.querySelectorAll('.tab-button');
tabs.forEach((tab, i) => {
tab.classList.toggle('active', i === index);
buttons[i].classList.toggle('active', i === index);
});
}
</script>
</body>
</html>
[/html]
