From e2f50bf57ea66b15d87873f6087e0ea7555a4d62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D1=83=D1=80=D0=BD=D0=B0=D1=82=20=D0=90=D0=BD=D0=B4?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B9?= <sevenhill@live.ru>
Date: Tue, 17 Feb 2026 20:37:27 +0300
Subject: [PATCH] edit

---
 BookReader/Models/Book.cs                   |   1 +
 BookReader/Resources/Raw/wwwroot/index.html | 428 +++++++++-----------
 BookReader/Services/IDatabaseService.cs     |   2 +
 BookReader/ViewModels/ReaderViewModel.cs    |  26 ++
 BookReader/Views/ReaderPage.xaml            |  16 +-
 BookReader/Views/ReaderPage.xaml.cs         |  38 +-
 6 files changed, 246 insertions(+), 265 deletions(-)

diff --git a/BookReader/Models/Book.cs b/BookReader/Models/Book.cs
index bd847b7..686c556 100644
--- a/BookReader/Models/Book.cs
+++ b/BookReader/Models/Book.cs
@@ -24,6 +24,7 @@ public class Book
     public string? LastCfi { get; set; } // CFI location for epub, or position for fb2
 
     public string? LastChapter { get; set; }
+    public string? Locations { get; set; }
 
     public DateTime DateAdded { get; set; } = DateTime.UtcNow;
 
diff --git a/BookReader/Resources/Raw/wwwroot/index.html b/BookReader/Resources/Raw/wwwroot/index.html
index 59471ff..f3e6367 100644
--- a/BookReader/Resources/Raw/wwwroot/index.html
+++ b/BookReader/Resources/Raw/wwwroot/index.html
@@ -5,31 +5,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Book Reader</title>
     <style>
-        * {
+        * { /* Сброс отступов и установка box-sizing для всех элементов */
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
 
-        html, body {
+        html, body { /* Растягиваем страницу на весь экран, отключаем прокрутку и выделение текста */
             width: 100%;
             height: 100%;
             overflow: hidden;
-            background-color: #faf8ef;
+            background-color: #faf8ef; /* Цвет "сепия" для комфортного чтения */
             font-family: serif;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
+            -webkit-touch-callout: none; /* Запрет контекстного меню при долгом нажатии (iOS) */
+            -webkit-user-select: none; /* Запрет выделения текста */
             user-select: none;
         }
 
-        #reader-container {
+        #reader-container { /* Основной контейнер для книги */
             width: 100%;
             height: 100%;
             position: relative;
             overflow: hidden;
         }
 
-        #book-content, #fb2-content {
+        #book-content, #fb2-content { /* Контейнеры для EPUB и FB2 соответственно */
             width: 100%;
             height: 100%;
             position: absolute;
@@ -37,7 +37,7 @@
             left: 0;
         }
 
-        #fb2-content {
+        #fb2-content { /* Специфичные настройки для FB2: отступы и скрытие по умолчанию */
             overflow: hidden;
             padding: 20px;
             font-size: 18px;
@@ -45,7 +45,7 @@
             display: none;
         }
 
-        #loading {
+        #loading { /* Центрированный экран загрузки */
             display: flex;
             justify-content: center;
             align-items: center;
@@ -56,7 +56,7 @@
             gap: 15px;
         }
 
-        .spinner {
+        .spinner { /* Анимация крутящегося индикатора загрузки */
             width: 40px;
             height: 40px;
             border: 4px solid #ddd;
@@ -65,13 +65,13 @@
             animation: spin 1s linear infinite;
         }
 
-        @keyframes spin {
+        @keyframes spin { /* Описание вращения спиннера */
             to {
                 transform: rotate(360deg);
             }
         }
 
-        #error-display {
+        #error-display { /* Контейнер для вывода ошибок */
             display: none;
             justify-content: center;
             align-items: center;
@@ -84,7 +84,7 @@
             gap: 10px;
         }
 
-        /* Прозрачные зоны для тачей */
+        /* Прозрачные зоны для управления тапами (назад, меню, вперед) */
         .touch-zone {
             position: fixed;
             top: 0;
@@ -96,23 +96,22 @@
             left: 0;
             width: 30%;
         }
-
+        /* Левая треть экрана — назад */
         #touch-right {
             right: 0;
             width: 30%;
         }
-
+        /* Правая треть — вперед */
         #touch-center {
             left: 30%;
             width: 40%;
         }
+        /* Центр — открыть меню */
     </style>
 </head>
 <body>
     <div id="reader-container">
-        <div id="book-content"></div>
-        <div id="fb2-content"></div>
-        <div id="loading">
+        <div id="book-content"></div> <div id="fb2-content"></div> <div id="loading">
             <div class="spinner"></div>
             <span id="loading-text">Initializing...</span>
         </div>
@@ -127,14 +126,20 @@
 
     <script src="_framework/hybridwebview.js"></script>
     <script src="js/jszip.min.js"></script>
-    <script src="js/epub.min.js"></script>
+    <script src="js/epub.min.js"></script> ```
+
+    ---
+
+    ### JavaScript Логика
+
+    ```javascript
     <script>
