31.10.1979 Расследование сквозь века [л]

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Макет</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #1a151f; /* Самый темный оттенок */
color: #dea663; /* Самый светлый оттенок - цвет текста */
padding: 20px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #bf8441; /* Акцентный цвет */
}

.tab {
padding: 12px 24px;
background-color: #232935; /* Темный фон кнопок */
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s;
border-radius: 8px 8px 0 0;
margin-right: 5px;
color: #dea663; /* Светлый текст */
}

.tab.active {
background-color: #bf8441; /* Акцентный цвет для активной вкладки */
color: #1a151f; /* Темный текст на светлом фоне */
}

.tab:hover:not(.active) {
background-color: #dea663; /* Светлый цвет при наведении */
color: #1a151f; /* Темный текст */
}

.tab-content {
display: none;
padding: 20px;
background-color: #232935; /* Темный фон контента */
border-radius: 0 8px 8px 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 600px;
overflow: hidden;
}

.tab-content.active {
display: block;
}

.content-block {
max-height: 550px;
overflow-y: auto;
padding-right: 10px;
}

.container .content-title {
/* ваши стили с !important */
font-size: 28px !important;
margin-bottom: 15px !important;
color: #dea663 !important;
border-bottom: 2px solid #bf8441 !important;
padding-bottom: 10px !important;
}

.image-placeholder {
width: 100%;
height: 250px;
background-color: #1a151f; /* Самый темный */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #dea663; /* Светлый текст */
margin-bottom: 20px;
overflow: hidden;
border: 2px solid #bf8441; /* Акцентная рамка */
}

.image-placeholder img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.text-content {
line-height: 1.6;
font-size: 16px;
color: #dea663; /* Светлый текст */
}

/* Стили для третьей вкладки */
.two-column-layout {
display: flex;
gap: 20px;
height: 550px;
}

.left-panel {
flex: 2;
display: flex;
flex-direction: column;
height: 100%;
}

.right-panel {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}

.content-description {
height: 350px; /* Фиксированная высота для описания */
overflow-y: auto;
line-height: 1.6;
padding-right: 10px;
font-size: 16px;
color: #dea663; /* Светлый текст */
background-color: #1a151f; /* Темный фон */
padding: 15px;
border-radius: 8px;
border: 1px solid #bf8441; /* Акцентная рамка */
margin-bottom: 15px;
}

.content-description img {
max-width: 100%;
height: auto;
margin: 10px 0;
border-radius: 4px;
}

.image-grid-container {
height: 510px; /* Высота равна высоте левой панели */
overflow-y: auto;
padding-right: 5px;
}

.image-grid {
display: grid;
grid-template-columns: repeat(5, 80px);
gap: 10px;
padding: 5px; /* Добавляем отступы для лучшей видимости анимации */
}

.image-item {
width: 80px;
height: 80px;
background-color: #1a151f; /* Темный фон */
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease; /* Улучшенная анимация */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #bf8441; /* Акцентная рамка */
position: relative;
z-index: 1;
}

.image-item:hover {
transform: scale(1.15); /* Увеличиваем масштаб */
border-color: #dea663; /* Светлый цвет при наведении */
box-shadow: 0 0 20px rgba(222, 166, 99, 0.4); /* Добавляем свечение */
z-index: 10; /* Поднимаем над соседними элементами */
}

.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.image-item:hover img {
transform: scale(1.1); /* Легкое увеличение картинки внутри */
}

/* Стили для второй вкладки с правилами */
.rules-content {
line-height: 1.7;
font-size: 16px;
color: #dea663; /* Светлый текст */
}

.rules-content h3 {
margin: 20px 0 10px 0;
color: #bf8441; /* Акцентный цвет */
font-size: 20px;
}

.rules-content ul {
margin-left: 20px;
margin-bottom: 15px;
}

.rules-content li {
margin-bottom: 8px;
}

.rules-content p {
margin-bottom: 15px;
}

/* Простые скроллбары для совместимости */
.content-block::-webkit-scrollbar,
.content-description::-webkit-scrollbar,
.image-grid-container::-webkit-scrollbar {
width: 6px;
}

