https://pastein.ru/t/RhA
Загрузка данных
```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>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: {
deep: '#0b1d33', /* Глубокий темно-синий */
medium: '#132d4a', /* Купеческий синий */
light: '#eef4f8', /* Светло-голубой фон */
},
gold: {
rich: '#c5a059', /* Благородное сусальное золото */
pale: '#f5efe0', /* Палевая бумага */
}
}
}
}
}
</script>
<!-- Шрифты для купеческой атмосферы -->
<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=Merriweather:ital,wght@0,300;0,700;1,300&family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, .serif-font {
font-family: 'Merriweather', serif;
}
/* Кастомный скроллбар в купеческом стиле */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0b1d33;
}
::-webkit-scrollbar-thumb {
background: #c5a059;
border-radius: 4px;
}
/* Анимации переключения вкладок */
.fade-in-content {
animation: fadeIn 0.4s ease-in-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Стили для слайдера "Было/Стало" */
.slider-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
border: 3px solid #c5a059;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
user-select: none;
-webkit-user-select: none;
}
.slider-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none; /* Защита от системного перетаскивания */
-webkit-user-drag: none;
}
.after-image {
z-index: 2;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.slider-handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
background: #c5a059;
z-index: 3;
cursor: ew-resize;
transform: translateX(-50%);
}
.slider-handle::after {
content: '↔';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
background: #0b1d33;
border: 3px solid #c5a059;
color: #c5a059;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body class="bg-navy-deep min-h-screen text-navy-light flex flex-col justify-between">
<!-- ВЕРХНЯЯ ШАПКА САЙТА (Header) -->
<header class="border-b-2 border-gold-rich bg-navy-deep sticky top-0 z-50 shadow-md">
<div class="max-w-7xl mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between gap-4">
<!-- Логотип: Герб Мариинска (Векторный SVG вместо буквы М) -->
<div class="flex items-center gap-3">
<div class="w-12 h-15 flex items-center justify-center bg-navy-medium p-1 rounded border border-gold-rich shadow">
<!-- Детальный геральдический герб Мариинска -->
<svg viewBox="0 0 100 120" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
<!-- Контур геральдического щита -->
<path d="M10,10 L90,10 C90,10 90,80 50,110 C10,80 10,10 10,10 Z" fill="#0b1d33" stroke="#c5a059" stroke-width="6"/>
<!-- Золотая императорская корона сверху -->
<path d="M30,8 L35,18 L50,13 L65,18 L70,8 L60,22 L40,22 Z" fill="#c5a059"/>
<circle cx="50" cy="6" r="3" fill="#c5a059"/>
<!-- Изящный вензель буквы "М" (Мария Александровна) -->
<path d="M25,85 L35,35 L50,65 L65,35 L75,85 M22,85 L30,85 M70,85 L78,85" fill="none" stroke="#c5a059" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Маленькая внутренняя корона над буквой М -->
<path d="M42,32 L50,38 L58,32 L55,42 L45,42 Z" fill="#c5a059"/>
</svg>
</div>
<div>
<h1 class="text-xl font-bold text-white tracking-wide">Мариинск</h1>
<p class="text-[10px] text-gold-rich uppercase tracking-widest leading-none">Живой музей сибирского купечества</p>
</div>
</div>
<!-- Главные 5 блоков навигации (Согласно схеме PowerPoint) -->
<nav class="flex flex-wrap justify-center gap-2">
<button onclick="switchBlock(1)" id="block-btn-1" class="px-3 py-1.5 rounded text-xs font-bold uppercase border border-gold-rich bg-navy-medium text-gold-rich transition">
<i class="fa-solid fa-compass mr-1.5"></i>Краеведение
</button>
<button onclick="switchBlock(2)" id="block-btn-2" class="px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition">
<i class="fa-solid fa-book-open mr-1.5"></i>Культура
</button>
<button onclick="switchBlock(3)" id="block-btn-3" class="px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition">
<i class="fa-solid fa-crown mr-1.5"></i>Купечество
</button>
<button onclick="switchBlock(4)" id="block-btn-4" class="px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition">
<i class="fa-solid fa-map-location-dot mr-1.5"></i>Туризм
</button>
<button onclick="switchBlock(5)" id="block-btn-5" class="px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition">
<i class="fa-solid fa-gears mr-1.5"></i>Сервисы
</button>
</nav>
</div>
</header>
<!-- ОСНОВНОЙ КОНТЕНТНЫЙ БЛОК -->
<div class="max-w-7xl mx-auto w-full px-4 py-6 flex-grow flex flex-col lg:flex-row gap-6">
<!-- ЛЕВОЕ БОКОВОЕ МЕНЮ (Реестр всех 16 страниц) -->
<aside class="w-full lg:w-80 shrink-0 bg-navy-medium/80 border border-gold-rich/30 rounded-lg p-4 shadow-xl">
<h2 class="text-sm font-bold uppercase tracking-wider text-gold-rich border-b border-gold-rich/20 pb-2 mb-4">
<i class="fa-solid fa-folder-open mr-2"></i>Реестр страниц (16)
</h2>
<div class="space-y-1.5 max-h-[500px] lg:max-h-none overflow-y-auto pr-1" id="pages-list">
<!-- Сюда JS вставит все 16 кнопок страниц -->
</div>
</aside>
<!-- ЦЕНТРАЛЬНАЯ КОНТЕНТНАЯ ПАНЕЛЬ -->
<main class="flex-grow bg-navy-medium/30 border border-gold-rich/20 rounded-lg p-6 lg:p-8 shadow-2xl relative min-h-[500px]" id="content-container">
<!-- Сюда динамически подгружается контент страниц -->
</main>
</div>
<!-- ПОДВАЛ САЙТА (Footer со сквозными ссылками) -->
<footer class="border-t-2 border-gold-rich bg-navy-deep py-6 mt-8 text-center text-xs text-slate-400">
<div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4">
<p>© 2026 Исторический портал Мариинска. Разработано на основе материалов краеведческой презентации.</p>
<div class="flex gap-4">
<button onclick="loadPage(15)" class="hover:text-gold-rich transition"><i class="fa-solid fa-images mr-1"></i>Слайдер</button>
<button onclick="loadPage(13)" class="hover:text-gold-rich transition"><i class="fa-solid fa-map mr-1"></i>Карта</button>
<button onclick="loadPage(16)" class="hover:text-gold-rich transition"><i class="fa-solid fa-circle-info mr-1"></i>Контакты</button>
</div>
</div>
</footer>
<!-- СЦЕНАРИИ И НАПОЛНЕНИЕ (JavaScript) -->
<script>
// База данных контента для всех 16 страниц
const pagesData = {
1: {
title: "1. Главная страница портала",
block: 1,
icon: "fa-house",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Добро пожаловать</span>
<h2 class="text-3xl font-bold text-white mt-1">Мариинск — купеческая жемчужина Сибири</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
<div class="space-y-4">
<p class="text-slate-300 leading-relaxed">
Мариинск — один из старейших и красивейших городов Кемеровской области, сохранивший уникальный облик сибирского уездного центра XIX века. Наш интерактивный портал — это цифровая энциклопедия, созданная для того, чтобы бережно перенести и раскрыть все грани историко-краеведческого наследия города.
</p>
<p class="text-slate-300 leading-relaxed">
Используйте верхнее меню категорий и боковой реестр страниц слева для подробного знакомства со всеми 16 историческими разделами. Приятного погружения в историю!
</p>
</div>
<div class="border border-gold-rich/30 rounded-lg p-5 bg-navy-deep/50 space-y-4">
<h3 class="font-bold text-gold-rich border-b border-gold-rich/20 pb-2">Мариинск в цифрах</h3>
<ul class="space-y-2 text-sm text-slate-300">
<li><strong class="text-white">1720 год</strong> — первое упоминание как Никольского погоста.</li>
<li><strong class="text-white">1856 год</strong> — присвоение статуса окружного города.</li>
<li><strong class="text-white">1857 год</strong> — переименование в Мариинск Александром II.</li>
<li><strong class="text-white">74 памятника</strong> — деревянной и каменной архитектуры под охраной.</li>
</ul>
</div>
</div>
</div>
`
},
2: {
title: "2. История основания города",
block: 1,
icon: "fa-landmark",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Краеведение</span>
<h2 class="text-3xl font-bold text-white mt-1">От Никольского погоста до уездного города</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Официальной датой основания поселения принято считать 1720 год, когда на великом Сибирском тракте возникло небольшое поселение — Никольский погост (позже село Никольское). Жители занимались обслуживанием проезжающих обозов, извозом и мелкой торговлей. С проведением Московско-Сибирского тракта значение поселения резко выросло.
</p>
<p class="text-slate-300 leading-relaxed">
В 1856 году указом Императора Александра II село Кийское было преобразовано в окружной город. А уже в следующем, 1857 году, по ходатайству сибирского купечества и общественности, город был переименован в Мариинск — в честь супруги императора, императрицы Марии Александровны. Это уникальный случай в истории Сибири, когда город получил имя высочайшей особы в знак признания его торгово-экономического потенциала.
</p>
</div>
`
},
3: {
title: "3. Купеческий Мариинск",
block: 3,
icon: "fa-gem",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Купеческое наследие</span>
<h2 class="text-3xl font-bold text-white mt-1">Золотой век сибирской торговли</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Во второй половине XIX века Мариинск стал эпицентром сибирской "золотой лихорадки". Здесь открывались золотопромышленные конторы, склады, роскошные магазины. Город стремительно богател за счет торговли спиртом, пушниной, хлебом и золотом.
</p>
<p class="text-slate-300 leading-relaxed">
Купеческие гильдии Мариинска (среди которых выделялись династии Савельевых, Полутовых, Гурьевичей, Манусовичей) определяли облик и быт города. Они были не только успешными коммерсантами, но и крупными меценатами: строили на собственные средства школы, больницы, библиотеки, приюты и храмы, закладывая фундамент культурного развития уезда.
</p>
</div>
`
},
4: {
title: "4. Резное зодчество",
block: 3,
icon: "fa-tree",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Купеческое наследие</span>
<h2 class="text-3xl font-bold text-white mt-1">Деревянное кружево фасадов</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Деревянное зодчество Мариинска — это уникальное явление художественной культуры Сибири. Фасады усадеб местных купцов и зажиточных горожан украшались сложнейшей пропильной и глухой резьбой. Стиль получил поэтичное название "деревянное кружево".
</p>
<p class="text-slate-300 leading-relaxed">
Каждый элемент резьбы на оконных наличниках, карнизах и пилястрах нес сакральный смысл — обереги от злых сил, символы солнца, плодородия и богатства. Прогуливаясь по современному Мариинску, можно бесконечно изучать эти деревянные узоры, сохранившие тепло рук мастеров прошлых веков.
</p>
</div>
`
},
5: {
title: "5. Памятники и монументы",
block: 3,
icon: "fa-monument",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Купеческое наследие</span>
<h2 class="text-3xl font-bold text-white mt-1">Памятники исторической памяти</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Мариинск бережно хранит память о выдающихся исторических фигурах на своих улицах. Центральное место занимает величественный бронзовый памятник Императрице Марии Александровне, небесной покровительнице города, открытый в 2007 году.
</p>
<p class="text-slate-300 leading-relaxed">
Также в городе воссоздан уникальный памятник Императору Александру II (бюст которого исторически существовал до революции) и установлен очень популярный памятник Купцу-созидателю, олицетворяющему всех купцов Мариинска, развивавших экономику и культуру края.
</p>
</div>
`
},
6: {
title: "6. Музеи города",
block: 2,
icon: "fa-university",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Культура</span>
<h2 class="text-3xl font-bold text-white mt-1">Центры сохранения истории края</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Музейная сеть Мариинска способна удивить самого взыскательного туриста:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm mt-4">
<div class="p-4 bg-navy-medium border border-gold-rich/20 rounded-lg">
<h4 class="font-bold text-gold-rich mb-2">Музей «Береста Сибири»</h4>
<p class="text-xs text-slate-300">Уникальный специализированный музей, где собраны шедевры народных мастеров берестяного промысла со всей Сибири.</p>
</div>
<div class="p-4 bg-navy-medium border border-gold-rich/20 rounded-lg">
<h4 class="font-bold text-gold-rich mb-2">Краеведческий музей</h4>
<p class="text-xs text-slate-300">Расположен в историческом здании. Хранит богатые коллекции предметов купеческого быта, палеонтологические находки и архивные фото.</p>
</div>
<div class="p-4 bg-navy-medium border border-gold-rich/20 rounded-lg">
<h4 class="font-bold text-gold-rich mb-2">Дом-музей В.А. Чивилихина</h4>
<p class="text-xs text-slate-300">Мемориальный комплекс, посвященный жизни и творчеству выдающегося советского писателя, публициста и эколога.</p>
</div>
</div>
</div>
`
},
7: {
title: "7. Мариинск в годы ВОВ",
block: 1,
icon: "fa-award",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Краеведение</span>
<h2 class="text-3xl font-bold text-white mt-1">Трудовой и боевой подвиг мариинцев</h2>
</div>
<p class="text-slate-300 leading-relaxed">
В суровые годы Великой Отечественной войны Мариинск стал надежным тылом для фронта. Отсюда на передовую ушли тысячи бойцов, многие из которых были удостоены высоких государственных наград за мужество и отвагу.
</p>
<p class="text-slate-300 leading-relaxed">
В самом городе круглосуточно работали промышленные предприятия и артели, поставляя фронту обмундирование, продовольствие и боеприпасы. На базе местных школ и административных зданий были развернуты крупные эвакуационные госпитали (эвакогоспитали), где мариинские врачи и медсестры спасли жизни тысячам раненых советских солдат.
</p>
</div>
`
},
8: {
title: "8. Мариинская ссылка (Сиблаг)",
block: 2,
icon: "fa-bars-staggered",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Культура</span>
<h2 class="text-3xl font-bold text-white mt-1">Трагические страницы истории</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Мариинск неразрывно связан с трагическими страницами советской истории. В 1930–1950-х годах город являлся центром управления Сибирского исправительно-трудового лагеря (Сиблага) — одного из крупнейших подразделений системы ГУЛАГ.
</p>
<p class="text-slate-300 leading-relaxed">
Через мариинские распределительные пункты и лагеря прошли сотни тысяч репрессированных граждан СССР, среди которых было огромное число выдающихся деятелей советской науки, искусства, религиозных лидеров и представителей интеллигенции. Мемориальный комплекс жертвам Сиблага на въезде в город напоминает о ценности человеческой жизни и свободы.
</p>
</div>
`
},
9: {
title: "9. Природа и река Кия",
block: 4,
icon: "fa-water",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Туризм</span>
<h2 class="text-3xl font-bold text-white mt-1">Река Кия — природное сокровище края</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Мариинск раскинулся на живописных берегах реки Кия — одной из чистейших рек Сибири. Кия берет начало в отрогах Кузнецкого Алатау и славится своим быстрым течением, чистейшей водой, скалистыми берегами и богатыми рыбными ресурсами.
</p>
<p class="text-slate-300 leading-relaxed">
Окрестности города богаты сосновыми борами, березовыми рощами и природными заказниками. Это идеальное место для развития экологического туризма, водных сплавов, рыбалки и тихого отдыха на лоне первозданной сибирской природы.
</p>
</div>
`
},
10: {
title: "10. Промышленность: вчера и сегодня",
block: 1,
icon: "fa-industry",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Краеведение</span>
<h2 class="text-3xl font-bold text-white mt-1">Промышленная летопись Мариинска</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Промышленность Мариинска зарождалась в купеческих артелях. В XIX веке здесь успешно функционировали пивоваренные заводы Савельева, мыловаренные, кожевенные и винокуренные мануфактуры. Мариинская водка и пиво славились отменным качеством по всей Сибири благодаря чистейшей воде реки Кия.
</p>
<p class="text-slate-300 leading-relaxed">
В советское время и в современную эпоху город сохранил свои промышленные традиции. Ведущими отраслями остаются пищевая промышленность, деревообработка, а также традиционное производство ликеро-водочной продукции, которая поставляется далеко за пределы Кузбасса.
</p>
</div>
`
},
11: {
title: "11. Знаменитые земляки",
block: 2,
icon: "fa-user-tie",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Культура</span>
<h2 class="text-3xl font-bold text-white mt-1">Люди, прославившие мариинскую землю</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Главное богатство мариинской земли — это её люди. Гордостью города является писатель Владимир Чивилихин, чьи книги "Серебряный бор" и "Память" вошли в золотой фонд русской литературы и публицистики.
</p>
<p class="text-slate-300 leading-relaxed">
Также город воспитал множество талантливых художников, мастеров берестяного промысла (таких как Юрий Михайлов), ученых и общественных деятелей, которые своим ежедневным трудом прославляли и продолжают прославлять свою малую родину на всероссийском уровне.
</p>
</div>
`
},
12: {
title: "12. Легенды и мифы купеческого города",
block: 4,
icon: "fa-ghost",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Туризм</span>
<h2 class="text-3xl font-bold text-white mt-1">Тайны купеческих подземелий</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Старинный город окутан множеством тайн. Популярная легенда гласит о разветвленной сети подземных ходов, соединявших подвалы купеческих особняков на улице Большой (ныне Ленина) с берегом Кии. По этим ходам купцы якобы тайно перевозили контрабандное золото во времена золотой лихорадки.
</p>
<p class="text-slate-300 leading-relaxed">
Другая легенда связана с запрятанными кладами купца Савельева, которые он зарыл перед приходом отрядов Красной Армии в годы Гражданской войны. Эти мифы и загадки до сих пор будоражат умы краеведов, туристов и кладоискателей.
</p>
</div>
`
},
13: {
title: "13. Туристические маршруты",
block: 4,
icon: "fa-map-marked-alt",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Туризм</span>
<h2 class="text-3xl font-bold text-white mt-1">Интерактивная карта достопримечательностей</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Ниже представлена карта ключевых исторических точек Мариинска. Нажмите на метки объектов для получения информации:
</p>
<!-- Интерактивная векторная карта достопримечательностей -->
<div class="relative w-full h-80 bg-navy-deep/80 border border-gold-rich/30 rounded-lg overflow-hidden flex items-center justify-center p-4">
<!-- Фоновый стилизованный векторный план дорог города Мариинска -->
<svg class="absolute inset-0 w-full h-full opacity-25 stroke-gold-rich" viewBox="0 0 800 400" fill="none">
<path d="M50,150 L750,150 M50,250 L750,240 M200,50 L200,350 M400,50 L400,350 M600,50 L600,350" stroke-width="2"/>
<path d="M100,100 C200,80 300,120 400,100 C500,80 600,110 700,90" stroke-dasharray="5 5" stroke-width="1.5"/>
</svg>
<!-- Кликабельные интерактивные маркеры на карте -->
<div class="relative z-10 flex flex-wrap gap-3 justify-center">
<button onclick="showMapDetail('monument-maria')" class="px-3 py-2 bg-navy-medium hover:bg-gold-rich text-white hover:text-navy-deep font-bold rounded-lg border border-gold-rich transition text-xs shadow-lg">
<i class="fa-solid fa-monument mr-1"></i>Памятник Императрице
</button>
<button onclick="showMapDetail('museum-bark')" class="px-3 py-2 bg-navy-medium hover:bg-gold-rich text-white hover:text-navy-deep font-bold rounded-lg border border-gold-rich transition text-xs shadow-lg">
<i class="fa-solid fa-hotel mr-1"></i>Музей бересты
</button>
<button onclick="showMapDetail('memorial-camp')" class="px-3 py-2 bg-navy-medium hover:bg-gold-rich text-white hover:text-navy-deep font-bold rounded-lg border border-gold-rich transition text-xs shadow-lg">
<i class="fa-solid fa-bars-staggered mr-1"></i>Мемориал Сиблага
</button>
<button onclick="showMapDetail('chivilikhin-house')" class="px-3 py-2 bg-navy-medium hover:bg-gold-rich text-white hover:text-navy-deep font-bold rounded-lg border border-gold-rich transition text-xs shadow-lg">
<i class="fa-solid fa-house-chimney mr-1"></i>Дом В.А. Чивилихина
</button>
</div>
</div>
<!-- Вывод детальной информации при клике по метке -->
<div id="map-detail-box" class="p-4 bg-navy-deep border border-gold-rich/40 rounded-lg hidden">
<!-- Заполняется динамически функцией showMapDetail -->
</div>
</div>
`
},
14: {
title: "14. Культурные события и ярмарки",
block: 4,
icon: "fa-calendar-days",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Туризм</span>
<h2 class="text-3xl font-bold text-white mt-1">Праздники, фестивали и традиции</h2>
</div>
<p class="text-slate-300 leading-relaxed">
Мариинск живет насыщенной культурной жизнью. Ежегодно здесь проводятся знаковые фестивали народных промыслов, собирающие умельцев со всей России. Главный из них — Фестиваль бересты, на котором мастера соревнуются в художественной обработке этого традиционного сибирского материала.
</p>
<p class="text-slate-300 leading-relaxed">
Традиционные купеческие ярмарки, приуроченные к памятным датам и Дню города, воссоздают атмосферу конца XIX века с зазывалами, ремесленными рядами, уличным театром и дегустацией знаменитых мариинских угощений.
</p>
</div>
`
},
15: {
title: "15. Галерея памяти (Слайдер)",
block: 5,
icon: "fa-images",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Инфо-сервисы</span>
<h2 class="text-3xl font-bold text-white mt-1">Интерактивный слайдер «Было / Стало»</h2>
<p class="text-slate-400 text-xs mt-1">Зажмите и перетаскивайте золотистый ползунок влево и вправо для перемещения во времени!</p>
</div>
<!-- Конструкция интерактивного слайдера "Было/Стало" -->
<div class="slider-container mx-auto" id="time-slider">
<!-- Изображение "До" (19.jpg из папки images) -->
<img src="images/19.jpg" class="slider-img" alt="Старинный Мариинск">
<!-- Изображение "После" (1.jpg из папки images) -->
<img src="images/1.jpg" class="slider-img after-image" id="after-image" alt="Современный Мариинск">
<!-- Ползунок -->
<div class="slider-handle" id="slider-handle"></div>
</div>
<p class="text-center text-xs text-slate-400 italic">Сравнение: Улица Большая (начало XX века) и современный вид улицы Ленина (2026 год).</p>
</div>
`
},
16: {
title: "16. Контакты и О проекте",
block: 5,
icon: "fa-circle-info",
content: `
<div class="fade-in-content space-y-6">
<div class="border-b border-gold-rich/30 pb-4">
<span class="text-xs font-bold uppercase tracking-widest text-gold-rich">Инфо-сервисы</span>
<h2 class="text-3xl font-bold text-white mt-1">О проекте и контакты разработчиков</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<h3 class="text-xl font-bold text-gold-rich">Контакты для туристов</h3>
<p class="text-sm text-slate-300">
<i class="fa-solid fa-map-location text-gold-rich mr-2"></i>Адрес визит-центра: Кемеровская область, г. Мариинск, ул. Ленина, д. 22<br><br>
<i class="fa-solid fa-phone text-gold-rich mr-2"></i>Телефон: +7 (38443) 5-55-55<br><br>
<i class="fa-solid fa-envelope text-gold-rich mr-2"></i>Email: welcome@mariinsk-travel.ru
</p>
</div>
<div class="space-y-4 p-5 bg-navy-medium border border-gold-rich/20 rounded-lg">
<h3 class="text-xl font-bold text-gold-rich">Технические характеристики</h3>
<p class="text-xs text-slate-300 leading-relaxed">
Веб-интерфейс спроектирован и сверстан в рамках учебного проекта. База данных содержит структурированные краеведческие сведения, перенесенные из 16 разделов презентации. Используются современные технологии адаптивной верстки (Tailwind CSS, HTML5, Vanilla JS).
</p>
</div>
</div>
</div>
`
}
};
// Логика работы карты
const mapLocations = {
'monument-maria': {
name: "Памятник Императрице Марии Александровне",
desc: "Установлен в историческом центре города в честь императрицы, давшей имя городу. Стал визитной карточкой Мариинска.",
geo: "г. Мариинск, Городской сквер"
},
'museum-bark': {
name: "Музей «Береста Сибири»",
desc: "Уникальное культурное пространство, представляющее шедевры традиционного сибирского берестяного промысла.",
geo: "г. Мариинск, ул. Рабочая, д. 15"
},
'memorial-camp': {
name: "Мемориал жертвам Сиблага",
desc: "Мемориальный комплекс, посвященный памяти политзаключенных и репрессированных граждан СССР, прошедших через лагеря Сиблага.",
geo: "При въезде в г. Мариинск со стороны Кемерово"
},
'chivilikhin-house': {
name: "Дом-музей В.А. Чивилихина",
desc: "Мемориальный усадебный комплекс выдающегося советского писателя, где хранятся его личные вещи, рукописи и письма.",
geo: "г. Мариинск, ул. Чивилихина, д. 4"
}
};
function showMapDetail(locKey) {
const detail = mapLocations[locKey];
const box = document.getElementById('map-detail-box');
if (detail && box) {
box.innerHTML = `
<h4 class="font-bold text-gold-rich text-lg mb-1">${detail.name}</h4>
<p class="text-xs text-slate-400 mb-2"><i class="fa-solid fa-location-dot mr-1"></i>${detail.geo}</p>
<p class="text-sm text-slate-200 leading-relaxed">${detail.desc}</p>
`;
box.classList.remove('hidden');
box.classList.add('fade-in-content');
}
}
let activeBlockId = 1;
let activePageId = 1;
// Переключение основных 5 блоков верхнего меню
function switchBlock(blockId) {
activeBlockId = blockId;
// Стилизация активной кнопки верхнего меню
for (let i = 1; i <= 5; i++) {
const btn = document.getElementById(`block-btn-${i}`);
if (btn) {
if (i === blockId) {
btn.className = "px-3 py-1.5 rounded text-xs font-bold uppercase border border-gold-rich bg-navy-medium text-gold-rich transition";
} else {
btn.className = "px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition";
}
}
}
// Рендерим боковой список страниц для текущего блока
renderSidebar();
// Автоматически загружаем первую страницу из выбранного блока
const firstPageInBlock = Object.keys(pagesData).find(key => pagesData[key].block === blockId);
if (firstPageInBlock) {
loadPage(parseInt(firstPageInBlock));
}
}
// Рендеринг кнопок страниц в боковом меню
function renderSidebar() {
const sidebarContainer = document.getElementById('sidebar-pages');
const listContainer = document.getElementById('pages-list');
if (!listContainer) return;
listContainer.innerHTML = "";
Object.keys(pagesData).forEach(id => {
const pageId = parseInt(id);
const page = pagesData[pageId];
// Показываем только страницы, принадлежащие активному верхнему блоку
if (page.block === activeBlockId) {
const btn = document.createElement('button');
btn.onclick = () => loadPage(pageId);
const isActive = pageId === activePageId;
btn.className = `w-full text-left px-3 py-2 rounded-md text-xs font-medium transition duration-200 flex items-center gap-2 ${
isActive
? 'bg-gold-rich text-navy-deep font-bold shadow-lg'
: 'text-slate-300 hover:bg-navy-medium hover:text-white border border-transparent hover:border-gold-rich/30'
}`;
btn.innerHTML = `<i class="fa-solid ${page.icon} text-sm"></i> <span>${page.title}</span>`;
listContainer.appendChild(btn);
}
});
}
// Загрузка контента выбранной страницы
function loadPage(pageId) {
activePageId = pageId;
activeBlockId = pagesData[pageId].block;
// Стилизуем активную кнопку блока в шапке
for (let i = 1; i <= 5; i++) {
const btn = document.getElementById(`block-btn-${i}`);
if (btn) {
if (i === activeBlockId) {
btn.className = "px-3 py-1.5 rounded text-xs font-bold uppercase border border-gold-rich bg-navy-medium text-gold-rich transition";
} else {
btn.className = "px-3 py-1.5 rounded text-xs font-bold uppercase border border-navy-medium text-slate-400 hover:text-gold-rich transition";
}
}
}
// Обновляем боковое меню
renderSidebar();
// Вставляем контент во фрейм
const container = document.getElementById('content-box');
const mainContainer = document.getElementById('content-container');
if (mainContainer) {
mainContainer.innerHTML = pagesData[pageId].content;
}
// Если загружена страница с интерактивным слайдером "Было / Стало" (Страница 15)
if (pageId === 15) {
// Вызываем инициализацию с задержкой, чтобы элементы гарантированно отрисовались в DOM
window.setTimeout(initTimeSlider, 100);
}
}
// Абсолютно стабильная инициализация слайдера "Было/Стало"
function initTimeSlider() {
const container = document.getElementById('time-slider');
const handle = document.getElementById('slider-handle');
const afterImage = document.getElementById('after-image');
if (!container || !handle || !afterImage) {
console.log("Элементы слайдера еще не готовы, повторная попытка...");
return;
}
let isDragging = false;
// Расчет положения шторки слайдера
function updateSlider(clientX) {
const rect = container.getBoundingClientRect();
let x = clientX - rect.left;
let position = (x / 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%)`;
}
// Начало перетаскивания (сброс системных эффектов)
const startDrag = (e) => {
isDragging = true;
e.preventDefault(); // Полная отмена стандартного drag-and-drop браузера
};
// Окончание перетаскивания
const stopDrag = () => {
isDragging = false;
};
// Движение ползунка
const onDrag = (e) => {
if (!isDragging) return;
// Считывание координат для сенсорных (touch) и классических экранов
let clientX = e.touches ? e.touches[0].clientX : e.clientX;
updateSlider(clientX);
};
// Слушатели событий непосредственно на ползунке
handle.addEventListener('mousedown', startDrag);
handle.addEventListener('touchstart', startDrag, { passive: false });
// Глобальные слушатели на все окно (исключает "отцепление" ползунка при быстром ведении мыши)
window.addEventListener('mouseup', stopDrag);
window.addEventListener('touchend', stopDrag);
window.addEventListener('mousemove', onDrag);
window.addEventListener('touchmove', onDrag, { passive: false });
console.log("Интерактивный слайдер успешно инициализирован.");
}
// Запуск первой страницы при старте сайта
window.onload = function() {
switchBlock(1);
};
</script>
</body>
</html>
```
