[html]
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<div class="guest-template-container">
<div class="guest-header">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Улучшенная таблица с вкладками</title>
<style>
body {
font-family: 'Century Gothic', Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
color: #333;
}
/* Основной контейнер */
.tab-wrapper {
width: 100%;
max-width: 1000px;
margin: 20px auto;
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Навигационные вкладки */
.tabs {
display: flex;
justify-content: center;
gap: 15px;
padding: 20px;
background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
border-radius: 15px 15px 0 0;
}
.tab-button {
padding: 12px 24px;
text-align: center;
cursor: pointer;
color: #ede5e3;
font-weight: 500;
font-size: 13px;
text-transform: lowercase;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
border-radius: 12px;
user-select: none;
min-width: 120px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tab-button:nth-child(1) {
background: linear-gradient(135deg, #978fa1 0%, #608b9f 100%);
}
.tab-button:nth-child(2) {
background: linear-gradient(135deg, #978fa1 0%, #608b9f 100%);
}
.tab-button:nth-child(3) {
background: linear-gradient(135deg, #978fa1 0%, #608b9f 100%);
}
.tab-button:nth-child(4) {
background: linear-gradient(135deg, #978fa1 0%, #608b9f 100%);
}
.tab-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
color: #ffffff;
}
.tab-button.active {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
color: #ffffff;
font-weight: 600;
}
.tab-button.active::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #756983;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(117, 105, 131, 0.4);
}
/* Содержимое вкладок */
.tab-container {
width: 100%;
border-collapse: collapse;
background: #ffffff;
}
.tab-content {
display: none;
}
.tab-content.active {
display: table-row-group;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Стиль содержимого */
.tab-content td {
padding: 30px;
vertical-align: top;
line-height: 1.7;
}
.content-text {
text-align: left;
color: #444;
}
.content-text p {
margin-bottom: 18px;
text-align: justify;
}
.content-text strong {
color: #756983;
font-weight: 600;
}
.content-text h3 {
color: #756983;
margin: 25px 0 15px 0;
font-size: 18px;
border-bottom: 2px solid #ede5e3;
padding-bottom: 8px;
}
.content-text ul {
margin: 15px 0;
padding-left: 25px;
}
.content-text li {
margin-bottom: 12px;
position: relative;
}
.content-text li::marker {
color: #756983;
}
.content-image {
display: block;
margin: 0 auto 25px auto;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
transition: transform 0.3s ease;
}
.content-image:hover {
transform: scale(1.02);
}
/* Адаптивность */
@media (max-width: 768px) {
.tabs {
flex-wrap: wrap;
}
.tab-button {
font-size: 12px;
padding: 15px 12px;
}
.tab-content td {
padding: 20px;
}
.content-image {
max-width: 100%;
height: auto;
}
}
/* Скроллбар */
.tab-content::-webkit-scrollbar {
width: 8px;
}
.tab-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.tab-content::-webkit-scrollbar-thumb {
background: #756983;
border-radius: 4px;
}
.tab-content::-webkit-scrollbar-thumb:hover {
background: #978fa1;
}
</style>
</head>
<body>
<div class="tab-wrapper">
<div class="tabs">
<button class="tab-button active" onclick="openTab('tab1')">Город N</button>
<button class="tab-button" onclick="openTab('tab2')">Руководители</button>
<button class="tab-button" onclick="openTab('tab3')">Простой человек</button>
<button class="tab-button" onclick="openTab('tab4')">Общая информация</button>
</div>
<table class="tab-container">
<!-- Вкладка 1: Город N -->
<tbody id="tab1" class="tab-content active">
<tr>
<td class="content-text">
<img src="https://i.imgur.com/xhR7kvi.jpeg" alt="Вид города N" width="300" height="168" class="content-image">
<p><strong>Город N</strong> — это суровый, отрезанный от внешнего мира город, расположенный среди вечных снегов и окутанный густыми клубами дыма от заводов и пылью, разносимой с шахт. С населением около 25000 человек, большая часть жителей работает на градообразующих предприятиях, в то время как остальные заняты в социальной и административной сферах.</p>
<p>Особенность города в том, что здесь полностью отсутствует сельское хозяйство, и все жизненно необходимые товары, включая еду и оборудование, доставляются с неба загадочной организацией. Огромные транспортные корабли регулярно сбрасывают контейнеры с припасами, поддерживая существование этого изолированного сообщества.</p>
<p>Над городом всегда висят две луны, что делает его пейзаж ещё более необычным и суровым. Одна из лун большая и светлая, в то время как вторая — меньшая и фиолетовая. Эти два небесных спутника придают ночам города особую атмосферу, но в повседневной жизни они не влияют на события, и жители привыкли к их присутствию.</p>
<p>Политический строй города базируется на принципах тоталитарного социализма, где вся система построена на строгом разделении ресурсов в зависимости от труда. Простой принцип: хорошо работаешь — получаешь лучшие пайки и товары; работаешь плохо — остаёшься на скромных подачках.</p>
<p>Однако, несмотря на это, в городе существует чёткое социальное расслоение между элитой и рабочими. Руководители заводов и шахт, а также городская администрация живут в комфорте и роскоши, скрытой за высокими заборами частных домов. Они контролируют распределение поступающих с неба товаров, получая доступ к лучшим продуктам и ресурсам в первую очередь. Простой рабочий класс, живущий в многоквартирных домах, вынужден довольствоваться тем, что остаётся.</p>
<p>Жители города привыкли к этому укладу, где каждый знает своё место, и не пытаются оспаривать существующий порядок. Город N существует в замкнутом цикле — жизнь под вечными снегами, зависимость от внешних поставок и строгая иерархия, которая не оставляет места для перемен.</p>
</td>
</tr>
</tbody>
<!-- Вкладка 2: Руководители -->
<tbody id="tab2" class="tab-content">
<tr>
<td class="content-text">
<img src="https://i.imgur.com/hiJAsy4.jpeg" alt="Руководители города N" width="300" height="168" class="content-image">
<p>К этой группе людей относятся те, кто знает настоящую сущность города N. Они не живут в типичных панельных домах, а скрываются за высокими заборами своих частных владений, в которых возводят настоящие "замки" и хранят драгоценности.</p>
<p>Привкус дешевой еды им неведом — их окружение роскошно, но всегда с налётом скрытой враждебности. Большинство из них занимают руководящие позиции на предприятиях, являются менеджерами или начальниками разного уровня. Они смотрят с иронией на наивность простых людей, потому что знают, почему в городе все устроено именно так.</p>
<p>Они любят принимать участие в светских мероприятиях, званых ужинах и вечеринках. Но самое важное — они являются основными потребителями нефритовой пыли.</p>
<p>У них есть негласное правило: одна семья — один ребёнок. Своих детей они никому не доверяют, а образование те получают на дому. Ребёнок не покидает дом, пока ему не исполнится восемнадцать лет. Возможность обычному человеку встретить ребенка на улицах города так маловероятна, что может вызвать страх и смущение.</p>
<p>Руководители, которые употребляют нефритовую пыль, отличаются фиолетовым цветом глаз. Чем ярче и насыщеннее фиолетовый оттенок, тем более чистую пыль они потребляют, и тем выше их социальный статус. Среди них соблюдается строгая иерархия, основанная на этом блеске глаз.</p>
<p>Хотя простые люди им безразличны, внутри своей группы они поддерживают тесные связи, стараются держаться ближе друг к другу, устанавливая новые знакомства и поддерживая старые, даже если между ними есть вражда. Конфликты случаются, но решаются внутри их закрытого круга. Иногда до простых людей доходит лишь слух о том, что кто-то внезапно покинул город.</p>
<p>Руководители живут гораздо дольше простых людей, иногда доживая до 200 лет. Говорят, что основатель города N до сих пор жив, хотя многие считают это лишь легендой.</p>
</td>
</tr>
</tbody>
<!-- Вкладка 3: Простой человек -->
<tbody id="tab3" class="tab-content">
<tr>
<td class="content-text">
<img src="https://i.imgur.com/2PVjUVi.jpeg" alt="Простые жители города N" width="300" height="168" class="content-image">
<p>Жизненный цикл человека в городе N начинается еще в утробе матери. Молодой семье выдают справку о беременности и сразу после этого — значительные выплаты и социальную помощь в виде колясок, одежды и продуктов питания. Эти ресурсы, а также «капитал» (специальные талоны), предоставляемый на время беременности и воспитания ребенка в первые три года, позволяют семье безбедно жить на протяжении пяти-шести лет.</p>
<p>Когда ребенку исполняется три года, его забирают из семьи. Никто в городе N не задается вопросом, куда и зачем его отправляют — это принято, так было всегда. Все эти годы потеряны, дети не помнят, что с ними происходит в этот период, а взрослые не знают и не интересуются.</p>
<p>В возрасте 14 лет ребенок возвращается в семью и начинает обучение в школе. За четыре года ему дают базовые навыки, необходимые для жизни. В школе учат основам этикета, кулинарии, гигиены, простым знаниям о климате, воспроизводству, а также развивают навыки письма и счета на базовом уровне. Никто не удивляется, почему дети начинают учиться так поздно, ведь за короткий срок они успевают достичь уровня обычного рабочего.</p>
<p>По окончании школы проводится тестирование, которое определяет дальнейшую судьбу 18-летнего молодого человека. В зависимости от результатов его либо отправляют работать на шахты, либо дают возможность поступить в академию на три года обучения.</p>
<p>После окончания академии каждый человек находит себе пару, старается завести ребенка, чтобы снова получить талоны и вести спокойную жизнь. Так продолжается, пока не приходит естественный конец.</p>
<p>Женщины обычно работают на швейной фабрике, в школе, больнице или магазине. Мужчины находят себя на заводе, в карьере, на грузоперевозках или устраиваются курьерами или проводниками в компании "Нефритовая пыль".</p>
</td>
</tr>
</tbody>
<!-- Вкладка 4: Общая информация -->
<tbody id="tab4" class="tab-content">
<tr>
<td class="content-text">
<ul>
<li><strong>Кто главный?</strong> Главный — совет города, в него входят руководители градообразующих предприятий и академии.</li>
<li><strong>Погода:</strong> круглый год лежит снег, только ближе к летним месяцам он сходит с официальных трасс и люди могут увидеть цвет асфальта. Морозы, сильные ветра, вьюга — ежедневная рутина.</li>
<li><strong>Космос:</strong> в небе можно заметить две луны, а это значит, что мы не на Земле. Об этом знает вся элита, простые граждане даже не догадываются.</li>
<li><strong>Образование:</strong> учитывайте, что простые люди не самые грамотные представители города. Они знают биологию, им рассказывают, как делать детей в миссионерской позе, учат писать сочинения и считать зарплату. Можно сказать, что с этой примитивной базой, кроме как есть/пить/в туалет ходить, они и выходят из школы. Но они очень быстро набирают обороты и впитывают информацию, поэтому в академии распространены отношения наставничества: старший учит младшего, учитель берет шефство над студентом и т.д.</li>
<li>В городе N, с его суровыми условиями, закрытой социальной структурой и тоталитарным режимом, <strong>праздники</strong> играют важную роль в поддержании дисциплины и мотивации, а также служат для укрепления единства среди простого населения. Эти события не только напоминают о трудовой морали, но и позволяют жителям отдохнуть и почувствовать свою принадлежность к городу.</li>
</ul>
<details>
<summary>
<h3>Праздники города N:</h3>
</summary>
<div>
<p><strong>1. День Поставки</strong><br>
Ежегодный праздник, посвящённый важности регулярных поставок, которые организация сбрасывает с неба. Это день благодарности за ресурсы, без которых город не может существовать. Жители украшают свои дома символами коробок и контейнеров, а также устраивают скромные пиры, используя продукты, полученные за прошедший год. В этот день организуются массовые мероприятия, в которых подчёркивается значимость труда каждого горожанина для поддержания этого процесса.</p>
<p><strong>2. Праздник Рудокопов</strong><br>
Этот день чествует шахтёров, работающих в тяжёлых условиях под землёй. На центральной площади проходят церемонии награждения лучших работников, а также устраиваются небольшие парады. В школах и академиях детям рассказывают о важности шахтёрского труда, организуются экскурсии на заводы и шахты, где молодёжи показывают, как работают горняки. Вечером семьи собираются за общим столом, отмечая праздник в кругу близких.</p>
<p><strong>3. День Нефритовой пыли</strong><br>
Этот праздник организован в честь продукта, который занимает центральное место в жизни города. Официально он посвящён успехам науки и технологии в создании и использовании пыли, но неофициально это день, когда элита города устраивает закрытые приёмы и вечеринки. Простым людям этот праздник напоминает о недосягаемости высших слоёв общества, однако для них также проводятся городские мероприятия, где рассказывается о пользе пыли для развития города.</p>
<p><strong>4. День Руководителей</strong><br>
Праздник, в который чествуют руководителей предприятий и государственных структур. В этот день простые жители демонстрируют свою благодарность элите за её "заботу" о городе. Улицы украшают флагами, на предприятиях проходят праздничные линейки с награждениями. Для простого населения это возможность увидеть парад элиты и почувствовать себя частью большого механизма города.</p>
<p><strong>5. День Достижений Академии</strong><br>
Это ежегодный праздник, приуроченный к выпуску студентов из Академии «Нефритовая пыль». В этот день проводят торжественные церемонии вручения дипломов лучшим студентам, а на центральной площади города организуют выставки, где показывают достижения студентов разных факультетов. Для жителей это день гордости за своих детей, которые готовятся занять свои места в жизни города. Кроме того, организуются выступления студентов факультета Проводников, что привлекает особое внимание элиты.</p>
<p><strong>6. День тепла</strong><br>
Зимой, в самые холодные дни, жители города отмечают праздник стойкости и выносливости. День Закалённых символизирует способность людей выживать в суровых условиях вечного снега и холода. Проводятся массовые гуляния на улице, устраиваются конкурсы на выносливость, символизирующие способность противостоять тяжёлым условиям. В этот день жители города демонстрируют свою силу духа, организуются спортивные мероприятия, а по вечерам разводят большие костры, возле которых люди собираются, чтобы согреться и обменяться историями.</p>
<p><strong>7. День Труда и Успехов</strong><br>
Ежегодный праздник, посвящённый трудовым достижениям. В этот день все жители города выходят на символические "субботники" — организуются массовые уборки улиц и общественных мест. Руководители предприятий награждают лучших работников грамотами и небольшими премиями. После работы организуются концерты, где выступают молодёжь и творческие коллективы, а вечером — общегородское застолье. Этот праздник подчёркивает важность коллективного труда и вклад каждого в развитие города.</p>
<p><strong>8. Праздник Нефритовой Ночи</strong><br>
Это самый таинственный и закрытый праздник города N. Он проводится только для элиты и окружён множеством слухов. Горожане знают, что в этот день руководители города собираются на тайные приёмы, чтобы чествовать своих союзников и обмениваться нефритовой пылью. На улицах города царит напряжённая тишина, а простому населению запрещено покидать свои дома после заката. В это время простые жители могут лишь догадываться, какие решения и сделки заключаются за закрытыми дверями.</p>
<p><strong>9. День Детства</strong><br>
Официально этот праздник посвящён детям города N, которые считаются будущим общества. В этот день власти организуют массовые мероприятия для детей: игры, театральные представления и раздачу сладостей. Однако за фасадом праздника скрывается зловещая реальность: это день, когда система забирает очередную партию детей в возрасте 3 лет для отправки на 11-летнюю изоляцию. Родители, несмотря на внешние радости, испытывают скрытую тревогу, зная, что этот день может стать началом долгого и необратимого пути для их ребёнка.</p>
</div>
</details>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function openTab(tabId) {
// Убираем активность у всех вкладок и скрываем содержимое
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
document.querySelectorAll('.tab-button').forEach(tab => tab.classList.remove('active'));
// Отображаем нужную вкладку
document.getElementById(tabId).classList.add('active');
document.querySelector(`[onclick="openTab('${tabId}')"]`).classList.add('active');
}
</script>
</body>
[/html]