.content-block::-webkit-scrollbar-track,
.content-description::-webkit-scrollbar-track,
.image-grid-container::-webkit-scrollbar-track {
background: #232935; /* Темный фон */
}

.content-block::-webkit-scrollbar-thumb,
.content-description::-webkit-scrollbar-thumb,
.image-grid-container::-webkit-scrollbar-thumb {
background: #bf8441; /* Акцентный цвет */
}

.content-block::-webkit-scrollbar-thumb:hover,
.content-description::-webkit-scrollbar-thumb:hover,
.image-grid-container::-webkit-scrollbar-thumb:hover {
background: #dea663; /* Светлый цвет */
}
</style>
</head>
<body>
<div class="container">
<div class="tabs">
<button class="tab active" data-tab="tab1">Вводная</button>
<button class="tab" data-tab="tab2">Правила</button>
<button class="tab" data-tab="tab3">Воспоминания</button>
</div>

<div id="tab1" class="tab-content active">
<div class="content-block">
<h2 class="content-title">Расследование сквозь века</h2>
<div class="image-placeholder">
<img src="https://upforme.ru/uploads/0008/e1/93/3/641710.png">
</div>
<div class="text-content">
<p>В стенах древнего поместья, где время дышит холодом веков, обитает дух, чье существование окутано мраком, а сам он отравляет жизнь окружающих и требует справедливости.</p>
<p>Какой?</p>
<p>Вам предстоит узнать.</p>
<p>Вы готовы прочувствовать <i>на себе</i> всю трагедию и величие рода Воул?</p>
</div>
</div>
</div>

<div id="tab2" class="tab-content">
<div class="content-block">
<div class="rules-content">
<h2 class="content-title">Правила квеста</h2>

<h3>Игроки:</h3>
<p>Lily Potter, Elphinstone Urquart, Mundungus Fletcher, Vivien Spiny, Janus Thickey </p>

<h3>Правила и порядок отписи:</h3>
<ul>
<li>● Круг у игроков длится 2 дня, до 22:00 по Мск. На отпись ГМа даётся 1 день, до 22:00 по Мск.</li>
<li>Кол-во символов в постах НЕ ограничено, но мы призываем вас не писать более 2500 символов.</li>
<li>● Кол-во постов за 1 круг у игроков не ограничено, но подразумевается, что динамика должна быть 1 круг = 1 пост. Если ситуация будет подразумевать, что НПС может ответить раньше, чем наступит отпись ГМа, то он постарается подключиться и ответить.</li>
</ul>

<h3>Взаимодействие с картой:</h3>
<ul>
<li>● Один раз за круг вы можете сделать переход по карте. Информация о новой локации будет предоставлена в посте ГМа.</li>
<li>● В рамках одного этажа вы можете двигаться куда угодно. То есть вы свободно можете перейти из кухни в библиотеку, при этом обстановка промежуточных холла и гостиной будут даны в очень общих чертах.</li>
<li>● Пожалуйста, когда карта вам станет доступна, прописывайте в конце поста, куда движется ваш герой или где находится. Пример: гостиная => библиотека. </li>
</ul>

<h3>Механики эпизода:</h3>
<p>В квесте будет действовать механика сбора воспоминания. Прогресс собранных воспоминаний будет отображаться во вкладке «Воспоминания». Кнопки в сетке нажимаются, и меняется описание слева. Сейчас все воспоминания заблокированы, но когда что-то вам станет доступно — это будет визуально заметно. Иконка закрытого глаза изменится на новую, а при нажатии на неё станет доступно описание воспоминания. Это поможет вам отслеживать прогресс и освежать свои воспоминания без перечитывания постов. </p>

<h3>Гейм-мастера:</h3>
<p> Палочки-твикс <a href="https://foreveryoung.rolbb.me/profile.php?id=274">Минерва</a> и <a href="https://foreveryoung.rolbb.me/profile.php?id=293">Сабрина</a>.</p>

</div>
</div>
</div>

<div id="tab3" class="tab-content">
<div class="two-column-layout">
<div class="left-panel">
<h2 class="content-title" id="content-title">Омут памяти</h2>
<div class="content-description" id="content-description">
<h3>Прошлое так зыбко…</h3>
<p>Соберите осколки воспоминаний, чтобы раскрыть тайны прошлого.</p>

