https://pastein.ru/t/ChA
Загрузка данных
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мариинск купеческий — Интерактивный исторический портал</title>
<!-- Подключение Tailwind CSS для адаптивной современной верстки -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Playfair Display для заголовков, Montserrat для интерфейса -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- FontAwesome для атмосферных исторических и интерфейсных иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: {
deep: '#0b2545',
medium: '#134074',
light: '#1d2d44',
},
gold: {
rich: '#c5a059',
dark: '#9a7836',
soft: '#ebd2a3',
},
paper: {
cream: '#fbf9f4',
bg: '#f5f1e6',
}
},
fontFamily: {
serif: ['Playfair Display', 'serif'],
sans: ['Montserrat', 'sans-serif'],
}
}
}
}
</script>
<style>
/* Дополнительные тонкие стилистические штрихи для купеческой атмосферы */
.paper-texture {
background-color: #fbf9f4;
background-image: radial-gradient(#ebd2a3 0.5px, transparent 0.5px), radial-gradient(#ebd2a3 0.5px, #fbf9f4 0.5px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-opacity: 0.15;
}
/* Стильный скроллбар в золотисто-синих тонах */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0b2545;
}
::-webkit-scrollbar-thumb {
background: #c5a059;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #ebd2a3;
}
/* Анимация плавного появления контента */
.fade-in-content {
animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Специфический слайдер Было/Стало */
.slider-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.slider-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.before-image {
z-index: 1;
}
.after-image {
z-index: 2;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.slider-handle {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: #c5a059;
left: 50%;
z-index: 3;
cursor: ew-resize;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.slider-handle::after {
content: '↔';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #134074;
border: 2px solid #c5a059;
color: #fbf9f4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body class="bg-navy-deep font-sans min-h-screen text-navy-light flex flex-col">
<!-- ВЕРХНЯЯ ШАПКА САЙТА (Header) -->
<header class="bg-navy-deep border-b-4 border-gold-rich text-white py-4 px-6 relative z-50 shadow-md">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<!-- Зона бренда / Логотип -->
<div class="flex items-center gap-4">
<div class="border-2 border-gold-rich p-2 rounded-full bg-navy-medium flex items-center justify-center w-14 h-14 shadow-inner">
<span class="text-gold-rich font-serif font-bold text-2xl">М</span>
</div>
<div>
<h1 class="font-serif font-bold text-2xl md:text-3xl tracking-wide text-gold-soft">Мариинск</h1>
<p class="text-xs tracking-widest text-slate-300 uppercase font-medium">Живой музей сибирского купечества</p>
</div>
</div>
<!-- 5 ГЛАВНЫХ КАТЕГОРИЙ (В соответствии со схемой PowerPoint) -->
<nav class="flex flex-wrap justify-center gap-2 md:gap-3">
<button onclick="switchBlock(1)" class="block-nav-btn px-4 py-2 rounded text-sm font-semibold border border-gold-rich/30 hover:border-gold-rich bg-navy-medium text-gold-soft transition" id="block-btn-1">
<i class="fa-solid fa-hourglass-start mr-1.5"></i>Краеведение
</button>
<button onclick="switchBlock(2)" class="block-nav-btn px-4 py-2 rounded text-sm font-semibold border border-gold-rich/30 hover:border-gold-rich hover:bg-navy-medium text-slate-300 transition" id="block-btn-2">
<i class="fa-solid fa-building-columns mr-1.5"></i>Культура
</button>
<button onclick="switchBlock(3)" class="block-nav-btn px-4 py-2 rounded text-sm font-semibold border border-gold-rich/30 hover:border-gold-rich hover:bg-navy-medium text-slate-300 transition" id="block-btn-3">
<i class="fa-solid fa-gem mr-1.5"></i>Купечество
</button>
<button onclick="switchBlock(4)" class="block-nav-btn px-4 py-2 rounded text-sm font-semibold border border-gold-rich/30 hover:border-gold-rich hover:bg-navy-medium text-slate-300 transition" id="block-btn-4">
<i class="fa-solid fa-map-location-dot mr-1.5"></i>Туризм
</button>
<button onclick="switchBlock(5)" class="block-nav-btn px-4 py-2 rounded text-sm font-semibold border border-gold-rich/30 hover:border-gold-rich hover:bg-navy-medium text-slate-300 transition" id="block-btn-5">
<i class="fa-solid fa-sliders mr-1.5"></i>Инфо-сервисы
</button>
</nav>
</div>
</header>
<!-- РАБОЧАЯ ОБЛАСТЬ (Боковая панель 16 страниц + Контентная зона) -->
<div class="flex-grow flex flex-col lg:flex-row max-w-7xl w-full mx-auto p-4 lg:p-6 gap-6">
<!-- БОКОВОЙ СПИСОК 16 СТРАНИЦ (Sidebar) -->
<aside class="w-full lg:w-80 shrink-0 bg-navy-medium border border-gold-rich/30 rounded-xl p-4 shadow-lg text-white self-start">
<h3 class="font-serif font-bold text-lg mb-4 text-gold-soft border-b border-gold-rich/20 pb-2 flex items-center justify-between">
<span><i class="fa-solid fa-folder-open mr-2 text-gold-rich"></i>Реестр страниц</span>
<span class="text-xs px-2 py-0.5 rounded bg-gold-rich text-navy-deep font-sans font-bold">16 Глав</span>
</h3>
<ul class="space-y-1.5 max-h-[480px] lg:max-h-none overflow-y-auto pr-1" id="page-list">
<!-- Страницы генерируются JavaScript для динамической подсветки активных блоков -->
</ul>
</aside>
<!-- ЦЕНТРАЛЬНАЯ КОНТЕНТНАЯ ПЛОЩАДКА -->
<main class="flex-grow bg-white border-2 border-gold-rich rounded-xl shadow-2xl overflow-hidden flex flex-col paper-texture min-h-[500px]" id="content-container">
<!-- Динамически обновляемый контент через JS -->
</main>
</div>
<!-- ПОДВАЛ САЙТА (Footer) -->
<footer class="bg-navy-deep border-t-2 border-gold-rich text-slate-400 py-6 px-6 mt-auto">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm">
<div class="flex items-center gap-2">
<span class="text-gold-rich font-serif font-bold">✻</span>
<p>© 2026 Краеведческий портал «Мариинск — купеческий город»</p>
</div>
<div class="flex flex-wrap justify-center gap-4 text-xs">
<button onclick="loadPage(15)" class="hover:text-gold-soft transition"><i class="fa-solid fa-images mr-1"></i>Слайдер Было/Стало</button>
<button onclick="loadPage(16)" class="hover:text-gold-soft transition"><i class="fa-solid fa-envelope mr-1"></i>Обратная связь</button>
<button onclick="loadPage(13)" class="hover:text-gold-soft transition"><i class="fa-solid fa-map mr-1"></i>Карта достопримечательностей</button>
</div>
</div>
</footer>
<!-- ДАННЫЕ И ИНТЕРАКТИВНЫЙ ДВИЖОК САЙТА -->
<script>
// Полная база данных по всем 16 страницам согласно иерархическим блокам
const pagesData = {
1: {
title: "1. Главная страница портала",
block: 1,
icon: "fa-house",
content: `
<div class="p-6 md:p-8 fade-in-content flex flex-col h-full">
<div class="mb-6">
<span class="inline-block bg-navy-medium/10 border border-navy-medium/20 text-navy-medium px-3 py-1 rounded text-xs font-bold uppercase tracking-wider mb-2">Добро пожаловать</span>
<h2 class="font-serif font-bold text-3xl md:text-4xl text-navy-deep">Врата в Историю Купечества</h2>
<div class="h-1 w-20 bg-gold-rich mt-2"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center mb-6">
<div class="space-y-4">
<p class="text-base leading-relaxed text-slate-700">
Мариинск — уникальный сибирский город, сохранивший в дереве и камне неповторимый облик купеческой эпохи конца XIX - начала XX веков. Наш сайт — это интерактивная энциклопедия, созданная для того, чтобы каждый желающий мог прикоснуться к легендам, зодчеству и тайнам этого заповедного края.
</p>
<p class="text-base text-slate-700">
Исследуйте 16 страниц уникального краеведческого контента, используя меню верхнего уровня или боковой реестр. Вас ждут редкие архивные кадры, легенды о спрятанном золоте и интерактивные маршруты!
</p>
</div>
<div class="border-2 border-gold-rich p-1 rounded-lg shadow-md bg-white overflow-hidden h-64">
<img src="https://miro.medium.com/v2/resize:fit:478/0*w72pg78ENfHBs1eU." alt="Деревянное зодчество" class="w-full h-full object-cover">
</div>
</div>
<!-- Промо-карточки быстрого доступа -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-auto">
<div onclick="loadPage(4)" class="bg-white p-4 rounded-lg border-l-4 border-gold-rich shadow-sm hover:shadow-md cursor-pointer transition">
<i class="fa-solid fa-house-chimney-window text-navy-medium text-2xl mb-2"></i>
<h4 class="font-bold text-sm text-navy-deep">Резное зодчество</h4>
<p class="text-xs text-slate-500 mt-1">Изучите секреты пропильного деревянного кружева наличников.</p>
</div>
<div onclick="loadPage(15)" class="bg-white p-4 rounded-lg border-l-4 border-navy-medium shadow-sm hover:shadow-md cursor-pointer transition">
<i class="fa-solid fa-clock-rotate-left text-gold-rich text-2xl mb-2"></i>
<h4 class="font-bold text-sm text-navy-deep">Машина Времени</h4>
<p class="text-xs text-slate-500 mt-1">Интерактивный слайдер фотографий Было / Стало.</p>
</div>
<div onclick="loadPage(13)" class="bg-white p-4 rounded-lg border-l-4 border-gold-rich shadow-sm hover:shadow-md cursor-pointer transition">
<i class="fa-solid fa-compass text-navy-medium text-2xl mb-2"></i>
<h4 class="font-bold text-sm text-navy-deep">Пешие маршруты</h4>
<p class="text-xs text-slate-500 mt-1">Прогулка по историческим местам с гидом-картой.</p>
</div>
</div>
</div>
`
},
2: {
title: "2. История основания города",
block: 1,
icon: "fa-hourglass-start",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">От села Кийского до Мариинска</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
История Мариинска восходит к началу XVIII века. В 1720 году на старинном Сибирском тракте возникло небольшое поселение под названием <strong>Никольский погост</strong>, которое в последующие десятилетия трансформировалось в крупное село <strong>Кийское</strong>.
</p>
<div class="bg-amber-50 border-l-4 border-gold-rich p-4 rounded my-4">
<h4 class="font-bold text-navy-deep mb-1"><i class="fa-solid fa-map-location mr-2"></i>Значение Сибирского тракта</h4>
<p class="text-sm">Тракт обеспечил огромный приток переселенцев, ямщиков, ремесленников и купцов. Село богатело на транзитной торговле, обслуживая проходящие обозы с пушниной, чаем и металлом.</p>
</div>
<p>
В 1856 году село Кийское получило статус окружного города. А уже в 1857 году Император Александр II подписал указ о переименовании города в <strong>Мариинск</strong> — в честь своей супруги, Императрицы Марии Александровны. Мариинск стал вторым по значимости купеческим и административным центром Кузнецкого бассейна.
</p>
</div>
</div>
`
},
3: {
title: "3. Купеческий Мариинск",
block: 3,
icon: "fa-coins",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Золотая лихорадка и династии</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- Карточка Савельевых -->
<div class="bg-white p-5 rounded-lg border border-slate-200 shadow-sm flex flex-col">
<div class="w-16 h-16 rounded-full bg-amber-50 border border-gold-rich flex items-center justify-center text-gold-rich text-2xl mb-4 self-center shadow">
<i class="fa-solid fa-crown"></i>
</div>
<h4 class="font-serif font-bold text-lg text-center text-navy-deep mb-2">Савельевы</h4>
<p class="text-xs text-slate-600 text-center flex-grow">Крупнейшие сибирские меценаты и торговцы. Заложили основы благотворительности, строили храмы и школы для горожан.</p>
</div>
<!-- Карточка Полутовых -->
<div class="bg-white p-5 rounded-lg border border-slate-200 shadow-sm flex flex-col">
<div class="w-16 h-16 rounded-full bg-amber-50 border border-gold-rich flex items-center justify-center text-gold-rich text-2xl mb-4 self-center shadow">
<i class="fa-solid fa-coins"></i>
</div>
<h4 class="font-serif font-bold text-lg text-center text-navy-deep mb-2">Полутовы</h4>
<p class="text-xs text-slate-600 text-center flex-grow">Короли купеческого золотого промысла. Держали прииски по всей речной системе Прикиянья, обеспечивали рабочие места.</p>
</div>
<!-- Карточка Прейсманов -->
<div class="bg-white p-5 rounded-lg border border-slate-200 shadow-sm flex flex-col">
<div class="w-16 h-16 rounded-full bg-amber-50 border border-gold-rich flex items-center justify-center text-gold-rich text-2xl mb-4 self-center shadow">
<i class="fa-solid fa-scale-balanced"></i>
</div>
<h4 class="font-serif font-bold text-lg text-center text-navy-deep mb-2">Прейсманы</h4>
<p class="text-xs text-slate-600 text-center flex-grow">Индустриальные лидеры гильдии. Владели передовыми винокуренными и мыловаренными производствами губернии.</p>
</div>
</div>
<p class="text-slate-700 text-sm md:text-base">
Период золотой лихорадки превратил Мариинск в центр сибирского богатства. Купцы первой и второй гильдий возводили шикарные кирпичные усадьбы, соревнуясь друг с другом в роскоши отделки и архитектурном изяществе особняков.
</p>
</div>
`
},
4: {
title: "4. Архитектура и зодчество",
block: 3,
icon: "fa-tree",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-2">Сибирское резное кружево</h2>
<p class="text-xs text-gold-dark font-semibold uppercase tracking-widest mb-4">Архитектурный бренд Мариинска</p>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинское «деревянное барокко» — это вершина плотницкого мастерства. Дома, украшенные сквозной пропильной резьбой, создают ощущение тончайшей вуали, наброшенной на крепкий бревенчатый сруб.
</p>
<p>
Характерной чертой являются массивные <strong>деревянные наличники</strong>. Каждый узор имел сакральный смысл: солярные знаки защищали дом от злых духов, а растительные мотивы привлекали богатый урожай.
</p>
</div>
<div class="border-2 border-gold-rich p-2 bg-white rounded-lg shadow-lg">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Siberian_%28%3F%29_merchant_woman_by_anonim_%281810s%2C_GIM%29.jpg" alt="Купеческая атмосфера" class="w-full h-64 object-cover rounded">
<p class="text-[11px] text-slate-500 italic text-center mt-2">Архивный портрет купеческой женщины, заложившей стиль эпохи</p>
</div>
</div>
</div>
`
},
5: {
title: "5. Памятники и монументы",
block: 3,
icon: "fa-monument",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Величественная скульптура</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div class="border-2 border-gold-rich p-2 bg-white rounded-lg shadow-lg">
<img src="https://vsuete.com/wp-content/uploads/2016/11/Monument-to-the-Russian-Empress-Maria-Alexandrovna-1824-1880-after-whom-in-1857-the-Siberian-city-Mariinsk-was-named.jpg" alt="Памятник Императрице" class="w-full h-72 object-cover rounded">
</div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<h3 class="font-serif font-bold text-xl text-navy-medium">Монумент Императрице Марии</h3>
<p>
Главной гордостью и украшением исторического центра Мариинска является величественный памятник <strong>Императрице Марии Александровне</strong>, открытый в честь покровительницы, давшей имя городу.
</p>
<p>
Изящная бронзовая фигура восседает на кованой лавке, держа в руках символическую грамоту. Горожане и туристы любят присаживаться рядом для памятных снимков.
</p>
<p>
Также в городе установлены бюст императору Александру II и колоритная скульптура «Купец-основатель» на главной улице.
</p>
</div>
</div>
</div>
`
},
6: {
title: "6. Музеи города",
block: 2,
icon: "fa-building-columns",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Музейный треугольник</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-slate-700">
<div class="bg-white p-5 rounded border border-slate-200 shadow-sm">
<i class="fa-solid fa-scroll text-2xl text-gold-rich mb-2"></i>
<h4 class="font-bold text-navy-deep">Музей Бересты</h4>
<p class="text-xs mt-2">Уникальное собрание берестяных изделий сибирских умельцев, не имеющее аналогов по технике резьбы.</p>
</div>
<div class="bg-white p-5 rounded border border-slate-200 shadow-sm">
<i class="fa-solid fa-landmark text-2xl text-navy-medium mb-2"></i>
<h4 class="font-bold text-navy-deep">Краеведческий</h4>
<p class="text-xs mt-2">Хранилище редких купеческих артефактов, палеонтологических находок и предметов быта XIX века.</p>
</div>
<div class="bg-white p-5 rounded border border-slate-200 shadow-sm">
<i class="fa-solid fa-pen-nib text-2xl text-gold-rich mb-2"></i>
<h4 class="font-bold text-navy-deep">Дом В.А. Чивилихина</h4>
<p class="text-xs mt-2">Литературно-мемориальный комплекс известного писателя-эколога, сохранивший атмосферу его сибирского детства.</p>
</div>
</div>
</div>
`
},
7: {
title: "7. Мариинск в годы ВОВ",
block: 1,
icon: "fa-shield-halved",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Подвиг жителей Мариинска в тылу</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
С первых дней Великой Отечественной войны Мариинск перестроил свою жизнь на военный лад. Тысячи жителей отправились на передовую. Оставшиеся горожане, преимущественно женщины и подростки, совершали ежедневный трудовой подвиг.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div class="bg-white p-4 rounded border-l-4 border-red-600 shadow-sm">
<h4 class="font-bold text-navy-deep"><i class="fa-solid fa-square-plus text-red-600 mr-2"></i>Эвакогоспитали</h4>
<p class="text-xs mt-1">Город принял и развернул несколько крупных эвакуационных госпиталей, поставив на ноги тысячи тяжелораненых советских солдат.</p>
</div>
<div class="bg-white p-4 rounded border-l-4 border-red-600 shadow-sm">
<h4 class="font-bold text-navy-deep"><i class="fa-solid fa-gears text-red-600 mr-2"></i>Продукция для фронта</h4>
<p class="text-xs mt-1">Местные артели и ликеро-водочный завод бесперебойно поставляли продовольствие, обмундирование и спецсоставы для военных нужд.</p>
</div>
</div>
</div>
</div>
`
},
8: {
title: "8. Мариинская ссылка (Сиблаг)",
block: 2,
icon: "fa-link-slash",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Трагические страницы истории</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинск неразрывно связан с трагической эпохой сталинских репрессий. С 1930-х годов город стал крупным административным центром <strong>Сиблага</strong> (Сибирского исправительно-трудового лагеря).
</p>
<p>
Через Мариинский распределительный пункт прошли сотни тысяч заключенных, среди которых были выдающиеся ученые, литераторы, актеры и духовенство. Лагеря Сиблага занимались лесозаготовками, строительством дорог и сельскохозяйственным освоением региона.
</p>
<div class="bg-slate-100 p-4 rounded border border-slate-300 italic text-sm">
<i class="fa-solid fa-quote-left mr-2 text-slate-400"></i>
Сегодня в городе установлен трогательный мемориал жертвам Сиблага, напоминающий потомкам о ценности человеческой жизни и свободы.
</div>
</div>
</div>
`
},
9: {
title: "9. Природа и окрестности",
block: 4,
icon: "fa-water",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Живописная река Кия</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинск раскинулся на живописных берегах сибирской реки <strong>Кия</strong> — одной из чистейших рек региона, берущей свое начало в горах Кузнецкого Алатау.
</p>
<p>
Окрестности города славятся богатой флорой и фауной, уникальными природными заказниками и экологическими тропами. Кия привлекает любителей сплавов, рыбалки и тихого загородного отдыха. На берегах реки можно встретить живописные песчаные пляжи и отвесные скалы.
</p>
</div>
<div class="border-2 border-gold-rich p-2 bg-white rounded-lg shadow-lg">
<img src="https://img-fotki.yandex.ru/get/6708/36710540.97/0_c9e65_f6ab5399_XXL.jpg" alt="Река Кия архив" class="w-full h-56 object-cover rounded">
<p class="text-[11px] text-slate-500 italic text-center mt-2">Улица Большая (Ленина) у реки, архивное фото</p>
</div>
</div>
</div>
`
},
10: {
title: "10. Промышленность",
block: 1,
icon: "fa-industry",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Развитие индустрии и экономики</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинская промышленность родилась благодаря предприимчивым сибирским купцам. Первыми локомотивами экономики города стали купеческие пивоваренные заводы, мыловаренные и кожевенные мастерские, а также винокуренные заводы, снабжавшие продукцией всю Сибирь.
</p>
<p>
Современный Мариинск развивает деревообрабатывающие, пищевые и транспортно-логистические направления, бережно сохраняя индустриальные памятники купеческого зодчества.
</p>
</div>
</div>
`
},
11: {
title: "11. Знаменитые земляки",
block: 2,
icon: "fa-people-group",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Имена, прославившие край</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинская земля воспитала множество выдающихся людей, оставивших неизгладимый след в российской истории, литературе и искусстве.
</p>
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-start gap-4">
<i class="fa-solid fa-feather-pointed text-3xl text-gold-rich shrink-0 mt-1"></i>
<div>
<h4 class="font-serif font-bold text-navy-deep">Владимир Алексеевич Чивилихин (1928–1984)</h4>
<p class="text-xs mt-1">Известный советский писатель, эколог и общественный деятель, автор знаменитого романа-эссе «Память». В Мариинске бережно сохранен его мемориальный дом-музей.</p>
</div>
</div>
</div>
</div>
`
},
12: {
title: "12. Легенды и мифы",
block: 4,
icon: "fa-ghost",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Тайны сибирских подземелий</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4 text-slate-700 text-sm md:text-base">
<p>
Мариинск окутан ореолом интригующих легенд. Одной из самых популярных среди старожилов и историков является легенда о <strong>разветвленных подземных ходах</strong> под историческим центром города.
</p>
<div class="bg-amber-50 p-4 rounded border-l-4 border-gold-rich text-sm">
<h4 class="font-bold text-navy-deep mb-1">Купеческие тайники</h4>
<p>Считается, что богатые купцы связывали свои каменные усадьбы тайными тоннелями, чтобы скрытно переправлять золото, товары или скрываться в периоды волнений.</p>
</div>
<p>
Также в окрестностях города до сих пор ищут легендарные «купеческие клады» — золотые слитки, якобы спрятанные купцами-золотопромышленниками перед приходом советской власти.
</p>
</div>
</div>
`
},
13: {
title: "13. Туристические маршруты",
block: 4,
icon: "fa-route",
content: `
<div class="p-6 md:p-8 fade-in-content flex flex-col h-full">
<div class="mb-4">
<h2 class="font-serif font-bold text-3xl text-navy-deep">Карта пешеходного маршрута</h2>
<p class="text-xs text-gold-dark font-semibold">Нажмите на маркер достопримечательности для просмотра деталей</p>
<div class="h-1 w-20 bg-gold-rich mt-2"></div>
</div>
<!-- Интерактивная векторная SVG карта города -->
<div class="relative bg-amber-50 border-2 border-gold-rich rounded-lg p-2 overflow-hidden h-72 mb-4">
<svg class="w-full h-full" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<!-- Река Кия -->
<path d="M 0 100 Q 150 120 300 80 T 600 110" fill="none" stroke="#2b6cb0" stroke-width="12" opacity="0.4"/>
<text x="50" y="85" fill="#2b6cb0" class="text-xs font-bold italic" opacity="0.6">Река Кия</text>
<!-- Сетка улиц -->
<line x1="50" y1="200" x2="550" y2="200" stroke="#cbd5e0" stroke-width="6"/>
<text x="250" y="220" fill="#718096" class="text-[10px] font-semibold tracking-widest">УЛИЦА ЛЕНИНА (БОЛЬШАЯ)</text>
<line x1="200" y1="50" x2="200" y2="280" stroke="#cbd5e0" stroke-width="4"/>
<line x1="400" y1="50" x2="400" y2="280" stroke="#cbd5e0" stroke-width="4"/>
<!-- Маркеры достопримечательностей -->
<g class="cursor-pointer group" onclick="showMapDetail('emp')">
<circle cx="200" cy="200" r="10" fill="#c5a059" stroke="#0b2545" stroke-width="2"/>
<circle cx="200" cy="200" r="4" fill="#0b2545"/>
<text x="170" y="180" fill="#0b2545" class="text-[11px] font-bold">Памятник Марии</text>
</g>
<g class="cursor-pointer group" onclick="showMapDetail('mus')">
<circle cx="400" cy="150" r="10" fill="#c5a059" stroke="#0b2545" stroke-width="2"/>
<circle cx="400" cy="150" r="4" fill="#0b2545"/>
<text x="360" y="135" fill="#0b2545" class="text-[11px] font-bold">Музей Бересты</text>
</g>
<g class="cursor-pointer group" onclick="showMapDetail('chiv')">
<circle cx="290" cy="240" r="10" fill="#c5a059" stroke="#0b2545" stroke-width="2"/>
<circle cx="290" cy="240" r="4" fill="#0b2545"/>
<text x="250" y="270" fill="#0b2545" class="text-[11px] font-bold">Дом В.А. Чивилихина</text>
</g>
</svg>
</div>
<!-- Окно деталей по карте -->
<div class="bg-white p-4 rounded border border-gold-rich/30" id="map-detail-panel">
<h4 class="font-serif font-bold text-navy-deep text-base" id="map-detail-title">Выберите объект на карте</h4>
<p class="text-xs text-slate-600 mt-1" id="map-detail-text">Интерактивный гид покажет информацию о ключевых точках пешеходного маршрута «Каменное кружево Мариинска».</p>
</div>
</div>
`
},
14: {
title: "14. Культурные события",
block: 4,
icon: "fa-calendar-days",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Календарь праздников и ярмарок</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="space-y-4">
<div class="flex gap-4 p-4 bg-white rounded border border-slate-200 shadow-sm">
<div class="bg-gold-rich/10 text-gold-dark font-bold text-center px-3 py-2 rounded h-fit shrink-0">
<span class="block text-lg line-height-none">12</span>
<span class="text-xs uppercase">Июня</span>
</div>
<div>
<h4 class="font-serif font-bold text-navy-deep">День города и Купеческая Ярмарка</h4>
<p class="text-xs text-slate-600 mt-1">Традиционные гуляния, ремесленные ряды, мастер-классы по резьбе из бересты и театрализованные представления на улице Ленина.</p>
</div>
</div>
<div class="flex gap-4 p-4 bg-white rounded border border-slate-200 shadow-sm">
<div class="bg-navy-medium/10 text-navy-medium font-bold text-center px-3 py-2 rounded h-fit shrink-0">
<span class="block text-lg line-height-none">24</span>
<span class="text-xs uppercase">Авг</span>
</div>
<div>
<h4 class="font-serif font-bold text-navy-deep">Фестиваль сибирских ремесел «Берестяной круговорот»</h4>
<p class="text-xs text-slate-600 mt-1">Всероссийский съезд народных мастеров художественной бересты и деревообработки, выставка уникальных авторских изделий.</p>
</div>
</div>
</div>
</div>
`
},
15: {
title: "15. Галерея памяти (Слайдер)",
block: 5,
icon: "fa-images",
content: `
<div class="p-6 md:p-8 fade-in-content flex flex-col h-full">
<div class="mb-4">
<h2 class="font-serif font-bold text-3xl text-navy-deep">Интерактивный слайдер «Было / Стало»</h2>
<p class="text-xs text-slate-600 mt-1">Зажмите и перетаскивайте золотистый ползунок влево и вправо для перемещения во времени!</p>
<div class="h-1 w-20 bg-gold-rich mt-2"></div>
</div>
<!-- Интерактивный Слайдер -->
<div class="slider-container my-auto" id="time-slider">
<!-- Фоновое изображение (Было - 1905 год) -->
<img src="https://img-fotki.yandex.ru/get/6708/36710540.97/0_c9e65_f6ab5399_XXL.jpg" class="slider-img before-image" alt="Старинный Мариинск">
<!-- Накладываемое изображение (Стало - 2026 год) -->
<img src="https://miro.medium.com/v2/resize:fit:478/0*w72pg78ENfHBs1eU." class="slider-img after-image" id="after-image" alt="Современный Мариинск">
<!-- Ползунок -->
<div class="slider-handle" id="slider-handle"></div>
</div>
</div>
`
},
16: {
title: "16. Контакты и О проекте",
block: 5,
icon: "fa-envelope",
content: `
<div class="p-6 md:p-8 fade-in-content">
<h2 class="font-serif font-bold text-3xl text-navy-deep mb-4">Связь с краеведами проекта</h2>
<div class="h-1 w-20 bg-gold-rich mb-6"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-serif font-bold text-lg text-navy-medium mb-3">Техническое Задание</h3>
<p class="text-xs text-slate-600 leading-relaxed">
Этот демонстрационный интерактивный веб-интерфейс спроектирован на основе утвержденной архитектуры 16 страниц, представленной в технических чертежах проекта.
</p>
<div class="mt-4 space-y-2 text-xs text-slate-700">
<p><strong>Технологический стек:</strong> HTML5, CSS3, JS, Tailwind CSS</p>
<p><strong>Разработчик:</strong> Команда цифровых историков-краеведов Мариинска.</p>
</div>
</div>
<div class="bg-white p-5 rounded-lg border border-slate-200 shadow-sm">
<h4 class="font-bold text-sm text-navy-deep mb-3">Задать вопрос исследователям</h4>
<form onsubmit="handleContactSubmit(event)" class="space-y-3">
<input type="text" placeholder="Ваше имя" required class="w-full border border-slate-300 p-2 rounded text-xs focus:outline-none focus:border-gold-rich">
<input type="email" placeholder="Ваш Email" required class="w-full border border-slate-300 p-2 rounded text-xs focus:outline-none focus:border-gold-rich">
<textarea placeholder="Ваш вопрос или дополнение по истории..." required class="w-full border border-slate-300 p-2 rounded text-xs h-20 focus:outline-none focus:border-gold-rich"></textarea>
<button type="submit" class="w-full bg-gold-rich hover:bg-gold-dark text-navy-deep py-2 rounded text-xs font-bold transition">Отправить весточку</button>
</form>
</div>
</div>
</div>
`
}
};
let activePageId = 1;
let activeBlockId = 1;
// Инициализация интерфейса при загрузке страницы
window.addEventListener('DOMContentLoaded', () => {
renderSidebar();
loadPage(1);
});
// Функция рендеринга бокового меню 16 страниц
function renderSidebar() {
const listContainer = document.getElementById('page-list');
listContainer.innerHTML = '';
Object.keys(pagesData).forEach(id => {
const page = pagesData[id];
// Выделяем страницы, принадлежащие активному верхнему блоку
const isFromActiveBlock = page.block === activeBlockId;
const isActivePage = parseInt(id) === activePageId;
const listItem = document.createElement('li');
listItem.innerHTML = `
<button onclick="loadPage(${id})" class="w-full text-left px-3 py-2 rounded text-xs md:text-sm font-medium flex items-center gap-3 transition ${
isActivePage
? 'bg-gold-rich text-navy-deep font-bold shadow-md'
: isFromActiveBlock
? 'hover:bg-navy-light text-gold-soft'
: 'hover:bg-navy-light/50 text-slate-400'
}">
<i class="fa-solid ${page.icon} shrink-0 w-4 text-center ${isActivePage ? 'text-navy-deep' : 'text-gold-rich'}"></i>
<span class="truncate">${page.title}</span>
</button>
`;
listContainer.appendChild(listItem);
});
}
// Функция переключения верхнего меню (5 Главных категорий)
function switchBlock(blockId) {
activeBlockId = blockId;
// Находим первую страницу в выбранном блоке и открываем её
const firstPageInBlock = Object.keys(pagesData).find(id => pagesData[id].block === blockId);
if (firstPageInBlock) {
activePageId = parseInt(firstPageInBlock);
}
// Обновляем визуальное состояние кнопок верхнего меню
document.querySelectorAll('.block-nav-btn').forEach((btn, index) => {
if (index + 1 === blockId) {
btn.classList.add('bg-navy-medium', 'text-gold-soft');
btn.classList.remove('text-slate-300');
} else {
btn.classList.remove('bg-navy-medium', 'text-gold-soft');
btn.classList.add('text-slate-300');
}
});
renderSidebar();
loadPage(activePageId);
}
// Функция загрузки страницы в центральный контейнер
function loadPage(pageId) {
activePageId = pageId;
activeBlockId = pagesData[pageId].block;
// Обновляем шапки блоков в меню
document.querySelectorAll('.block-nav-btn').forEach((btn, index) => {
if (index + 1 === activeBlockId) {
btn.classList.add('bg-navy-medium', 'text-gold-soft');
btn.classList.remove('text-slate-300');
} else {
btn.classList.remove('bg-navy-medium', 'text-gold-soft');
btn.classList.add('text-slate-300');
}
});
const container = document.getElementById('content-container');
container.innerHTML = pagesData[pageId].content;
renderSidebar();
// Если загружена страница с интерактивным слайдером - инициализируем его скрипты
if (pageId === 15) {
initTimeSlider();
}
}
// Драг-скрипт для интерактивного слайдера "Было / Стало"
function initTimeSlider() {
const container = document.getElementById('time-slider');
const handle = document.getElementById('slider-handle');
const afterImage = document.getElementById('after-image');
if (!container || !handle || !afterImage) return;
let isDragging = false;
function slide(x) {
const rect = container.getBoundingClientRect();
let position = ((x - rect.left) / rect.width) * 100;
if (position < 0) position = 0;
if (position > 100) position = 100;
handle.style.left = `${position}%`;
afterImage.style.clipPath = `polygon(0 0, ${position}% 0, ${position}% 100%, 0 100%)`;
}
handle.addEventListener('mousedown', () => isDragging = true);
window.addEventListener('mouseup', () => isDragging = false);
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
slide(e.clientX);
});
// Поддержка мобильных тач-устройств
handle.addEventListener('touchstart', () => isDragging = true);
window.addEventListener('touchend', () => isDragging = false);
window.addEventListener('touchmove', (e) => {
if (!isDragging) return;
slide(e.touches[0].clientX);
});
}
// Скрипт кликов по интерактивной векторной карте достопримечательностей
function showMapDetail(type) {
const title = document.getElementById('map-detail-title');
const text = document.getElementById('map-detail-text');
if (type === 'emp') {
title.innerHTML = "<i class='fa-solid fa-monument text-gold-rich mr-2'></i>Памятник Императрице Марии Александровне";
text.innerHTML = "Располагается на пересечении улицы Ленина и Соборной. Величественный бронзовый монумент, установленный в память о небесной покровительнице города. Рядом находится красивая зона для отдыха гостей города.";
} else if (type === 'mus') {
title.innerHTML = "<i class='fa-solid fa-scroll text-gold-rich mr-2'></i>Уникальный Музей Бересты Сибири";
text.innerHTML = "Музей народного творчества, содержащий уникальную экспозицию берестяной посуды, картин и резных сибирских шкатулок. Выдающийся образец того, как традиционные народные промыслы живут в современном искусстве.";
} else if (type === 'chiv') {
title.innerHTML = "<i class='fa-solid fa-house-chimney text-gold-rich mr-2'></i>Дом-музей писателя В.А. Чивилихина";
text.innerHTML = "Деревянная усадьба, где провел детство знаменитый советский писатель-краевед. Экспозиция содержит личные вещи, книги, рукописи автора и подробно рассказывает о сибирском быте начала XX века.";
}
}
// Обработка отправки формы обратной связи
function handleContactSubmit(event) {
event.preventDefault();
alert("Благодарим вас за интерес! Ваше послание успешно доставлено в архивную коллегию краеведов Мариинска. Мы свяжемся с вами в течение трех дней.");
event.target.reset();
}
</script>
</body>
</html>
```
