| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Книга Папирус</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap'); |
| |
| :root { |
| --papyrus-bg: #f4f1e8; |
| --papyrus-text: #2c2c2c; |
| --papyrus-border: #d4c5a0; |
| --shadow-color: rgba(0, 0, 0, 0.1); |
| } |
| |
| .dark-mode { |
| --papyrus-bg: #1a1a1a; |
| --papyrus-text: #e8e6e1; |
| --papyrus-border: #404040; |
| --shadow-color: rgba(255, 255, 255, 0.05); |
| } |
| |
| body { |
| font-family: 'Crimson Text', serif; |
| background: var(--papyrus-bg); |
| color: var(--papyrus-text); |
| transition: all 0.3s ease; |
| } |
| |
| .papyrus-container { |
| background: var(--papyrus-bg); |
| background-image: |
| repeating-linear-gradient( |
| 90deg, |
| transparent, |
| transparent 2px, |
| rgba(139, 69, 19, 0.03) 2px, |
| rgba(139, 69, 19, 0.03) 4px |
| ), |
| repeating-linear-gradient( |
| 0deg, |
| transparent, |
| transparent 2px, |
| rgba(139, 69, 19, 0.03) 2px, |
| rgba(139, 69, 19, 0.03) 4px |
| ); |
| box-shadow: |
| 0 0 20px var(--shadow-color), |
| inset 0 0 50px rgba(139, 69, 19, 0.05); |
| border: 1px solid var(--papyrus-border); |
| position: relative; |
| } |
| |
| .papyrus-container::before, |
| .papyrus-container::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| width: 30px; |
| background: var(--papyrus-bg); |
| border: 1px solid var(--papyrus-border); |
| } |
| |
| .papyrus-container::before { |
| left: -31px; |
| border-right: none; |
| border-radius: 10px 0 0 10px; |
| } |
| |
| .papyrus-container::after { |
| right: -31px; |
| border-left: none; |
| border-radius: 0 10px 10px 0; |
| } |
| |
| .chapter-title { |
| font-family: 'Cinzel', serif; |
| font-weight: 600; |
| color: #8b4513; |
| text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.2); |
| } |
| |
| .dark-mode .chapter-title { |
| color: #d4a574; |
| text-shadow: 2px 2px 4px rgba(212, 165, 116, 0.3); |
| } |
| |
| .tooltip-btn { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| background: #8b4513; |
| color: white; |
| border-radius: 50%; |
| text-align: center; |
| line-height: 16px; |
| font-size: 10px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| margin-left: 4px; |
| } |
| |
| .dark-mode .tooltip-btn { |
| background: #d4a574; |
| } |
| |
| .tooltip-btn:hover { |
| transform: scale(1.2); |
| } |
| |
| .bookmark { |
| position: absolute; |
| top: -5px; |
| right: 20px; |
| width: 20px; |
| height: 40px; |
| background: #8b4513; |
| border-radius: 0 0 10px 10px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .dark-mode .bookmark { |
| background: #d4a574; |
| } |
| |
| .bookmark.active { |
| background: #dc2626; |
| } |
| |
| .side-panel { |
| transform: translateX(-100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .side-panel.open { |
| transform: translateX(0); |
| } |
| |
| .font-size-selector { |
| background: var(--papyrus-bg); |
| border: 1px solid var(--papyrus-border); |
| border-radius: 20px; |
| padding: 8px 16px; |
| font-family: 'Cinzel', serif; |
| } |
| |
| .search-highlight { |
| background: rgba(255, 215, 0, 0.3); |
| padding: 2px 4px; |
| border-radius: 3px; |
| } |
| |
| .dark-mode .search-highlight { |
| background: rgba(255, 215, 0, 0.5); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: var(--papyrus-bg); |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: var(--papyrus-border); |
| border-radius: 4px; |
| } |
| |
| @media (max-width: 768px) { |
| .papyrus-container { |
| margin: 10px; |
| padding: 20px; |
| } |
| |
| .papyrus-container::before, |
| .papyrus-container::after { |
| display: none; |
| } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <div class="flex flex-wrap items-center justify-between mb-6 gap-4"> |
| <h1 class="text-3xl md:text-4xl font-bold chapter-title">Книга Папирус</h1> |
| <div class="flex items-center gap-4"> |
| |
| <div class="relative"> |
| <input type="text" id="searchInput" placeholder="Поиск..." |
| class="px-4 py-2 rounded-full border border-amber-300 bg-white/80 dark:bg-gray-800 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| <button onclick="searchText()" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-amber-600"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| |
| |
| <select id="fontSize" class="font-size-selector" onchange="changeFontSize()"> |
| <option value="16">Маленький</option> |
| <option value="18" selected>Средний</option> |
| <option value="22">Крупный</option> |
| <option value="26">Очень крупный</option> |
| </select> |
| |
| |
| <button onclick="toggleTheme()" |
| class="p-2 rounded-full bg-amber-200 dark:bg-gray-700 text-amber-700 dark:text-amber-300"> |
| <i id="themeIcon" class="fas fa-sun"></i> |
| </button> |
| |
| |
| <button onclick="toggleSidePanel()" |
| class="p-2 rounded-full bg-amber-200 dark:bg-gray-700 text-amber-700 dark:text-amber-300"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex gap-8"> |
| |
| <div id="sidePanel" class="side-panel fixed left-0 top-0 h-full w-80 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg z-50 p-6 overflow-y-auto custom-scrollbar"> |
| <button onclick="toggleSidePanel()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| |
| <h2 class="text-xl font-bold mb-4 chapter-title">Оглавление</h2> |
| <div id="chaptersList" class="space-y-2"> |
| |
| </div> |
| |
| <h2 class="text-xl font-bold mt-8 mb-4 chapter-title">Закладки</h2> |
| <div id="bookmarksList" class="space-y-2"> |
| |
| </div> |
| </div> |
| |
| |
| <div class="flex-1"> |
| <div class="papyrus-container relative p-8 md:p-12 rounded-lg"> |
| <div class="bookmark" onclick="toggleBookmark()"></div> |
| |
| <div id="bookContent" class="prose prose-lg max-w-none"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="tooltipModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md mx-4"> |
| <h3 id="tooltipTitle" class="text-lg font-bold mb-2 chapter-title"></h3> |
| <p id="tooltipContent" class="text-sm"></p> |
| <button onclick="closeTooltip()" class="mt-4 px-4 py-2 bg-amber-600 text-white rounded">Закрыть</button> |
| </div> |
| </div> |
| |
| |
| <div id="contextMenu" class="fixed bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded shadow-lg p-2 hidden"> |
| <button onclick="copySelectedText()" class="block w-full text-left px-3 py-1 hover:bg-gray-100 dark:hover:bg-gray-700">Копировать</button> |
| <button onclick="addBookmark()" class="block w-full text-left px-3 py-1 hover:bg-gray-100 dark:hover:bg-gray-700">Добавить закладку</button> |
| </div> |
|
|
| <script> |
| |
| const bookData = { |
| chapters: [ |
| { |
| id: 1, |
| title: "Введение в древнюю мудрость", |
| content: ` |
| <h2 class="chapter-title text-2xl mb-4">Глава 1: Введение в древнюю мудрость</h2> |
| <p class="mb-4 text-lg leading-relaxed"> |
| В начале было Слово, и Слово было у Бога, и Слово было Бог. Так начинается одно из самых древних писаний человечества. |
| Но что же скрывается за этими простыми словами? |
| <span class="tooltip-btn" onclick="showTooltip('Священное писание', 'Отсылка к Евангелию от Иоанна, глава 1, стих 1')">?</span> |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Папирусы древнего Египта хранят в себе не только исторические записи, но и ключи к пониманию вечных истин. |
| Каждая буква, каждый символ несет в себе глубокий смысл, который раскрывается только тем, кто готов увидеть. |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| В этом трактате мы попытаемся проникнуть в тайны древних знаний, изучая символы и знаки, оставленные нам предками. |
| Мы увидим, как древняя мудрость переплетается с современным пониманием мира. |
| <span class="tooltip-btn" onclick="showTooltip('Герметические принципы', 'Семь принципов герметизма, изложенные в "Кибаллионе"')">?</span> |
| </p> |
| ` |
| }, |
| { |
| id: 2, |
| title: "Символы и их значение", |
| content: ` |
| <h2 class="chapter-title text-2xl mb-4">Глава 2: Символы и их значение</h2> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Анкх - египетский символ жизни - не просто изогнутая трость с петлей. |
| Это ключ к пониманию природы жизненной силы, текущей через все сущее. |
| <span class="tooltip-btn" onclick="showTooltip('Анкх', 'Древнеегипетский иероглиф, означающий "жизнь". Также известен как "кросс Аньса"')">?</span> |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Око Ра, или Уджат, представляет собой не только защитный символ, но и отражение космического порядка. |
| Левый глаз символизирует Луну, правый - Солнце. Вместе они создают баланс противоположностей. |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Скарбей - священный жук, катящий шарик навоза - был символом солнечного диска. |
| Ежедневное движение солнца через небеса ассоциировалось с катанием шарика жуком-скарабеем. |
| <span class="tooltip-btn" onclick="showTooltip('Скарбей', 'В египетской мифологии скарбей был прообразом бога Хепри, символизирующего восходящее солнце')">?</span> |
| </p> |
| ` |
| }, |
| { |
| id: 3, |
| title: "Тайны инициации", |
| content: ` |
| <h2 class="chapter-title text-2xl mb-4">Глава 3: Тайны инициации</h2> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Инициация в древнем Египте была не просто ритуалом - это был путь трансформации сознания. |
| Посвященный проходил через серию испытаний, каждое из которых соответствовало определенному аспекту духовного роста. |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Первый уровень - "Чистый язык" - символизировал очищение речи и мыслей. |
| Второй - "Смотрящий" - развивал способность видеть скрытое. |
| <span class="tooltip-btn" onclick="showTooltip('Градации посвящения', 'В египетских мистериях было несколько уровней инициации, каждый из которых давал определенные знания и способности')">?</span> |
| </p> |
| <p class="mb-4 text-lg leading-relaxed"> |
| Высший уровень - "Сын Солнца" - даровал понимание единства всех вещей и прямое знание божественной природы человека. |
| Это было не просто звание, но состояние сознания. |
| </p> |
| ` |
| } |
| ] |
| }; |
| |
| let currentChapter = 1; |
| let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || []; |
| let isDarkMode = localStorage.getItem('darkMode') === 'true'; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| loadChapter(1); |
| renderChapters(); |
| renderBookmarks(); |
| |
| if (isDarkMode) { |
| toggleTheme(); |
| } |
| |
| |
| document.addEventListener('contextmenu', handleContextMenu); |
| document.addEventListener('click', hideContextMenu); |
| |
| |
| document.addEventListener('keydown', handleKeyboard); |
| }); |
| |
| function loadChapter(chapterId) { |
| const chapter = bookData.chapters.find(c => c.id === chapterId); |
| if (chapter) { |
| currentChapter = chapterId; |
| document.getElementById('bookContent').innerHTML = chapter.content; |
| document.getElementById('bookContent').classList.add('fade-in'); |
| setTimeout(() => { |
| document.getElementById('bookContent').classList.remove('fade-in'); |
| }, 500); |
| updateBookmarkStatus(); |
| } |
| } |
| |
| function renderChapters() { |
| const chaptersList = document.getElementById('chaptersList'); |
| chaptersList.innerHTML = bookData.chapters.map(chapter => |
| `<button onclick="loadChapter(${chapter.id}); toggleSidePanel()" |
| class="w-full text-left p-2 hover:bg-amber-100 dark:hover:bg-gray-700 rounded transition-colors"> |
| ${chapter.title} |
| </button>` |
| ).join(''); |
| } |
| |
| function renderBookmarks() { |
| const bookmarksList = document.getElementById('bookmarksList'); |
| if (bookmarks.length === 0) { |
| bookmarksList.innerHTML = '<p class="text-gray-500 text-sm">Нет закладок</p>'; |
| } else { |
| bookmarksList.innerHTML = bookmarks.map(bookmark => { |
| const chapter = bookData.chapters.find(c => c.id === bookmark.chapterId); |
| return `<div class="flex justify-between items-center p-2 hover:bg-amber-100 dark:hover:bg-gray-700 rounded"> |
| <button onclick="loadChapter(${bookmark.chapterId}); toggleSidePanel()" |
| class="flex-1 text-left"> |
| ${chapter?.title || 'Глава не найдена'} |
| </button> |
| <button onclick="removeBookmark(${bookmark.id})" class="text-red-500 ml-2"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div>`; |
| }).join(''); |
| } |
| } |
| |
| function toggleBookmark() { |
| const existingBookmark = bookmarks.find(b => b.chapterId === currentChapter); |
| if (existingBookmark) { |
| bookmarks = bookmarks.filter(b => b.id !== existingBookmark.id); |
| } else { |
| bookmarks.push({ |
| id: Date.now(), |
| chapterId: currentChapter |
| }); |
| } |
| localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); |
| updateBookmarkStatus(); |
| renderBookmarks(); |
| } |
| |
| function updateBookmarkStatus() { |
| const bookmark = document.querySelector('.bookmark'); |
| const hasBookmark = bookmarks.some(b => b.chapterId === currentChapter); |
| bookmark.classList.toggle('active', hasBookmark); |
| } |
| |
| function removeBookmark(bookmarkId) { |
| bookmarks = bookmarks.filter(b => b.id !== bookmarkId); |
| localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); |
| renderBookmarks(); |
| updateBookmarkStatus(); |
| } |
| |
| function searchText() { |
| const searchTerm = document.getElementById('searchInput').value; |
| if (!searchTerm) return; |
| |
| const content = document.getElementById('bookContent'); |
| const text = content.innerHTML; |
| const regex = new RegExp(`(${searchTerm})`, 'gi'); |
| const highlighted = text.replace(regex, '<span class="search-highlight">$1</span>'); |
| content.innerHTML = highlighted; |
| } |
| |
| function changeFontSize() { |
| const size = document.getElementById('fontSize').value; |
| document.querySelector('#bookContent, #bookContent *').style.fontSize = size + 'px'; |
| } |
| |
| function toggleTheme() { |
| const html = document.documentElement; |
| const body = document.body; |
| const icon = document.getElementById('themeIcon'); |
| |
| if (body.classList.contains('dark-mode')) { |
| body.classList.remove('dark-mode'); |
| html.classList.remove('dark'); |
| icon.className = 'fas fa-sun'; |
| localStorage.setItem('darkMode', 'false'); |
| } else { |
| body.classList.add('dark-mode'); |
| html.classList.add('dark'); |
| icon.className = 'fas fa-moon'; |
| localStorage.setItem('darkMode', 'true'); |
| } |
| } |
| |
| function toggleSidePanel() { |
| const panel = document.getElementById('sidePanel'); |
| panel.classList.toggle('open'); |
| } |
| |
| function showTooltip(title, content) { |
| document.getElementById('tooltipTitle').textContent = title; |
| document.getElementById('tooltipContent').textContent = content; |
| document.getElementById('tooltipModal').classList.remove('hidden'); |
| } |
| |
| function closeTooltip() { |
| document.getElementById('tooltipModal').classList.add('hidden'); |
| } |
| |
| function handleContextMenu(e) { |
| e.preventDefault(); |
| const selection = window.getSelection().toString(); |
| if (selection) { |
| const menu = document.getElementById('contextMenu'); |
| menu.style.left = e.pageX + 'px'; |
| menu.style.top = e.pageY + 'px'; |
| menu.classList.remove('hidden'); |
| } |
| } |
| |
| function hideContextMenu() { |
| document.getElementById('contextMenu').classList.add('hidden'); |
| } |
| |
| function copySelectedText() { |
| const selection = window.getSelection().toString(); |
| navigator.clipboard.writeText(selection); |
| hideContextMenu(); |
| } |
| |
| function addBookmark() { |
| toggleBookmark(); |
| hideContextMenu(); |
| } |
| |
| function handleKeyboard(e) { |
| if (e.ctrlKey || e.metaKey) { |
| switch(e.key) { |
| case 'f': |
| e.preventDefault(); |
| document.getElementById('searchInput').focus(); |
| break; |
| case 'd': |
| e.preventDefault(); |
| toggleBookmark(); |
| break; |
| case 'b': |
| e.preventDefault(); |
| toggleSidePanel(); |
| break; |
| } |
| } |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=group0403/dsfgfgdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
