https://pastein.ru/t/3hA
Загрузка данных
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мариинск — Купеческий город (Учебный проект)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;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: 'Open Sans', sans-serif;
background-color: #f4f7f6;
margin: 0;
}
/* Упрощенный стиль шапки */
header {
background-color: #0056b3; /* Классический синий */
color: white;
padding: 20px;
border-bottom: 4px solid #004494;
}
/* Стиль бокового меню */
aside {
background-color: #ffffff;
border-right: 1px solid #dee2e6;
min-height: calc(100vh - 160px);
}
.sidebar-btn {
width: 100%;
text-align: left;
padding: 12px 15px;
border-bottom: 1px solid #f1f1f1;
font-size: 14px;
transition: 0.2s;
color: #495057;
}
.sidebar-btn:hover {
background-color: #e9ecef;
}
.sidebar-btn.active {
background-color: #0056b3;
color: white;
font-weight: bold;
}
/* Стиль основного контента */
main {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin: 20px;
}
/* ФИКС СЛАЙДЕРА (Тот самый рабочий код) */
.slider-container {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
border: 2px solid #ddd;
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: 5px;
background: #ffc107; /* Желтый акцент */
z-index: 3;
cursor: ew-resize;
transform: translateX(-50%);
}
.slider-handle::after {
content: '↔';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #0056b3;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Упрощенная плитка контента */
.content-card {
border: 1px solid #eee;
padding: 15px;
border-radius: 5px;
background: #fafafa;
}
</style>
</head>
<body>
<header>
<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-3">
<i class="fa-solid fa-graduation-cap text-3xl"></i>
<div>
<h1 class="text-xl font-bold leading-none">Мариинск — Купеческий город</h1>
<p class="text-xs opacity-80 mt-1">Интерактивный учебный портал</p>
</div>
</div>
<nav class="flex gap-2">
<button onclick="switchBlock(1)" class="block-btn px-4 py-2 rounded bg-white/20 hover:bg-white/40 transition text-sm font-semibold border border-white/30" id="b-1">Краеведение</button>
<button onclick="switchBlock(2)" class="block-btn px-4 py-2 rounded hover:bg-white/40 transition text-sm font-semibold border border-white/10" id="b-2">Культура</button>
<button onclick="switchBlock(3)" class="block-btn px-4 py-2 rounded hover:bg-white/40 transition text-sm font-semibold border border-white/10" id="b-3">Купечество</button>
<button onclick="switchBlock(4)" class="block-btn px-4 py-2 rounded hover:bg-white/40 transition text-sm font-semibold border border-white/10" id="b-4">Туризм</button>
<button onclick="switchBlock(5)" class="block-btn px-4 py-2 rounded hover:bg-white/40 transition text-sm font-semibold border border-white/10" id="b-5">Сервисы</button>
</nav>
</div>
</header>
<div class="flex flex-col md:flex-row max-w-7xl mx-auto">
<aside class="w-full md:w-64 shrink-0">
<div class="p-4 bg-gray-50 font-bold text-sm border-bottom">Список страниц (16)</div>
<div id="sidebar-pages">
</div>
</aside>
<main class="flex-grow" id="content-box">
</main>
</div>
<footer class="bg-gray-800 text-white text-center py-6 text-sm mt-10">
<p>© 2026 Проект «Мариинск». Разработано в учебных целях.</p>
</footer>
<script>
const pages = {
1: { title: "1. Главная страница", block: 1, icon: "fa-house", content: `
<h2 class="text-2xl font-bold mb-4">Добро пожаловать в Мариинск</h2>
<p class="mb-4 text-gray-600">Это учебный портал, посвященный истории и культуре купеческого города Мариинска. Здесь вы найдете информацию о зодчестве, истории и современных маршрутах.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="content-card">
<h4 class="font-bold">16 разделов</h4>
<p class="text-sm">Полная структура города в одном месте.</p>
</div>
<div class="content-card">
<h4 class="font-bold">Интерактив</h4>
<p class="text-sm">Изучите город через слайдер и карту.</p>
</div>
</div>
`},
2: { title: "2. История основания", block: 1, icon: "fa-clock", content: `<h2 class="text-2xl font-bold mb-4">Основание города</h2><p>Город берет начало от Никольского погоста, основанного в 1720 году.</p>`},
3: { title: "3. Купеческие династии", block: 3, icon: "fa-users", content: `<h2 class="text-2xl font-bold mb-4">Купеческие династии</h2><p>Савельевы, Полутовы и другие меценаты, создавшие облик города.</p>`},
4: { title: "4. Резное зодчество", block: 3, icon: "fa-tree", content: `<h2 class="text-2xl font-bold mb-4">Архитектура</h2><p>Мариинское деревянное кружево — уникальный стиль сибирской резьбы.</p>`},
5: { title: "5. Памятники", block: 3, icon: "fa-monument", content: `<h2 class="text-2xl font-bold mb-4">Памятники</h2><p>Монумент Императрице Марии Александровне и другие памятники.</p>`},
6: { title: "6. Музеи", block: 2, icon: "fa-building", content: `<h2 class="text-2xl font-bold mb-4">Музеи города</h2><p>Музей бересты, Краеведческий музей, Дом Чивилихина.</p>`},
7: { title: "7. Мариинск в ВОВ", block: 1, icon: "fa-shield", content: `<h2 class="text-2xl font-bold mb-4">Годы войны</h2><p>Трудовой подвиг жителей города в 1941-1945 годах.</p>`},
8: { title: "8. Сиблаг", block: 2, icon: "fa-link", content: `<h2 class="text-2xl font-bold mb-4">Мариинская ссылка</h2><p>История Сибирского исправительно-трудового лагеря.</p>`},
9: { title: "9. Природа и Кия", block: 4, icon: "fa-water", content: `<h2 class="text-2xl font-bold mb-4">Природа</h2><p>Река Кия и живописные окрестности Мариинска.</p>`},
10: { title: "10. Промышленность", block: 1, icon: "fa-industry", content: `<h2 class="text-2xl font-bold mb-4">Экономика</h2><p>Развитие заводов и торговых путей.</p>`},
11: { title: "11. Знаменитые люди", block: 2, icon: "fa-user-tie", content: `<h2 class="text-2xl font-bold mb-4">Земляки</h2><p>Писатель Владимир Чивилихин и другие известные люди.</p>`},
12: { title: "12. Легенды и мифы", block: 4, icon: "fa-spaghetti-monster-flying", content: `<h2 class="text-2xl font-bold mb-4">Легенды</h2><p>Тайные подземные ходы и купеческие клады.</p>`},
13: { title: "13. Карта города", block: 4, icon: "fa-map", content: `
<h2 class="text-2xl font-bold mb-4">Карта достопримечательностей</h2>
<div class="bg-blue-50 p-6 rounded text-center border-2 border-dashed border-blue-200">
<p class="mb-4 italic">Здесь расположена интерактивная карта (SVG)</p>
<button onclick="alert('Объект: Памятник Марии Александровне')" class="bg-blue-600 text-white px-4 py-2 rounded shadow">Точка 1</button>
<button onclick="alert('Объект: Музей Бересты')" class="bg-blue-600 text-white px-4 py-2 rounded shadow ml-2">Точка 2</button>
</div>
`},
14: { title: "14. Календарь событий", block: 4, icon: "fa-calendar", content: `<h2 class="text-2xl font-bold mb-4">События</h2><p>День города, ярмарки и ремесленные фестивали.</p>`},
15: { title: "15. Галерея (Слайдер)", block: 5, icon: "fa-images", content: `
<h2 class="text-2xl font-bold mb-4">Слайдер Было / Стало</h2>
<p class="mb-4 text-sm text-gray-500">Потяните за желтый ползунок в центре фотографии</p>
<div class="slider-container" id="time-slider">
<img src="images/19.jpg" class="slider-img">
<img src="images/1.jpg" class="slider-img after-image" id="after-image">
<div class="slider-handle" id="slider-handle"></div>
</div>
`},
16: { title: "16. О проекте", block: 5, icon: "fa-info-circle", content: `
<h2 class="text-2xl font-bold mb-4">Контакты</h2>
<p>Учебный проект по веб-разработке. Все данные взяты из открытых краеведческих источников.</p>
<div class="mt-6 p-4 bg-gray-100 rounded">
<p><strong>Email:</strong> student@example.com</p>
</div>
`}
};
let currentBlock = 1;
let currentPage = 1;
function switchBlock(bId) {
currentBlock = bId;
// Обновляем кнопки в шапке
document.querySelectorAll('.block-btn').forEach((btn, i) => {
if (i+1 === bId) {
btn.classList.add('bg-white/40', 'border-white/60');
} else {
btn.classList.remove('bg-white/40', 'border-white/60');
}
});
renderSidebar();
// Загружаем первую страницу блока
const first = Object.keys(pages).find(id => pages[id].block === bId);
loadPage(parseInt(first));
}
function renderSidebar() {
const sidebar = document.getElementById('sidebar-pages');
sidebar.innerHTML = '';
Object.keys(pages).forEach(id => {
const page = pages[id];
const btn = document.createElement('button');
btn.className = `sidebar-btn ${parseInt(id) === currentPage ? 'active' : ''}`;
// Если страница не из текущего блока - делаем её полупрозрачной
if (page.block !== currentBlock) btn.style.opacity = '0.5';
btn.innerHTML = `<i class="fa-solid ${page.icon} mr-2"></i> ${page.title}`;
btn.onclick = () => loadPage(parseInt(id));
sidebar.appendChild(btn);
});
}
function loadPage(id) {
currentPage = id;
currentBlock = pages[id].block;
document.getElementById('content-box').innerHTML = pages[id].content;
renderSidebar();
if (id === 15) {
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) return;
let isDragging = false;
function slide(clientX) {
const rect = container.getBoundingClientRect();
let position = ((clientX - 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%)`;
}
const start = (e) => { isDragging = true; e.preventDefault(); };
const end = () => { isDragging = false; };
const move = (e) => {
if (!isDragging) return;
let x = (e.touches) ? e.touches[0].clientX : e.clientX;
slide(x);
};
handle.addEventListener('mousedown', start);
handle.addEventListener('touchstart', start);
window.addEventListener('mouseup', end);
window.addEventListener('touchend', end);
window.addEventListener('mousemove', move);
window.addEventListener('touchmove', move, { passive: false });
}
// Запуск первой страницы
window.onload = () => switchBlock(1);
</script>
</body>
</html>
```