-        (function () {
+        (function () { // Самовызывающаяся функция для изоляции переменных
             'use strict';
 
             // ========== КЭШИРОВАННЫЕ DOM-ЭЛЕМЕНТЫ ==========
-            const $ = id => document.getElementById(id);
-            const els = {
+            const $ = id => document.getElementById(id); // Короткий псевдоним для поиска элементов
+            const els = { // Объект со ссылками на элементы для быстрого доступа
                 loading: $('loading'),
                 loadingText: $('loading-text'),
                 errorDisplay: $('error-display'),
@@ -143,58 +148,56 @@
                 fb2Content: $('fb2-content'),
             };
 
-            // ========== СОСТОЯНИЕ ==========
-            const state = {
-                book: null,
-                rendition: null,
-                currentCfi: null,
-                totalPages: 0,
-                currentPage: 0,
-                bookFormat: '',
+            // ========== СОСТОЯНИЕ (STATE) ==========
+            const state = { // Глобальный объект состояния текущей книги
+                book: null,        // Объект книги epub.js
+                rendition: null,   // Объект отображения epub.js
+                currentCfi: null,  // Текущая позиция (идентификатор) в EPUB
+                totalPages: 0,     // Всего страниц
+                currentPage: 0,    // Текущая страница
+                bookFormat: '',    // epub или fb2
                 isBookLoaded: false,
                 fb2CurrentPage: 0,
                 fb2TotalPages: 1,
-                toc: []
+                toc: []            // Оглавление
             };
 
             // ========== УТИЛИТЫ ==========
-            function debugLog(msg) {
+            function debugLog(msg) { // Логирование в консоль с префиксом
                 console.log('[Reader] ' + msg);
             }
 
-            function showError(msg) {
+            function showError(msg) { // Показ экрана ошибки пользователю
                 els.loading.style.display = 'none';
                 els.errorDisplay.style.display = 'flex';
                 els.errorText.textContent = msg;
                 debugLog('ERROR: ' + msg);
             }
 
-            function setLoadingText(msg) {
+            function setLoadingText(msg) { // Обновление текста на экране загрузки
                 if (els.loadingText) els.loadingText.textContent = msg;
                 debugLog(msg);
             }
 
-            // Один div для escapeHtml — переиспользуем
-            const _escDiv = document.createElement('div');
-            function escapeHtml(text) {
+            const _escDiv = document.createElement('div'); // Буфер для очистки HTML
+            function escapeHtml(text) { // Защита от XSS: превращает < в &lt; и т.д.
                 _escDiv.textContent = text;
                 return _escDiv.innerHTML;
             }
 
-            function base64ToArrayBuffer(base64) {
-                const bin = atob(base64);
+            function base64ToArrayBuffer(base64) { // Конвертация данных из строки (Base64) в бинарный массив
+                const bin = atob(base64); // Декодирование base64
                 const len = bin.length;
                 const buf = new ArrayBuffer(len);
                 const view = new Uint8Array(buf);
-                // Обработка блоками для больших файлов — снижает давление на GC
                 for (let i = 0; i < len; i++) {
-                    view[i] = bin.charCodeAt(i);
+                    view[i] = bin.charCodeAt(i); // Заполнение массива байтами
                 }
                 return buf;
             }
 
-            // ========== MESSAGE BRIDGE ==========
-            function sendMessage(action, data) {
+            // ========== MESSAGE BRIDGE (Связь с приложением) ==========
+            function sendMessage(action, data) { // Отправка данных в нативный код (C# / Swift / Kotlin)
                 const message = JSON.stringify({ action, data: data || {} });
                 try {
                     if (window.HybridWebView && typeof window.HybridWebView.SendRawMessage === 'function') {
@@ -205,70 +208,67 @@
                 }
             }
 
-            // ========== TOUCH / SWIPE ==========
+            // ========== TOUCH / SWIPE (Жесты) ==========
             let swipeStartX = 0, swipeStartY = 0, swipeStartTime = 0;
 
-            const touchActions = {
+            const touchActions = { // Действия при клике на зоны
                 'touch-left': () => window.prevPage(),
                 'touch-right': () => window.nextPage(),
-                'touch-center': () => sendMessage('toggleMenu', {}),
+                'touch-center': () => sendMessage('toggleMenu', {}), // Показать меню приложения
             };
 
-            function initTouchZones() {
+            function initTouchZones() { // Настройка слушателей событий на зоны тача
                 Object.keys(touchActions).forEach(id => {
                     const el = $(id);
                     if (!el) return;
 
-                    el.addEventListener('click', e => {
+                    el.addEventListener('click', e => { // Обработка обычного клика
                         e.preventDefault();
                         e.stopPropagation();
                         touchActions[id]();
                     });
 
-                    el.addEventListener('touchstart', e => {
+                    el.addEventListener('touchstart', e => { // Начало касания для свайпа
                         const t = e.touches[0];
                         swipeStartX = t.clientX;
                         swipeStartY = t.clientY;
                         swipeStartTime = Date.now();
                     }, { passive: true });
 
-                    el.addEventListener('touchend', e => {
+                    el.addEventListener('touchend', e => { // Конец касания: расчет свайпа
                         const t = e.changedTouches[0];
-                        const dx = t.clientX - swipeStartX;
-                        const dt = Date.now() - swipeStartTime;
-                        if (dt < 500 && Math.abs(dx) > Math.abs(t.clientY - swipeStartY) && Math.abs(dx) > 50) {
+                        const dx = t.clientX - swipeStartX; // Смещение по горизонтали
+                        const dy = t.clientY - swipeStartY; // Смещение по вертикали
+                        const dt = Date.now() - swipeStartTime; // Время касания
+                        // Если быстро (меньше 0.5с), горизонтально и длиннее 50px
+                        if (dt < 500 && Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
                             dx < 0 ? window.nextPage() : window.prevPage();
                         }
                     }, { passive: true });
                 });
             }
 
-            // ========== EPUB ==========
-            function loadEpubFromBase64(base64Data, lastCfi) {
+            // ========== EPUB LOGIC ==========
+            function loadEpubFromBase64(base64Data, lastCfi, cachedLocations) {
                 setLoadingText('Decoding EPUB...');
-
                 try {
                     const arrayBuffer = base64ToArrayBuffer(base64Data);
-                    debugLog('EPUB size: ' + arrayBuffer.byteLength + ' bytes');
-
                     if (typeof JSZip === 'undefined') { showError('JSZip not loaded!'); return; }
                     if (typeof ePub === 'undefined') { showError('epub.js not loaded!'); return; }
 
-                    setLoadingText('Opening EPUB...');
-
-                    // epub.js сам умеет работать с ArrayBuffer — двойная распаковка не нужна
-                    state.book = ePub(arrayBuffer);
-
+                    state.book = ePub(arrayBuffer); // Создание объекта книги из данных
                     els.fb2Content.style.display = 'none';
                     els.bookContent.style.display = 'block';
 
+                    // Рендеринг (отрисовка) книги в контейнер
                     state.rendition = state.book.renderTo('book-content', {
                         width: '100%',
                         height: '100%',
-                        spread: 'none',
-                        flow: 'paginated'
+                        spread: 'none', // Без двухстраничного режима
+                        flow: 'paginated' // Режим постраничного отображения
                     });
 
+                    // Настройка стилей внутри фрейма книги
                     state.rendition.themes.default({
                         'body': {
                             'font-family': 'serif !important',
@@ -281,149 +281,124 @@
                         'p': { 'text-indent': '1.5em', 'margin-bottom': '0.5em' }
                     });
 
-                    state.book.ready
-                        .then(() => {
-                            debugLog('EPUB ready');
-                            els.loading.style.display = 'none';
+                    state.book.ready.then(() => {
+                        // Убираем экран загрузки СРАЗУ, как только книга готова к отрисовке первой страницы
+                        els.loading.style.display = 'none';
 
-                            try {
-                                const toc = state.book.navigation.toc || [];
-                                state.toc = toc.map(ch => ({
-                                    label: (ch.label || '').trim(),
-                                    href: ch.href || ''
-                                }));
-                                sendMessage('chaptersLoaded', { chapters: state.toc });
-                            } catch (e) {
-                                debugLog('TOC error: ' + e.message);
-                            }
-                            const charsPerScreen = Math.max(600, Math.floor((window.innerWidth * window.innerHeight) / 400));
+                        // Обработка оглавления
+                        const toc = state.book.navigation.toc || [];
+                        state.toc = toc.map(ch => ({ label: ch.label.trim(), href: ch.href }));
+                        sendMessage('chaptersLoaded', { chapters: state.toc });
 
-                            return state.book.locations.generate(charsPerScreen);
-                        })
-                        .then(() => {
+                        // ПРОВЕРКА КЭША: Если мы уже передали сохраненные локации
+                        if (cachedLocations) {
+                            debugLog("Загрузка из кэша...");
+                            state.book.locations.load(cachedLocations);
                             state.totalPages = state.book.locations.length();
-                            debugLog('Pages: ' + state.totalPages);
                             sendMessage('bookReady', { totalPages: state.totalPages });
-                            state.isBookLoaded = true;
-                        })
-                        .catch(e => debugLog('Book ready error: ' + e.message));
+                        } else {
+                            debugLog("Кэша нет, считаем в фоне...");
+                            // Используем setTimeout, чтобы не блокировать поток отрисовки
+                            setTimeout(() => {
+                                state.book.locations.generate(2000).then(() => {
+                                    state.totalPages = state.book.locations.length();
+                                    const locationsToSave = state.book.locations.save();
 
-                    state.rendition.on('relocated', location => {
-                        if (!location || !location.start) return;
-                        state.currentCfi = location.start.cfi;
-                        // 1. Достаем страницы ВНУТРИ главы
-                        // Если epub.js не успел посчитать (бывает на долю секунды), ставим 1
-                        const chapterPage = location.start.displayed ? location.start.displayed.page : 1;
-                        const chapterTotal = location.start.displayed ? location.start.displayed.total : 1;
-
-                        // 2. Ищем красивое название главы по её href
-                        const currentHref = location.start.href || '';
-                        let chapterName = currentHref; // По умолчанию системное имя
-
-                        // Пытаемся найти точное совпадение в сохраненном оглавлении
-                        const foundChapter = state.toc.find(ch => currentHref.includes(ch.href));
-                        if (foundChapter) {
-                            chapterName = foundChapter.label;
-                        }
-                        try {
-                            sendMessage('progressUpdate', {
-                                progress: state.book.locations.percentageFromCfi(state.currentCfi) || 0,
-                                cfi: state.currentCfi,
-                                currentPage: location.start.location || 0, // Глобальная страница
-                                totalPages: state.totalPages,              // Всего глобальных страниц
-                                chapterCurrentPage: chapterPage,           // <--- Страница в главе!
-                                chapterTotalPages: chapterTotal,           // <--- Всего страниц в главе!
-                                chapter: chapterName                       // <--- Красивое имя главы
-                            });
-                        } catch (e) {
-                            debugLog('Relocated error: ' + e.message);
+                                    // Отправляем в C#, чтобы сохранить на будущее
+                                    sendMessage('saveLocations', { locations: locationsToSave });
+                                    sendMessage('bookReady', { totalPages: state.totalPages });
+                                });
+                            }, 100);
                         }
                     });
 
-                    setLoadingText('Rendering...');
-                    const displayTarget = (lastCfi && lastCfi !== 'null' && lastCfi !== 'undefined')
-                        ? lastCfi : undefined;
+                    // Событие при смене страницы
+                    state.rendition.on('relocated', location => {
+                        if (!location || !location.start) return;
+                        state.currentCfi = location.start.cfi;
+
+                        const chapterPage = location.start.displayed ? location.start.displayed.page : 1;
+                        const chapterTotal = location.start.displayed ? location.start.displayed.total : 1;
+                        const currentHref = location.start.href || '';
+
+                        // Поиск человеческого названия текущей главы
+                        let chapterName = currentHref;
+                        const foundChapter = state.toc.find(ch => currentHref.includes(ch.href));
+                        if (foundChapter) chapterName = foundChapter.label;
+
+                        // Отправка прогресса в приложение
+                        sendMessage('progressUpdate', {
+                            progress: state.book.locations.percentageFromCfi(state.currentCfi) || 0,
+                            cfi: state.currentCfi,
+                            currentPage: location.start.location || 0,
+                            totalPages: state.totalPages,
+                            chapterCurrentPage: chapterPage,
+                            chapterTotalPages: chapterTotal,
+                            chapter: chapterName
+                        });
+                    });
+
+                    // Отображение книги на сохраненной позиции или в начале
+                    const displayTarget = (lastCfi && lastCfi !== 'null' && lastCfi !== 'undefined') ? lastCfi : undefined;
                     state.rendition.display(displayTarget);
 
-                } catch (e) {
-                    showError('EPUB load error: ' + e.message);
-                }
+                } catch (e) { showError('EPUB load error: ' + e.message); }
             }
 
-            // ========== FB2 ==========
+            // ========== FB2 LOGIC ==========
             function loadFb2FromBase64(base64Data, lastPosition) {
                 setLoadingText('Parsing FB2...');
-
                 try {
                     const arrayBuffer = base64ToArrayBuffer(base64Data);
                     const bytes = new Uint8Array(arrayBuffer);
-
                     let xmlText = new TextDecoder('utf-8').decode(bytes);
 
-                    // Перекодируем если нужно
+                    // Проверка кодировки в заголовке XML (если не UTF-8, перекодируем)
                     const encMatch = xmlText.match(/encoding=["\']([^"\']+)["\']/i);
-                    if (encMatch) {
-                        const enc = encMatch[1].toLowerCase();
-                        debugLog('FB2 encoding: ' + enc);
-                        if (enc !== 'utf-8') {
-                            try { xmlText = new TextDecoder(enc).decode(bytes); }
-                            catch (e) { debugLog('Re-decode error: ' + e.message); }
-                        }
+                    if (encMatch && encMatch[1].toLowerCase() !== 'utf-8') {
+                        xmlText = new TextDecoder(encMatch[1]).decode(bytes);
                     }
 
                     els.bookContent.style.display = 'none';
                     els.fb2Content.style.display = 'block';
 
+                    // Парсинг строки в XML-документ
                     const doc = new DOMParser().parseFromString(xmlText, 'text/xml');
-                    if (doc.querySelector('parsererror')) {
-                        showError('FB2 XML parse error');
-                        return;
-                    }
+                    if (doc.querySelector('parsererror')) { showError('FB2 XML parse error'); return; }
 
-                    const fb2Html = parseFb2Document(doc);
+                    const fb2Html = parseFb2Document(doc); // Преобразование FB2 XML в HTML
                     els.fb2Content.innerHTML = fb2Html.html;
                     els.loading.style.display = 'none';
 
-                    // Используем requestAnimationFrame вместо setTimeout для точного тайминга
+                    // Использование анимационных кадров для замера размеров после вставки в DOM
                     requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
-                            setupFb2Pagination();
+                            setupFb2Pagination(); // Нарезка на колонки
                             sendMessage('chaptersLoaded', { chapters: fb2Html.chapters });
                             sendMessage('bookReady', { totalPages: state.totalPages });
                             state.isBookLoaded = true;
                             state.bookFormat = 'fb2';
-
-                            if (lastPosition && parseFloat(lastPosition) > 0) {
-                                goToFb2Position(parseFloat(lastPosition));
-                            }
+                            if (lastPosition) goToFb2Position(parseFloat(lastPosition));
                             updateFb2Progress();
                         });
                     });
-
-                } catch (e) {
-                    showError('FB2 error: ' + e.message);
-                }
+                } catch (e) { showError('FB2 error: ' + e.message); }
             }
 
-            // ========== FB2 PARSER ==========
-            // Вспомогательная: получить локальное имя тега без namespace
-            function localTag(el) {
+            // ========== FB2 PARSER (Преобразование тегов) ==========
+            function localTag(el) { // Утилита для получения имени тега без пространств имен (типа fb2:)
                 return el.tagName ? el.tagName.toLowerCase().replace(/.*:/, '') : '';
             }
 
             function parseFb2Document(doc) {
                 const chapters = [];
                 const parts = ['<div id="fb2-inner" style="font-size:18px;font-family:serif;line-height:1.6;">'];
-
-                let bodies = doc.querySelectorAll('body');
-                if (!bodies.length) {
-                    bodies = doc.getElementsByTagNameNS('http://www.gribuser.ru/xml/fictionbook/2.0', 'body');
-                }
+                let bodies = doc.querySelectorAll('body'); // FB2 может иметь несколько body (основной текст, сноски)
 
                 let chapterIndex = 0;
                 for (const body of bodies) {
                     for (const child of body.children) {
-                        if (localTag(child) === 'section') {
+                        if (localTag(child) === 'section') { // Секции — это главы
                             const result = parseFb2Section(child, chapterIndex);
                             parts.push(result.html);
                             chapters.push(...result.chapters);
@@ -431,45 +406,33 @@
                         }
                     }
                 }
-
                 parts.push('</div>');
-                if (!chapters.length) chapters.push({ label: 'Start', href: '0' });
                 return { html: parts.join(''), chapters };
             }
 
-            // Маппинг тегов FB2 → генераторы HTML
+            // Обработчики конкретных тегов FB2
             const sectionTagHandlers = {
-                title(child, idx, chapters) {
+                title(child, idx, chapters) { // Заголовки глав
                     const text = (child.textContent || '').trim();
                     chapters.push({ label: text, href: idx.toString() });
                     return `<h2 class="fb2-title" data-chapter="${idx}" style="text-align:center;margin:1em 0 .5em">${escapeHtml(text)}</h2>`;
                 },
-                p(child) {
+                p(child) { // Абзацы
                     return `<p style="text-indent:1.5em;margin-bottom:.3em">${getInlineHtml(child)}</p>`;
                 },
                 'empty-line'() { return '<br/>'; },
-                subtitle(child) {
-                    return `<h3 style="text-align:center;margin:.8em 0">${escapeHtml(child.textContent || '')}</h3>`;
-                },
-                epigraph(child) {
-                    return `<blockquote style="font-style:italic;margin:1em 2em">${parseInnerParagraphs(child)}</blockquote>`;
-                },
-                poem(child) {
-                    return `<div style="margin:1em 2em">${parsePoem(child)}</div>`;
-                },
-                cite(child) {
-                    return `<blockquote style="margin:1em 2em;padding-left:1em;border-left:3px solid #ccc">${parseInnerParagraphs(child)}</blockquote>`;
-                },
+                subtitle(child) { return `<h3 style="text-align:center;margin:.8em 0">${escapeHtml(child.textContent || '')}</h3>`; },
+                epigraph(child) { return `<blockquote style="font-style:italic;margin:1em 2em">${parseInnerParagraphs(child)}</blockquote>`; },
+                poem(child) { return `<div style="margin:1em 2em">${parsePoem(child)}</div>`; },
+                cite(child) { return `<blockquote style="margin:1em 2em;padding-left:1em;border-left:3px solid #ccc">${parseInnerParagraphs(child)}</blockquote>`; },
             };
 
             function parseFb2Section(section, startIndex) {
                 const chapters = [];
                 const parts = [`<div class="fb2-section" data-section="${startIndex}">`];
-
                 for (const child of section.children) {
                     const tag = localTag(child);
-
-                    if (tag === 'section') {
+                    if (tag === 'section') { // Рекурсия для вложенных секций
                         const sub = parseFb2Section(child, startIndex + chapters.length);
                         parts.push(sub.html);
                         chapters.push(...sub.chapters);
@@ -477,17 +440,15 @@
                         parts.push(sectionTagHandlers[tag](child, startIndex + chapters.length, chapters));
                     }
                 }
-
                 parts.push('</div>');
                 return { html: parts.join(''), chapters };
             }
 
-            function getInlineHtml(el) {
+            function getInlineHtml(el) { // Обработка форматирования внутри строки (жирный, курсив)
                 const parts = [];
                 for (const node of el.childNodes) {
-                    if (node.nodeType === 3) {
-                        parts.push(escapeHtml(node.textContent));
-                    } else if (node.nodeType === 1) {
+                    if (node.nodeType === 3) parts.push(escapeHtml(node.textContent)); // Текст
+                    else if (node.nodeType === 1) { // Тег
                         const tag = localTag(node);
                         const inner = getInlineHtml(node);
                         if (tag === 'strong' || tag === 'bold') parts.push(`<strong>${inner}</strong>`);
@@ -499,7 +460,7 @@
                 return parts.join('');
             }
 
-            function parseInnerParagraphs(el) {
+            function parseInnerParagraphs(el) { // Парсинг группы абзацев (для цитат/эпиграфов)
                 const parts = [];
                 for (const child of el.children) {
                     const tag = localTag(child);
@@ -509,7 +470,7 @@
                 return parts.join('');
             }
 
-            function parsePoem(el) {
+            function parsePoem(el) { // Парсинг стихов (строфы и строки)
                 const parts = [];
                 for (const child of el.children) {
                     const tag = localTag(child);
@@ -526,7 +487,7 @@
                 return parts.join('');
             }
 
-            // ========== FB2 PAGINATION ==========
+            // ========== FB2 PAGINATION (Имитация страниц через CSS Columns) ==========
             function setupFb2Pagination() {
                 const container = els.fb2Content;
                 const inner = $('fb2-inner');
@@ -535,16 +496,17 @@
                 const w = container.clientWidth;
                 const h = container.clientHeight;
 
+                // Основная магия: CSS превращает длинный текст в ряд колонок шириной с экран
                 Object.assign(inner.style, {
                     columnWidth: w + 'px',
-                    columnGap: '40px',
+                    columnGap: '40px', // Зазор между колонками
                     columnFill: 'auto',
                     height: h + 'px',
                     overflow: 'hidden',
                 });
 
-                // Даём браузеру отрисовать колонки
                 requestAnimationFrame(() => {
+                    // Общая ширина контента делить на ширину экрана = количество страниц
                     state.fb2TotalPages = Math.max(1, Math.ceil(inner.scrollWidth / w));
                     state.totalPages = state.fb2TotalPages;
                     state.fb2CurrentPage = 0;
@@ -553,16 +515,17 @@
                 });
             }
 
-            function showFb2Page(idx) {
+            function showFb2Page(idx) { // Переход на конкретную страницу FB2
                 idx = Math.max(0, Math.min(idx, state.fb2TotalPages - 1));
                 state.fb2CurrentPage = idx;
                 const inner = $('fb2-inner');
                 if (inner) {
+                    // Сдвигаем контент влево, чтобы показать нужную "колонку"
                     inner.style.transform = `translateX(-${idx * els.fb2Content.clientWidth}px)`;
                 }
             }
 
-            function updateFb2Progress() {
+            function updateFb2Progress() { // Оповещение приложения о прогрессе в FB2
                 const total = state.fb2TotalPages;
                 const progress = total > 1 ? state.fb2CurrentPage / (total - 1) : 0;
                 sendMessage('progressUpdate', {
@@ -574,69 +537,67 @@
                 });
             }
 
-            function getCurrentFb2Chapter() {
+            function getCurrentFb2Chapter() { // Поиск заголовка, который сейчас виден на экране
                 const inner = $('fb2-inner');
                 const container = els.fb2Content;
                 if (!inner || !container) return '';
-
                 const maxOffset = state.fb2CurrentPage * container.clientWidth + container.clientWidth;
                 let chapter = '';
                 const titles = inner.querySelectorAll('.fb2-title');
                 for (let i = 0; i < titles.length; i++) {
                     if (titles[i].offsetLeft <= maxOffset) chapter = titles[i].textContent;
-                    else break; // Заголовки идут по порядку — можно прервать
+                    else break;
                 }
                 return chapter;
             }
 
-            function goToFb2Position(progress) {
+            function goToFb2Position(progress) { // Переход по проценту (0.0 - 1.0)
                 showFb2Page(Math.round(progress * (state.fb2TotalPages - 1)));
             }
 
-            // ========== PUBLIC API ==========
-            window.loadBookFromBase64 = function (base64Data, format, lastPosition) {
-                debugLog(`loadBookFromBase64: format=${format}, len=${base64Data ? base64Data.length : 0}`);
+            // ========== PUBLIC API (Методы, доступные извне, например из C#) ==========
+            window.loadBookFromBase64 = function (base64Data, format, lastPosition, cachedLocations) {
                 state.bookFormat = format;
-
-                if (format === 'epub') loadEpubFromBase64(base64Data, lastPosition);
-                else if (format === 'fb2') loadFb2FromBase64(base64Data, lastPosition);
+                if (format === 'epub') {
+                    // Передаем кэш в основную функцию загрузки
+                    loadEpubFromBase64(base64Data, lastPosition, cachedLocations);
+                }
+                else if (format === 'fb2') {
+                    loadFb2FromBase64(base64Data, lastPosition);
+                }
                 else showError('Unsupported format: ' + format);
             };
 
-            window.nextPage = function () {
-                if (state.bookFormat === 'epub' && state.rendition) {
-                    state.rendition.next();
-                } else if (state.bookFormat === 'fb2' && state.fb2CurrentPage < state.fb2TotalPages - 1) {
+            window.nextPage = function () { // Листать вперед
+                if (state.bookFormat === 'epub' && state.rendition) state.rendition.next();
+                else if (state.bookFormat === 'fb2' && state.fb2CurrentPage < state.fb2TotalPages - 1) {
                     showFb2Page(state.fb2CurrentPage + 1);
                     updateFb2Progress();
                 }
             };
 
-            window.prevPage = function () {
-                if (state.bookFormat === 'epub' && state.rendition) {
-                    state.rendition.prev();
-                } else if (state.bookFormat === 'fb2' && state.fb2CurrentPage > 0) {
+            window.prevPage = function () { // Листать назад
+                if (state.bookFormat === 'epub' && state.rendition) state.rendition.prev();
+                else if (state.bookFormat === 'fb2' && state.fb2CurrentPage > 0) {
                     showFb2Page(state.fb2CurrentPage - 1);
                     updateFb2Progress();
                 }
             };
 
-            window.setFontSize = function (size) {
-                if (state.bookFormat === 'epub' && state.rendition) {
-                    state.rendition.themes.fontSize(size + 'px');
-                } else if (state.bookFormat === 'fb2') {
+            window.setFontSize = function (size) { // Изменение размера шрифта
+                if (state.bookFormat === 'epub' && state.rendition) state.rendition.themes.fontSize(size + 'px');
+                else if (state.bookFormat === 'fb2') {
                     const inner = $('fb2-inner');
                     if (inner) {
                         inner.style.fontSize = size + 'px';
-                        requestAnimationFrame(setupFb2Pagination);
+                        requestAnimationFrame(setupFb2Pagination); // Пересчитать страницы!
                     }
                 }
             };
 
-            window.setFontFamily = function (family) {
-                if (state.bookFormat === 'epub' && state.rendition) {
-                    state.rendition.themes.font(family);
-                } else if (state.bookFormat === 'fb2') {
+            window.setFontFamily = function (family) { // Изменение гарнитуры шрифта
+                if (state.bookFormat === 'epub' && state.rendition) state.rendition.themes.font(family);
+                else if (state.bookFormat === 'fb2') {
                     const inner = $('fb2-inner');
                     if (inner) {
                         inner.style.fontFamily = family;
@@ -645,23 +606,18 @@
                 }
             };
 
-            window.goToChapter = function (href) {
-                if (state.bookFormat === 'epub' && state.rendition) {
-                    state.rendition.display(href);
-                } else if (state.bookFormat === 'fb2') {
-                    const inner = $('fb2-inner');
-                    const container = els.fb2Content;
-                    if (inner && container) {
-                        const el = inner.querySelector(`[data-chapter="${href}"]`);
-                        if (el) {
-                            showFb2Page(Math.floor(el.offsetLeft / container.clientWidth));
-                            updateFb2Progress();
-                        }
+            window.goToChapter = function (href) { // Переход к главе из оглавления
+                if (state.bookFormat === 'epub' && state.rendition) state.rendition.display(href);
+                else if (state.bookFormat === 'fb2') {
+                    const el = $('fb2-inner').querySelector(`[data-chapter="${href}"]`);
+                    if (el) {
+                        showFb2Page(Math.floor(el.offsetLeft / els.fb2Content.clientWidth));
+                        updateFb2Progress();
                     }
                 }
             };
 
-            window.getProgress = function () {
+            window.getProgress = function () { // Запрос текущего состояния прогресса (в JSON)
                 if (state.bookFormat === 'epub' && state.book && state.currentCfi) {
                     try {
                         return JSON.stringify({
@@ -674,19 +630,17 @@
                 } else if (state.bookFormat === 'fb2') {
                     const p = state.fb2TotalPages > 1 ? state.fb2CurrentPage / (state.fb2TotalPages - 1) : 0;
                     return JSON.stringify({
-                        progress: p,
-                        cfi: p.toString(),
-                        currentPage: state.fb2CurrentPage + 1,
-                        totalPages: state.fb2TotalPages
+                        progress: p, cfi: p.toString(),
+                        currentPage: state.fb2CurrentPage + 1, totalPages: state.fb2TotalPages
                     });
                 }
                 return '{}';
             };
 
-            // ========== INIT ==========
-            initTouchZones();
-            setLoadingText('Waiting for book...');
-            sendMessage('readerReady', {});
+            // ========== ИНИЦИАЛИЗАЦИЯ ==========
+            initTouchZones(); // Включаем зоны кликов
+            setLoadingText('Waiting for book...'); // Сообщаем, что готовы принимать файл
+            sendMessage('readerReady', {}); // Уведомляем нативное приложение: "Я загрузился!"
 
         })();
     </script>
diff --git a/BookReader/Services/IDatabaseService.cs b/BookReader/Services/IDatabaseService.cs
index 99e659d..18a52e3 100644
--- a/BookReader/Services/IDatabaseService.cs
+++ b/BookReader/Services/IDatabaseService.cs
@@ -1,4 +1,6 @@
 using BookReader.Models;
+using System.Net;
+using static Android.Provider.CallLog;
 
 namespace BookReader.Services;
 
diff --git a/BookReader/ViewModels/ReaderViewModel.cs b/BookReader/ViewModels/ReaderViewModel.cs
index 899a319..5f9b0f3 100644
--- a/BookReader/ViewModels/ReaderViewModel.cs
+++ b/BookReader/ViewModels/ReaderViewModel.cs
@@ -39,13 +39,26 @@ public partial class ReaderViewModel : BaseViewModel
     [ObservableProperty]
     private int _chapterTotalPages = 1;
 
+    [ObservableProperty]
+    private int _currentPage = 1;
+
+    [ObservableProperty]
+    private int _totalPages = 1;
+
     // Это свойство будет обновляться автоматически при изменении любого из полей выше
     public string ChapterProgressText => $"{ChapterCurrentPage} из {ChapterTotalPages}";
 
+    // Это свойство будет обновляться автоматически при изменении любого из полей выше
+    public string ProgressText => $"{CurrentPage} из {TotalPages}";
+
     // Чтобы ChapterProgressText уведомлял интерфейс, добавим частичные методы (особенность Toolkit)
     partial void OnChapterCurrentPageChanged(int value) => OnPropertyChanged(nameof(ChapterProgressText));
     partial void OnChapterTotalPagesChanged(int value) => OnPropertyChanged(nameof(ChapterProgressText));
 
+    // Чтобы ProgressText уведомлял интерфейс, добавим частичные методы (особенность Toolkit)
+    partial void OnCurrentPageChanged(int value) => OnPropertyChanged(nameof(ProgressText));
+    partial void OnTotalPagesChanged(int value) => OnPropertyChanged(nameof(ProgressText));
+
     public List<string> AvailableFonts { get; } = new()
     {
         "serif",
@@ -130,6 +143,14 @@ public partial class ReaderViewModel : BaseViewModel
         IsMenuVisible = false;
     }
 
+    public async Task SaveLocationsAsync(string locations)
+    {
+        if (Book == null) return;
+        Book.Locations = locations;
+        // Сохраняем в базу данных
+        await _databaseService.UpdateBookAsync(Book);
+    }
+
     public async Task SaveProgressAsync(double progress, string? cfi, string? chapter, int currentPage, int totalPages)
     {
         if (Book == null) return;
@@ -172,6 +193,11 @@ public partial class ReaderViewModel : BaseViewModel
         return Book?.LastCfi;
     }
 
+    public string? GetLocations()
+    {
+        return Book?.Locations;
+    }
+
     private static string EscapeJs(string value)
     {
         return value.Replace("\\", "\\\\").Replace("'", "\\'").Replace("\n", "\\n").Replace("\r", "\\r");
diff --git a/BookReader/Views/ReaderPage.xaml b/BookReader/Views/ReaderPage.xaml
index f1cbc09..683eff9 100644
--- a/BookReader/Views/ReaderPage.xaml
+++ b/BookReader/Views/ReaderPage.xaml
@@ -23,7 +23,7 @@
 
         <!-- Всплывающее меню -->
         <Grid IsVisible="{Binding IsMenuVisible}"
-              BackgroundColor="#88000000"
+              BackgroundColor="Transparent"
               InputTransparent="False">
             <Grid.GestureRecognizers>
                 <TapGestureRecognizer Command="{Binding HideMenuCommand}" />
@@ -33,10 +33,9 @@
          VerticalOptions="Start"
         HorizontalOptions="FillAndExpand"
          Padding="20"
-         HasShadow="True"
          BorderColor="Transparent">
                 <VerticalStackLayout>
-                    <Label Text="{Binding ChapterProgressText}"
+                    <Label Text="{Binding ProgressText}"
              TextColor="White"
              FontSize="12"
              HorizontalTextAlignment="Center" />
@@ -50,14 +49,11 @@
              Clicked="OnBackToLibrary" />
                 </VerticalStackLayout>
             </Frame>
-            <!--Menu Panel-->
-            <Frame VerticalOptions="Center"
-                   HorizontalOptions="Center"
-                   WidthRequest="320"
+            <!--Нижняя панель-->
+            <Frame VerticalOptions="End"
+                   HorizontalOptions="FillAndExpand"
                    BackgroundColor="#2C2C2C"
-                   CornerRadius="16"
                    Padding="20"
-                   HasShadow="True"
                    BorderColor="Transparent">
                 <Frame.GestureRecognizers>
                     <TapGestureRecognizer Tapped="OnMenuPanelTapped" />
@@ -159,7 +155,7 @@
    Padding="10,2" 
    BorderColor="Transparent"
    HasShadow="False">
-                <Label Text="{Binding ChapterProgressText}"
+                <Label Text="{Binding ProgressText}"
        TextColor="White"
        FontSize="12"
        HorizontalTextAlignment="Center" />
diff --git a/BookReader/Views/ReaderPage.xaml.cs b/BookReader/Views/ReaderPage.xaml.cs
index 16ce375..4b5c18b 100644
--- a/BookReader/Views/ReaderPage.xaml.cs
+++ b/BookReader/Views/ReaderPage.xaml.cs
@@ -61,13 +61,11 @@ public partial class ReaderPage : ContentPage
             var book = _viewModel.Book;
             if (book == null)
             {
-                System.Diagnostics.Debug.WriteLine("[Reader] Book is null");
                 return;
             }
 
             if (_isBookLoaded)
             {
-                System.Diagnostics.Debug.WriteLine("[Reader] Already loaded");
                 return;
             }
 
@@ -77,16 +75,13 @@ public partial class ReaderPage : ContentPage
                 return;
             }
 
-            System.Diagnostics.Debug.WriteLine($"[Reader] Loading: {book.Title} ({book.Format})");
-            System.Diagnostics.Debug.WriteLine($"[Reader] Path: {book.FilePath}");
 
             // Читаем файл и конвертируем в Base64
             var fileBytes = await File.ReadAllBytesAsync(book.FilePath);
             var base64 = Convert.ToBase64String(fileBytes);
             var format = book.Format.ToLowerInvariant();
             var lastCfi = _viewModel.GetLastCfi() ?? "";
-
-            System.Diagnostics.Debug.WriteLine($"[Reader] File: {fileBytes.Length} bytes, Base64: {base64.Length} chars");
+            var locations=_viewModel.GetLocations() ?? "";
 
             // Отправляем данные чанками чтобы не превысить лимит JS строки
             const int chunkSize = 400_000;
@@ -94,25 +89,23 @@ public partial class ReaderPage : ContentPage
             if (base64.Length > chunkSize)
             {
                 var chunks = SplitString(base64, chunkSize);
-                System.Diagnostics.Debug.WriteLine($"[Reader] Sending {chunks.Count} chunks");
 
                 await EvalJsAsync("window._bkChunks = [];");
 
                 for (int i = 0; i < chunks.Count; i++)
                 {
                     await EvalJsAsync($"window._bkChunks.push('{chunks[i]}');");
-                    System.Diagnostics.Debug.WriteLine($"[Reader] Chunk {i + 1}/{chunks.Count}");
                 }
 
                 await EvalJsAsync(
-                    $"window.loadBookFromBase64(window._bkChunks.join(''), '{format}', '{EscapeJs(lastCfi)}');"
+                    $"window.loadBookFromBase64(window._bkChunks.join(''), '{format}', '{EscapeJs(lastCfi)}','{EscapeJs(locations)}');"
                 );
                 await EvalJsAsync("delete window._bkChunks;");
             }
             else
             {
                 await EvalJsAsync(
-                    $"window.loadBookFromBase64('{base64}', '{format}', '{EscapeJs(lastCfi)}');"
+                    $"window.loadBookFromBase64('{base64}', '{format}', '{EscapeJs(lastCfi)}','{EscapeJs(locations)}');"
                 );
             }
 
@@ -143,9 +136,6 @@ public partial class ReaderPage : ContentPage
         try
         {
             var result = await EvalJsWithResultAsync("window.getProgress()");
-
-            System.Diagnostics.Debug.WriteLine($"[Reader] Progress raw: {result}");
-
             if (string.IsNullOrEmpty(result) || result == "null" || result == "{}" || result == "undefined")
                 return;
 
@@ -183,7 +173,7 @@ public partial class ReaderPage : ContentPage
             switch (action)
             {
                 case "readerReady":
-                    System.Diagnostics.Debug.WriteLine("[Reader] JS is ready! Loading book...");
+                   
                     // Вызываем загрузку книги ТОЛЬКО после того, как JS подтвердил готовность
                     _ = MainThread.InvokeOnMainThreadAsync(LoadBookIntoWebView);
                     break;
@@ -211,6 +201,8 @@ public partial class ReaderPage : ContentPage
                         MainThread.BeginInvokeOnMainThread(() => {
                             _viewModel.ChapterCurrentPage = chapterPage;
                             _viewModel.ChapterTotalPages = chapterTotal;
+                            _viewModel.TotalPages = totalPages;
+                            _viewModel.CurrentPage = currentPage;
                         });
                         await _viewModel.SaveProgressAsync(progress, cfi, chapter, currentPage, totalPages);
                     }
@@ -233,11 +225,21 @@ public partial class ReaderPage : ContentPage
                     break;
 
                 case "bookReady":
-                    MainThread.BeginInvokeOnMainThread(async () =>
+                    if (data != null)
                     {
-                        await EvalJsAsync($"window.setFontSize({_viewModel.FontSize})");
-                        await EvalJsAsync($"window.setFontFamily('{EscapeJs(_viewModel.FontFamily)}')");
-                    });
+                        MainThread.BeginInvokeOnMainThread(async () =>
+                        {
+                            await EvalJsAsync($"window.setFontSize({_viewModel.FontSize})");
+                            await EvalJsAsync($"window.setFontFamily('{EscapeJs(_viewModel.FontFamily)}')");
+                        });
+                    }
+                    break;
+
+                case "saveLocations":
+                    // Извлекаем строку локаций из данных
+                    string locations = data["locations"]?.ToString();
+                    // Сохраняем в базу данных
+                    await _viewModel.SaveLocationsAsync(locations);
                     break;
             }
         }