[html]
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Таблица с вкладками</title>
<style>
/* Основной стиль таблицы */
.tab-container {
width: 100%;
margin: auto;
padding: 0;
border-collapse: collapse;
text-align: center;
margin-top: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Верхняя навигационная панель с вкладками */
.tabs {
display: flex;
justify-content: space-around;
cursor: pointer;
background-color: #36244e;
color: white;
font-weight: bold;
}
.tabs div {
padding: 15px;
width: 100%;
text-align: center;
transition: background-color 0.3s;
}
.tabs div:hover, .tabs .active {
background-color: #161511;
}
/* Скрываем все вкладки по умолчанию, кроме активной */
.tab-content {
display: none;
}
.tab-content.active {
display: table-row-group;
}
/* Стиль ячеек таблицы */
.tab-content td, .tab-content th {
padding: 10px;
border: 1px solid #ddd;
}
.tab-content th {
background-color: #f2f2f2;
color: #333;
}
</style>
</head>
<body>
<div class="tabs">
<div onclick="openTab('tab1')" class="active">Город N</div>
<div onclick="openTab('tab2')">Руководители</div>
<div onclick="openTab('tab3')">Простой человек</div>
<div onclick="openTab('tab4')">Общая информация</div>
</div>
<table class="tab-container">
<!-- Вкладка 1: Город N -->
<tbody id="tab1" class="tab-content active">
<tr><th>Название</th><th>Описание</th></tr>
<tr><td>
</td>
<td>
<img src="https://i.imgur.com/xhR7kvi.jpeg" alt="Описание изображения" width="300" height="168" style="display: block; margin: auto;">
<strong>Город N</strong> — это суровый, отрезанный от внешнего мира город, расположенный среди вечных снегов и окутанный густыми клубами дыма от заводов и пылью, разносимой с шахт. С населением около 25000 человек, большая часть жителей работает на градообразующих предприятиях, в то время как остальные заняты в социальной и административной сферах. Особенность города в том, что здесь полностью отсутствует сельское хозяйство, и все жизненно необходимые товары, включая еду и оборудование, доставляются с неба загадочной организацией. Огромные транспортные корабли регулярно сбрасывают контейнеры с припасами, поддерживая существование этого изолированного сообщества.
<li>Над городом всегда висят две луны, что делает его пейзаж ещё более необычным и суровым. Одна из лун большая и светлая, в то время как вторая — меньшая и фиолетовая. Эти два небесных спутника придают ночам города особую атмосферу, но в повседневной жизни они не влияют на события, и жители привыкли к их присутствию.</li>
<li>Политический строй города базируется на принципах тоталитарного социализма, где вся система построена на строгом разделении ресурсов в зависимости от труда. Простой принцип: хорошо работаешь — получаешь лучшие пайки и товары; работаешь плохо — остаёшься на скромных подачках. Однако, несмотря на это, в городе существует чёткое социальное расслоение между элитой и рабочими. Руководители заводов и шахт, а также городская администрация живут в комфорте и роскоши, скрытой за высокими заборами частных домов. Они контролируют распределение поступающих с неба товаров, получая доступ к лучшим продуктам и ресурсам в первую очередь. Простой рабочий класс, живущий в многоквартирных домах, вынужден довольствоваться тем, что остаётся.</li>
<li>Жители города привыкли к этому укладу, где каждый знает своё место, и не пытаются оспаривать существующий порядок. Город N существует в замкнутом цикле — жизнь под вечными снегами, зависимость от внешних поставок и строгая иерархия, которая не оставляет места для перемен.</li>
</td>
</tr>
</tbody>
<!-- Вкладка 2: Руководители -->
<tbody id="tab2" class="tab-content">
<tr><th>Название</th><th>Описание</th></tr>
<tr><td></td>
<td>
<img src="https://i.imgur.com/hiJAsy4.jpeg" alt="Описание изображения" width="300" height="168" style="display: block; margin: auto;">
К этой группе людей относятся те, кто знает настоящую сущность города N. Они не живут в типичных панельных домах, а скрываются за высокими заборами своих частных владений, в которых возводят настоящие "замки" и хранят драгоценности. Привкус дешевой еды им неведом — их окружение роскошно, но всегда с налётом скрытой враждебности. Большинство из них занимают руководящие позиции на предприятиях, являются менеджерами или начальниками разного уровня. Они смотрят с иронией на наивность простых людей, потому что знают, почему в городе все устроено именно так. Они любят принимать участие в светских мероприятиях, званых ужинах и вечеринках. Но самое важное — они являются основными потребителями нефритовой пыли.
<li>У них есть негласное правило: одна семья — один ребёнок. Своих детей они никому не доверяют, а образование те получают на дому. Ребёнок не покидает дом, пока ему не исполнится восемнадцать лет. Возможность обычному человеку встретить ребенка на улицах города так маловероятна, что может вызвать страх и смущение.</li>
<li>Руководители, которые употребляют нефритовую пыль, отличаются фиолетовым цветом глаз. Чем ярче и насыщеннее фиолетовый оттенок, тем более чистую пыль они потребляют, и тем выше их социальный статус. Среди них соблюдается строгая иерархия, основанная на этом блеске глаз. Хотя простые люди им безразличны, внутри своей группы они поддерживают тесные связи, стараются держаться ближе друг к другу, устанавливая новые знакомства и поддерживая старые, даже если между ними есть вражда. Конфликты случаются, но решаются внутри их закрытого круга. Иногда до простых людей доходит лишь слух о том, что кто-то внезапно покинул город.</li>
<li>Руководители живут гораздо дольше простых людей, иногда доживая до 200 лет. Говорят, что основатель города N до сих пор жив, хотя многие считают это лишь легендой.</li>
</td>
</tr>
</tbody>
<!-- Вкладка 3: Простой человек -->
<tbody id="tab3" class="tab-content">
<tr><th>Название</th><th>Описание</th></tr>
<tr><td>
</td>
<td>
<img src="https://i.imgur.com/2PVjUVi.jpeg" alt="Описание изображения" width="300" height="168" style="display: block; margin: auto;">
Жизненный цикл человека в городе N начинается еще в утробе матери. Молодой семье выдают справку о беременности и сразу после этого - значительные выплаты и социальную помощь в виде колясок, одежды и продуктов питания. Эти ресурсы, а также «капитал» (специальные талоны), предоставляемый на время беременности и воспитания ребенка в первые три года, позволяют семье безбедно жить на протяжении пяти-шести лет.
<li>Когда ребенку исполняется три года, его забирают из семьи. Никто в городе N не задается вопросом, куда и зачем его отправляют — это принято, так было всегда. Все эти годы потеряны, дети не помнят, что с ними происходит в этот период, а взрослые не знают и не интересуются. В возрасте 14 лет ребенок возвращается в семью и начинает обучение в школе. За четыре года ему дают базовые навыки, необходимые для жизни. В школе учат основам этикета, кулинарии, гигиены, простым знаниям о климате, воспроизводству, а также развивают навыки письма и счета на базовом уровне. Никто не удивляется, почему дети начинают учиться так поздно, ведь за короткий срок они успевают достичь уровня обычного рабочего.</li>
<li>По окончании школы проводится тестирование, которое определяет дальнейшую судьбу 18-летнего молодого человека. В зависимости от результатов его либо отправляют работать на шахты, либо дают возможность поступить в академию на три года обучения.</li>
<li>После окончания академии каждый человек находит себе пару, старается завести ребенка, чтобы снова получить талоны и вести спокойную жизнь. Так продолжается, пока не приходит естественный конец.</li>
<li>Женщины обычно работают на швейной фабрике, в школе, больнице или магазине. Мужчины находят себя на заводе, в карьере, на грузоперевозках или устраиваются курьерами или проводниками в компании "Нефритовая пыль".</li>
</td>
</tr>
</tbody>
<!-- Вкладка 4: Общая информация -->
<tbody id="tab4" class="tab-content">
<tr><th>Название</th><th>Описание</th></tr>
<tr><td></td>
<td>
<ul>
<li><strong> Кто главный?</strong> Главный - совет города, в него входят руководители градообразующих предприятий и академии.</li>
<li><strong>Погода:</strong> круглый год лежит снег, только ближе к летним месяцам он сходит с официальных трасс и люди могут увидеть цвет асфальта. Морозы, сильные ветра, вьюга - ежедневная рутина. </li>
<li> <strong>Космос:</strong> в небе можно заметить две луны, а это значит, что мы не на Земле. Об этом знает вся элита, простые граждане даже не догадываются. </li>
<li> <strong>Образование:</strong> учитывайте, что простые люди не самые грамотные представители города. Они знают биологию, им рассказывают, как делать детей в миссионерской позе, учат писать сочинения и считать зарплату. Можно сказать, что с этой примитивной базой, кроме как есть\пить\в туалет ходить, они и выходят из школы. Но они очень быстро набирают обороты и впитывают информацию, поэтому в академии распространены отношения наставничества: старший учит младшего, учитель берет шефство над студентом и т.д..
<li> В городе N, с его суровыми условиями, закрытой социальной структурой и тоталитарным режимом, <strong>праздники</strong> играют важную роль в поддержании дисциплины и мотивации, а также служат для укрепления единства среди простого населения. Эти события не только напоминают о трудовой морали, но и позволяют жителям отдохнуть и почувствовать свою принадлежность к городу. Вот несколько праздников, которые могли бы существовать в этом уникальном месте:
</li>
<li><strong>1. День Поставки</strong>
Ежегодный праздник, посвящённый важности регулярных поставок, которые организация сбрасывает с неба. Это день благодарности за ресурсы, без которых город не может существовать. Жители украшают свои дома символами коробок и контейнеров, а также устраивают скромные пиры, используя продукты, полученные за прошедший год. В этот день организуются массовые мероприятия, в которых подчёркивается значимость труда каждого горожанина для поддержания этого процесса.</li>
<li><strong>2. Праздник Рудокопов</strong>
Этот день чествует шахтёров, работающих в тяжёлых условиях под землёй. На центральной площади проходят церемонии награждения лучших работников, а также устраиваются небольшие парады. В школах и академиях детям рассказывают о важности шахтёрского труда, организуются экскурсии на заводы и шахты, где молодёжи показывают, как работают горняки. Вечером семьи собираются за общим столом, отмечая праздник в кругу близких.</li>
<li><strong>3. День Нефритовой пыли</strong>
Этот праздник организован в честь продукта, который занимает центральное место в жизни города. Официально он посвящён успехам науки и технологии в создании и использовании пыли, но неофициально это день, когда элита города устраивает закрытые приёмы и вечеринки. Простым людям этот праздник напоминает о недосягаемости высших слоёв общества, однако для них также проводятся городские мероприятия, где рассказывается о пользе пыли для развития города.</li>
<li><strong>4. День Руководителей</strong>
Праздник, в который чествуют руководителей предприятий и государственных структур. В этот день простые жители демонстрируют свою благодарность элите за её "заботу" о городе. Улицы украшают флагами, на предприятиях проходят праздничные линейки с награждениями. Для простого населения это возможность увидеть парад элиты и почувствовать себя частью большого механизма города.</li>
<li><strong>5. День Достижений Академии</strong>
Это ежегодный праздник, приуроченный к выпуску студентов из Академии «Нефритовая пыль». В этот день проводят торжественные церемонии вручения дипломов лучшим студентам, а на центральной площади города организуют выставки, где показывают достижения студентов разных факультетов. Для жителей это день гордости за своих сыновей, которые готовятся занять свои места в жизни города. Кроме того, организуются выступления студентов факультета Проводников, что привлекает особое внимание элиты.</li>
<li><strong>6. День тепла</strong>
Зимой, в самые холодные дни, жители города отмечают праздник стойкости и выносливости. День Закалённых символизирует способность людей выживать в суровых условиях вечного снега и холода. Проводятся массовые гуляния на улице, устраиваются конкурсы на выносливость, символизирующие способность противостоять тяжёлым условиям. В этот день жители города демонстрируют свою силу духа, организуются спортивные мероприятия, а по вечерам разводят большие костры, возле которых люди собираются, чтобы согреться и обменяться историями.</li>
<li><strong>7. День Труда и Успехов</strong>
Ежегодный праздник, посвящённый трудовым достижениям. В этот день все жители города выходят на символические "субботники" — организуются массовые уборки улиц и общественных мест. Руководители предприятий награждают лучших работников грамотами и небольшими премиями. После работы организуются концерты, где выступают молодёжь и творческие коллективы, а вечером — общегородское застолье. Этот праздник подчёркивает важность коллективного труда и вклад каждого в развитие города.</li>
<li><strong>8. Праздник Нефритовой Ночи</strong>
Это самый таинственный и закрытый праздник города N. Он проводится только для элиты и окружён множеством слухов. Горожане знают, что в этот день руководители города собираются на тайные приёмы, чтобы чествовать своих союзников и обмениваться нефритовой пылью. На улицах города царит напряжённая тишина, а простому населению запрещено покидать свои дома после заката. В это время простые жители могут лишь догадываться, какие решения и сделки заключаются за закрытыми дверями.</li>
<li><strong>9. День Детства</strong>
Официально этот праздник посвящён детям города N, которые считаются будущим общества. В этот день власти организуют массовые мероприятия для детей: игры, театральные представления и раздачу сладостей. Однако за фасадом праздника скрывается зловещая реальность: это день, когда система забирает очередную партию детей в возрасте 3 лет для отправки на 11-летнюю изоляцию. Родители, несмотря на внешние радости, испытывают скрытую тревогу, зная, что этот день может стать началом долгого и необратимого пути для их ребёнка.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<script>
function openTab(tabId) {
// Убираем активность у всех вкладок и скрываем содержимое
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
document.querySelectorAll('.tabs div').forEach(tab => tab.classList.remove('active'));
// Отображаем нужную вкладку
document.getElementById(tabId).classList.add('active');
document.querySelector(`[onclick="openTab('${tabId}')"]`).classList.add('active');
}
</script>
</body>
[/html]