[hideprofile]
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 20px;
background: #d7cec7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Georgia', serif;
}
/* Центрирование на форуме */
#journal-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.journal-wrapper {
width: 660px;
height: 880px;
position: relative;
transform-style: preserve-3d;
perspective: 1200px;
}
.page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.3);
transition: transform 1s ease;
transform-origin: left center;
backface-visibility: hidden;
overflow: hidden;
}
.cover {
background: #f5f0e6;
cursor: pointer;
z-index: 100;
}
.cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px;
}
/* Страницы с текстом */
.text-page {
background: linear-gradient(to bottom, #f9f5ed 0%, #f0ebe0 100%);
padding: 60px 50px 80px 50px; /* Увеличил нижний отступ для кнопок */
transform: rotateY(180deg);
z-index: 1;
}
.current {
transform: rotateY(0deg);
z-index: 50;
}
.prev {
transform: rotateY(-180deg);
z-index: 40;
}
.next {
transform: rotateY(180deg);
z-index: 30;
}
/* Скрываем обложку при открытии */
.journal-started .cover {
transform: rotateY(-180deg);
z-index: 1;
}
.journal-started .text-page:nth-child(2) {
transform: rotateY(0deg);
z-index: 50;
}
/* Содержимое страницы */
.page-content {
height: 100%;
display: flex;
flex-direction: column;
}
.title {
font-size: 34px;
color: #5d4c3a;
text-align: center;
margin: 0 0 40px 0;
padding-bottom: 25px;
border-bottom: 3px double #d4c9b1;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1.5px;
font-family: 'Georgia', serif;
}
.text {
font-size: 16px;
line-height: 1.9;
color: #3a2e28;
text-align: justify;
flex: 1;
padding: 10px 5px;
font-family: 'Georgia', serif;
}
.text p {
margin-bottom: 28px;
text-indent: 35px;
}
/* Нумерация страниц */
.page-number {
position: absolute;
bottom: 25px;
right: 30px;
color: #8a7c6c;
font-size: 14px;
font-style: italic;
}
/* Элементы управления - КОМПАКТНЫЕ В УГЛУ */
.controls {
position: absolute;
bottom: 20px; /* В самом низу */
left: 20px; /* В левом углу */
z-index: 200;
display: flex;
gap: 10px; /* Уменьшил промежутки */
opacity: 0;
transition: opacity 0.3s ease;
}
.journal-started .controls {
opacity: 1;
}
.nav-btn {
background: rgba(139, 107, 77, 0.85);
color: white;
border: none;
padding: 8px 15px; /* Уменьшил размер */
border-radius: 4px; /* Меньше скругление */
cursor: pointer;
font-size: 13px; /* Меньший шрифт */
transition: all 0.2s;
font-family: 'Arial', sans-serif;
backdrop-filter: blur(3px);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
min-width: 70px; /* Уменьшил минимальную ширину */
text-align: center;
height: 32px; /* Фиксированная высота */
display: flex;
align-items: center;
justify-content: center;
}
.nav-btn:hover {
background: #6b4f35;
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.nav-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nav-btn:disabled {
background: rgba(139, 107, 77, 0.4);
color: rgba(255, 255, 255, 0.6);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#close-btn {
background: rgba(108, 92, 76, 0.85); /* Немного другой цвет */
min-width: 60px;
}
#close-btn:hover {
background: #5a4a3a;
}
/* Индикатор страниц - тоже компактный */
.page-indicator {
position: absolute;
bottom: 25px;
right: 20px; /* В правом углу */
color: #8a7c6c;
font-size: 13px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 12px;
border-radius: 12px;
font-family: 'Arial', sans-serif;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid rgba(139, 107, 77, 0.2);
}
/* Подсказка для обложки - тоже компактная */
.cover-hint {
position: absolute;
bottom: 20px;
left: 20px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-align: center;
background: rgba(30, 30, 30, 0.5);
padding: 6px 15px;
border-radius: 6px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.2);
font-family: 'Arial', sans-serif;
animation: fadeInOut 3s infinite;
cursor: pointer;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.journal-started .cover-hint {
display: none;
}
/* Делаем текст на последних строках не перекрываться */
.text-page .text {
padding-bottom: 50px; /* Отступ снизу для текста */
}
</style>
</head>
<body>
<div id="journal-container">
<div class="journal-wrapper" id="journal">
<!-- Подсказка на обложке -->
<div class="cover-hint" onclick="openJournal()">Нажмите на обложку</div>
<!-- Элементы управления - компактные в углу -->
<div class="controls">
<button class="nav-btn" id="prev-btn" onclick="prevPage()" disabled>← Назад</button>
<button class="nav-btn" id="close-btn" onclick="closeJournal()">Закрыть</button>
<button class="nav-btn" id="next-btn" onclick="nextPage()">Вперёд →</button>
</div>
<!-- ОБЛОЖКА -->
<div class="page cover" onclick="openJournal()">
<img src="https://upforme.ru/uploads/0008/e1/93/3/535563.png" class="cover-img" alt="Обложка журнала">
</div>
<!-- СТРАНИЦА 1 -->
<div class="page text-page next" id="page1">
<div class="page-content">
<h1 class="title">Виви и Поиск Безвкусного Дракона</h1>
<div class="text">
<p>Беда пришла в королевство не с грохотом и огнём, а с тихим, противным словом «пресно». Сначала на это не обратили внимания: ну подумаешь, пирог у королевского кондитера чуть менее сладок, чем обычно. Потом пожаловались виноделы — будто бы из молодого вина улетучился весь букет, оставив лишь кисловатую воду. А потом однажды утром весь двор, от самого монарха до последнего подсвечника, проснулся и понял, что мир потускнел.
</p>
<p>Не то чтобы он стал черно-белым. Нет, краски остались, но будто затянутые тончайшей серой вуалью. Алый стяг на башне казался выцветшим, словно его часто стирали. Изумрудные кроны леса на горизонте отливали скучной болотной грязью. Даже золото на куполах не слепило глаза, а тускло желтело, как старая латунь. Исчезли запахи: не пахло ни свежескошенной травой, ни дымком из пекарен, ни дождем, собравшимся над холмами. Воздух стал безвкусным и пустым. Музыканты на площади тщетно дули в свои трубы и водили смычками — инструменты издавали верные ноты, но звук был плоским, безжизненным, лишенным и тени былого величия или нежности. В королевстве воцарилась Великая Пресность.</p>
<p>Поднялась паника, а затем — привычное поиски виноватых. Сначала грешили на кухарок, потом на колдунов с окраин, но самые мудрые (а также самые циничные) старики, сидевшие в самом дальнем и тёмном углу таверны «Подогретый гном», качали седыми головами.</p>
<p>— Это не колдовство, — хрипел один, обсасывая костяную трубку. — Это аппетит. Чей-то ненасытный и очень специфический аппетит.</p>
</div>
<div class="page-number">1</div>
</div>
</div>
<!-- СТРАНИЦА 2 -->
<div class="page text-page next" id="page2">
<div class="page-content">
<div class="text">
<p>— Безвкусный Дракон, — отчеканивала старая Гризельда, бывшая главная кухарка замка, чьи руки до сих пор пахли корицей и розмарином, даже когда все вокруг уже ничем не пахло. — Он живёт в Сердцевине Леса, дальше которого не ступала нога ни одного королевского картографа и охотника. Он не ест овец и не жарит рыцарей. Он пожирает самое сокровенное: суть вещей. Вкус дикой малины, запах старого пергамента, оттенок заката на облаке, шёпот струны перед тем, как её тронуть. Он голоден по красоте. И, судя по всему, он добрался до нас.</p>
<p>Идея дракона, ворующего не золото, а ощущения, показалась придворным столь же нелепой, сколь и пугающей. Как сражаться с таким чудовищем? И как вернуть то, что нельзя взвесить в руках? Молчание повисло в тронном зале, густое и липкое, как кисель.</p>
<p>И тут вперёд робко шагнул Тило. Тило-Картограф, или, как его прозвали за глаза, Тило-Клякса. Молодой человек с беспокойными глазами цвета лесного ручья и вечно перепачканными в чернилах пальцами. Его карты славились абсолютной бесполезностью для навигации, но невероятной детализацией всего второстепенного: здесь он отмечал «дуб, в дупле которого живёт семья сов, поющих по ночам на три голоса», там — «поляну, где утренняя роса собирается в идеально круглые капли». Его в последний раз гнали со службы, сунув в руки свиток с указанием «нарисовать, наконец, нормальную дорогу от пункта А в пункт Б, без этих ваших летучих мышей и настроений».</p>
<p>— Ваше величество, — голос Тило дрогнул, но не сорвался. — Я… я могу найти путь. К Сердцевине Леса. Мои карты… они не о дорогах. Они о местах. И я записал кое-что о границах тех земель.</p>
<p>Его встретили смешками. Кто такой этот мальчишка-неудачник против великой беды?</p>
</div>
<div class="page-number">2</div>
</div>
</div>
<!-- СТРАНИЦА 3 -->
<div class="page text-page next" id="page3">
<div class="page-content">
<div class="text">
<p>И тогда из тени за колонной вышла она. Никто не заметил, как она вошла. Она двигалась бесшумно, как ползущий по камню мох, и в её облике было что-то от самого Леса, столь же непонятного и тревожащего.</p>
<p>Платье её было сшито из тканей неопределённого цвета, напоминающих то ли древесную кору, то ли закатное небо после дождя. Черты лица были удивительно острыми, а глаза… глаза смотрели вертикальными зрачками, в которых плавало холодное золото. Никто не знал её имени, но все на окраинах знали её — девушку с опушки, которая находила потерявшихся детей, умела уговаривать разлившиеся ручьи вернуться в русло и, поговаривали, разговаривала с лягушками на их языке.</p>
<p>Её звали Виви. И она не стала кланяться.</p>
<p>— Тило прав, — сказала она и её голос звучал низко и немного хрипловато, словно редко используемый. — Дорогу не нарисовать. Путь к Сердцевине можно только почувствовать. И ваши картографы и копья здесь будут бесполезны.</p>
<p>Она повернула голову, и её взгляд скользнул по собравшимся, заставляя самых бравых воинов невольно отводить глаза.</p>
<p>— Мы пойдем. Он — потому что видит то, что вы отказываетесь замечать. Я — потому что знаю язык, на котором говорит тишина, прежде чем что-нибудь проглотить. Мы найдем вашу Пресность. А что будем с ней делать, когда найдём… это мы решим уже на месте.</p>
</div>
<div class="page-number">3</div>
</div>
</div>
<!-- СТРАНИЦА 4 -->
<div class="page text-page next" id="page4">
<div class="page-content">
<div class="text">
<p>И не дожидаясь разрешения или возражений, Виви развернулась и вышла из зала, её силуэт растворился в скучном сером свете дверного проема. Тило, покрасневший до корней волос, отвесил растерянный поклон и кинулся вслед, роняя по дороге свои бесценные, нелепые карты.</p>
<p>Так началось их путешествие. Не похода ради славы, не подвига по приказу. А тихое, упрямое движение двух странностей навстречу третьей, в самое сердце мира, из которого упорхнул вкус.</p>
<p><center>* * *</center></p>
<p>Тило догнал Виви уже на краю рынка, вернее, того, что от него осталось. Лавки стояли полупустые, торговцы сидели, уставясь в одну точку. В воздухе витал запах влажного пепла и немытой посуды — не отвратительный, а просто... никакой. И от этого было только хуже.</p>
<p>— Постой! — выдохнул он, на ходу пытаясь заткнуть за пояс охапку из свитков с картами. — Мы же... мы даже не обсудили план. Припасы, маршрут...</p>
<p>Виви остановилась и повернулась. Её вертикальные зрачки сузились, ловя тусклый свет.</p>
<p>— План? — она произнесла слово так, будто пробовала на вкус незнакомую ягоду. — План — идти туда, где тишина гуще. Туда, где краски сходят с вещей, как кожа с линяющей змеи. Твои карты покажут, где кончаются тропы. Мои чувства — где начинается путь.</p>
<p>— Но... — Тило беспомощно оглянулся. Его мир, мир линий, условных знаков и пометок на полях, рушился. Вместе с миром вкусов. — Я должен составить график. Рассчитать расстояние. Нужен компас...</p>
</div>
<div class="page-number">4</div>
</div>
</div>
<!-- СТРАНИЦА 5 -->
<div class="page text-page next" id="page5">
<div class="page-content">
<div class="text">
<p>— Компас? — Виви мягко перебила его. Она подошла к краю дороги, где в каменной чаше плескалась дождевая вода — серая и безрадостная. Опустила кончики пальцев в воду. — Смотри.</p>
<p>Тило наклонился. На поверхности воды ничего не было. Но когда рябь улеглась, он увидел отражение — не себя и не Виви, а слабые, дрожащие блики того, что осталось от неба. И вдруг в самой глубине чаши, у дна, мелькнула искорка — не цвета, а скорее намёк на цвет, крошечная капля чего-то, что могло бы быть золотым, если б засияло в полную силу.</p>
<p>— Это что? — прошептал он.</p>
<p>— След, — так же тихо ответила Виви. Она вынула руку, и капли, скатившиеся с её пальцев, оставили на пыльной мостовой не мокрые пятна, а короткие полосы, похожие на бледные мазки акварели. Они исчезли через секунду. — Он жаден, но неаккуратен. Многое проливает. Он не просто забирает — он проходит сквозь мир, и мир на миг меняется от этого касания. И мы будем искать эти... следы.</p>
<p>Впервые за сегодняшний день в груди Тило что-то ёкнуло — не от страха, а от любопытства. Он привык фиксировать видимое: изгиб реки, выступ скалы, а здесь нужно было картографировать невидимое — следы ускользающей сути.</p>
<p>— Хорошо, — сказал он, расправляя свиток. Чернила на нём тоже казались выцветшими. — У меня есть запись об «Осиновом перепутье», где три тропы расходятся. Местные говорят, что там иногда слышится музыка, которой нет. И запах печёных яблок посреди лета. Это... ненормально, но...</p>
<p>— Но это хороший ориентир, — кивнула Виви. Её губы, тонкие и чёткие, дрогнули в подобии улыбки. — Веди.</p>
</div>
<div class="page-number">5</div>
</div>
</div>
<!-- СТРАНИЦА 6 -->
<div class="page text-page next" id="page6">
<div class="page-content">
<div class="text">
<p><center>* * *</center></p>
<p>Первые дни пути были молчаливыми и странными. Тило шёл, уткнувшись в карту, сверяясь с компасом, который показывал верно, но как-то без энтузиазма. Виви двигалась рядом, но казалось, она идёт не по земле, а по какой-то невидимой тропе, известной только ей. Она то вдруг останавливалась, чтобы прикоснуться к коре дуба, покрытой серебристым лишайником, то замирала, прислушиваясь к писку летучих мышей, ещё не утративших своей пронзительности.</p>
<p>На третий день они достигли Осинового перепутья. Тило ожидал увидеть нечто загадочное — может, круги на траве или парящие огоньки, но всё было приземлённо и печально. Три дороги, вернее, три колеи, расходились в чахлом осиннике. Листья на деревьях висели безжизненно, не издавая шелеста даже при порывах ветра.</p>
<p>— Никакой музыки, — разочарованно констатировал Тило. — И никаких яблок. Может, я ошибся?</p>
<p>Виви не ответила. Она опустилась на колени в центре перепутья и коснулась ладонью земли. Потом поднесла её к лицу, словно нюхая.</p>
<p>— Есть, — сказала она. — Не музыка, но эхо от неё. Не запах, но тень от него.</p>
<p>Она встала и указала на среднюю тропу. Но не на саму тропу, а на пространство над ней, на высоте примерно человеческого роста.</p>
<p>— Здесь словно прошло что-то большое. Или, скорее, пролетело. И задевало верхушки мира. Смотри.</p>
</div>
<div class="page-number">6</div>
</div>
</div>
<!-- СТРАНИЦА 7 -->
<div class="page text-page next" id="page7">
<div class="page-content">
<div class="text">
<p>Тило присмотрелся. На фоне унылого серого неба он вдруг различил едва заметную дрожь воздуха, легчайшую рябь, будто от жары. А в этой ряби — слабый-слабый отблеск, перелив, напоминающий мыльный пузырь в момент перед тем, как лопнуть.</p>
<p>— Как ты это видишь? — изумился он.</p>
<p>— Я не вижу. Я помню, каким это место было, — просто ответила Виви. — И замечаю, чего теперь нет. Пустота — тоже форма. И она очерчивает фигуру того, что её оставило.</p>
<p>Это было гениально. И безумно. Тило лихорадочно достал блокнот и карандаш. Он не стал рисовать тропу, но начал набрасывать контур той самой пустоты, дрожащий, неверный, как мираж. Он отмечал: «Здесь — давление на слух, отсутствие фонового гула насекомых. Здесь — нарушение гравитации пылинок в воздушном потоке. Здесь — остаточное эхо цвета (призрачный серо-сиреневый, предположительно принадлежавший запаху гвоздики)».
</p>
<p>Он так увлёкся, что не заметил, как Виви села на камень рядом и наблюдала за его работой.</p>
<p>— Ты рисуешь не мир, — тихо сказала она. — Ты рисуешь его рану.</p>
<p>Тило вздрогнул и опустил карандаш.</p>
<p>— Это... неправильно? Карта должна помогать, а это...</p>
<p>— Это помогает мне, — перебила она. Её голос звучал не как утешение, а как констатация факта. — Ты переводишь тишину на язык линий. Я понимаю линии.</p>
</div>
<div class="page-number">7</div>
</div>
</div>
<!-- СТРАНИЦА 8 -->
<div class="page text-page next" id="page8">
<div class="page-content">
<div class="text">
<p>Впервые за долгое время Тило почувствовал, что его «ненужные детали» — не причуда, а полезный инструмент. Острый, точный и единственно возможный в этой странной охоте.</p>
<p>Ночью они разожгли костёр. Пламя потрескивало, но не излучало привычного уюта, а лишь сухое, бесплодное тепло. Тило достал краюху хлеба и кусок сыра. Еда была похожа на пережевывание опилок и воска.</p>
<p>— Зачем ты согласилась? — вдруг спросил он, с трудом проглатывая безвкусную массу. — Ты же не из королевства. Тебя это, наверное, не так сильно касается.</p>
<p>Виви смотрела на огонь, и в её золотых глазах плясали отражения несуществующих оттенков.</p>
<p>— Меня затрагивает всё, что нарушает баланс, — сказала она. — Лес молчит иначе. Реки текут, но не поют. Лягушки замолчали. Это не их тишина, а что-то украденное. А ещё... — она помолчала, подбирая слова. — Мне интересно. Что это за существо, которое голодно не по плоти, а по... чувствам? Оно должно быть очень одиноким.</p>
<p>— Одиноким? — Тило не понял. — Оно же чудовище и вредит.</p>
<p>— Разве ты не одинок? — прямо спросила Виви, глядя на него. — Разве я не одинока? Нас терпят, пока мы полезны: находим вещи или потерявшихся в лесу детей, рисуем странные карты. Но мы просто такие, какие есть — странные, видящие и чувствующие иначе.</p>
<p>Тило не нашёлся, что ответить. Он всегда считал свою особенность недостатком, мешающим стать настоящим картографом. А тут эта девушка с глазами змеи говорила о том же самом как о... он не мог так сходу разобрать, какое чувство в нем это вызывало.</p>
</div>
<div class="page-number">8</div>
</div>
</div>
<!-- СТРАНИЦА 9 -->
<div class="page text-page next" id="page9">
<div class="page-content">
<div class="text">
<p>— Мы найдём его не для того, чтобы убить, — продолжила Виви, словно читая его мысли. — Мы найдём его, чтобы понять. А поняв... может быть, мы найдём способ накормить его иначе, чтобы он перестал воровать.</p>
<p>Её слова висели в пресном ночном воздухе, смелые и невероятные. Но в них была железная логика, против которой не работали доводы о копьях и заклинаниях.</p>
<p>На следующее утро они нашли первый явный след. На поляне, куда вывела их карта пустоты, лежал отпечаток. Но не лапы, а скорее... вмятины, как от огромного, мягко опустившегося тела. И в этой вмятине, заполненной дождевой водой, плавало нечто удивительное. Это были радужные плёнки, маслянистые переливы, но они не сливались в грязную лужицу. Каждая капля, каждый отблеск жил отдельно, словно дракон, уходя, обронил свою коллекцию: здесь — каплю утренней росы с оттенком фиалки, там — отсвет медленного закатного облака, тут — почти ощутимый аромат мяты, застывший в виде сизого дымка над водой.</p>
<p>Тило замер с блокнотом. Это было слишком красиво, чтобы быть частью беды.</p>
<p>Виви опустилась на колени у лужицы. Она не попыталась зачерпнуть или поймать краски и просто прошептала:</p>
<p>— Смотри, как он тоскует. Он собрал всё это, унёс с собой, но не смог удержать.</p>
<p>Она подняла голову и посмотрела вглубь леса, туда, где деревья стояли плотной, тёмной стеной.</p>
<p>— Он близко. И он плачет этими красками.</p>
</div>
<div class="page-number">9</div>
</div>
</div>
<!-- СТРАНИЦА 10 -->
<div class="page text-page next" id="page10">
<div class="page-content">
<div class="text">
<p>Тило посмотрел на её профиль, острый и сосредоточенный, на следы усталости под нечеловеческими глазами. Он больше не видел в ней просто странную жительницу опушки. Но видел проводника в мир, где карты рисовались не чернилами, а тишиной и потерянными оттенками. И видел в себе не неудачника, а единственного картографа на свете, способного составить карту этого путешествия.</p>
<p>Он взял карандаш и твёрдой рукой подписал под своим эскизом следа: «Место первой встречи с тоской. Здесь Безвкусный Дракон оплакивал то, что украл, и, возможно, искал того, кто оплакивал бы его самого».</p>
<p>Путь к Сердцевине продолжался. И с каждым шагом Тило и Виви понимали друг друга всё лучше — не через многословие, а через совместное внимание к миру, который терял краски, но обнажал перед ними свои самые сокровенные, странные и печальные тайны.</p>
</div>
<div class="page-number">10</div>
<div class="page-indicator">Конец главы</div>
</div>
</div>
</div>
</div>
<script>
let currentPage = 0;
const totalPages = 10; // Обложка + 10 страницы текста
function openJournal() {
const journal = document.getElementById('journal');
journal.classList.add('journal-started');
currentPage = 1;
updatePageDisplay();
updateButtons();
}
function closeJournal() {
const journal = document.getElementById('journal');
journal.classList.remove('journal-started');
currentPage = 0;
// Возвращаем все страницы в исходное состояние
const pages = document.querySelectorAll('.text-page');
pages.forEach(page => {
page.classList.remove('current', 'prev', 'next');
page.classList.add('next');
});
updateButtons();
}
function nextPage() {
if (currentPage === 0) {
openJournal();
return;
}
if (currentPage < totalPages) {
// Анимация перелистывания текущей страницы
const currentPageEl = document.getElementById('page' + currentPage);
if (currentPageEl) {
currentPageEl.classList.remove('current');
currentPageEl.classList.add('prev');
}
currentPage++;
// Показываем следующую страницу
const nextPageEl = document.getElementById('page' + currentPage);
if (nextPageEl) {
nextPageEl.classList.remove('next');
nextPageEl.classList.add('current');
}
updateButtons();
}
}
function prevPage() {
if (currentPage > 1) {
// Скрываем текущую страницу
const currentPageEl = document.getElementById('page' + currentPage);
if (currentPageEl) {
currentPageEl.classList.remove('current');
currentPageEl.classList.add('next');
}
currentPage--;
// Показываем предыдущую страницу
const prevPageEl = document.getElementById('page' + currentPage);
if (prevPageEl) {
prevPageEl.classList.remove('prev');
prevPageEl.classList.add('current');
}
updateButtons();
}
}
function updateButtons() {
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const closeBtn = document.getElementById('close-btn');
if (prevBtn && nextBtn && closeBtn) {
prevBtn.disabled = currentPage <= 1;
nextBtn.disabled = currentPage >= totalPages;
// Меняем текст кнопки "Вперёд" на последней странице
if (currentPage === totalPages) {
nextBtn.textContent = 'Конец';
nextBtn.disabled = true;
} else {
nextBtn.textContent = 'Вперёд →';
}
// Показываем/скрываем кнопку закрытия
if (currentPage === 0) {
closeBtn.style.display = 'none';
} else {
closeBtn.style.display = 'flex';
}
}
}
function updatePageDisplay() {
// Сбрасываем все страницы
const pages = document.querySelectorAll('.text-page');
pages.forEach(page => {
page.classList.remove('current', 'prev', 'next');
page.classList.add('next');
});
// Активируем первую страницу
const firstPage = document.getElementById('page1');
if (firstPage) {
firstPage.classList.remove('next');
firstPage.classList.add('current');
}
updateButtons();
}
// Инициализация
document.addEventListener('DOMContentLoaded', function() {
// Клик на обложке и подсказке
document.querySelector('.cover').addEventListener('click', openJournal);
// Управление клавиатурой
document.addEventListener('keydown', function(e) {
if (e.code === 'Space' || e.code === 'ArrowRight' || e.code === 'Enter' || e.code === 'PageDown') {
e.preventDefault();
nextPage();
}
if (e.code === 'ArrowLeft' || e.code === 'PageUp') {
e.preventDefault();
prevPage();
}
if (e.code === 'Escape') {
closeJournal();
}
});
// Для отладки
console.log('Журнал готов. Страниц: ' + totalPages);
console.log('Нажмите на обложку или пробел для начала');
});
</script>
</body>
</html>
[/html]
[нажмите на обложку, чтобы открыть журнал]