</div>
<div class="image-placeholder" id="image-placeholder">
<img src="https://upforme.ru/uploads/0008/e1/93/3/589205.png">
</div>
</div>

<div class="right-panel">
<div class="image-grid-container">
<div class="image-grid" id="image-grid">

</div>
</div>
</div>
</div>
</div>
</div>

// 45 уникальных изображений для каждой кнопки
const buttonImages = [
"https://upforme.ru/uploads/0008/e1/93/3/978859.png", // Колдуэлл
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/589205.png", // Септимус
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/407837.png", // Беатрис
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/589205.png", // Кассиус
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/589205.png", // Мелюзина
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/55171.png", // Жозефина
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/589205.png", // Вильгельмина
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/589205.png", // Аластер
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png", // Дополнительно
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png",
"https://upforme.ru/uploads/0008/e1/93/3/72382.png"
];

// ВАШИ УНИКАЛЬНЫЕ ДАННЫЕ ДЛЯ КАЖДОЙ КНОПКИ
const buttonData = [
{
id: 1,
title: "Колдуэлл Воул",
description: `
<h3><i>«Цена наследия не имеет значения. Даже если этой ценой станет он сам». </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/978859.png"
},

{
id: 2,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 3,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 4,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 5,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 6,
title: "Септимус Воул",
description: `
<h3><i>«Пока одни строят империи, другие с умом скупают их акции».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 7,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 8,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 9,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 10,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 11,
title: "Беатрис Воул",
description: `
<h3><i>«Репутация — это единственная религия, а она — её ревностная жрица».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/407837.png"
},

{
id: 12,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 13,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 14,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 15,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 16,
title: "Кассиус Воул",
description: `
<h3><i>«Пустота, которую все пытаются заполнить. Кроме него самого».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 17,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 18,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 19,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 20,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 21,
title: "Мелюзина Воул",
description: `
<h3><i>«Её олчание громче любого обвинения». </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 22,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 23,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 24,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 25,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 26,
title: "Жозефина Воул",
description: `
<h3><i>«Она видит все картины целиком, но не может собрать пазл под названием "семья"».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/565158.png"
},

{
id: 27,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 28,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 29,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 30,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 31,
title: "Вильгельмина Воул",
description: `
<h3><i>«Она не хочет занять трон. Она хочет его переплавить в оружие».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 32,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 33,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 34,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 35,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 36,
title: "Аластер Воул",
description: `
<h3><i>«Единственный собеседник, который его понимает — это тишина. И она с ним очень разговорчива».</i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>

`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 37,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 38,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 39,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 40,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 41,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 42,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 43,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 44,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

{
id: 45,
title: "Осколок памяти",
description: `
<h3><i> </i></h3>
<p>Чтобы узнать больше загляните в Омут памяти…</p>
`,
mainImage: "https://upforme.ru/uploads/0008/e1/93/3/589205.png"
},

];

// Создание картинок в правой панели
const imageGrid = document.getElementById('image-grid');
for (let i = 0; i < 45; i++) {
const imageItem = document.createElement('div');
imageItem.className = 'image-item';

const img = document.createElement('img');
img.src = buttonImages[i];
img.alt = `Картинка ${i + 1}`;

imageItem.appendChild(img);

imageItem.addEventListener('click', () => {
const data = buttonData[i];
document.getElementById('content-title').textContent = data.title;
document.getElementById('content-description').innerHTML = data.description;
document.getElementById('image-placeholder').innerHTML = `<img src="${data.mainImage}" alt="Основная картинка">`;
});

imageGrid.appendChild(imageItem);
}

// Автоматически устанавливаем данные первой кнопки при загрузке
window.addEventListener('load', function() {
const firstButtonData = buttonData[0];
document.getElementById('content-title').textContent = firstButtonData.title;
document.getElementById('content-description').innerHTML = firstButtonData.description;
document.getElementById('image-placeholder').innerHTML = `<img src="${firstButtonData.mainImage}" alt="Основная картинка">`;
});
</script>
</body>
</html>

[/html]

[hideprofile]

Отредактировано Game Master (Сегодня 02:37:43)