June 2026

* { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #f0f2f5; padding: 20px; } #openModalBtn { display: block; margin: 0 auto; position: relative; width: 320px; height: 450px; padding: 0; border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,0.3); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #ffffff; transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; font-size: 0; } #openModalBtn:hover { transform: scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } #openModalBtn .loading-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #aaa; font-size: 18px; background: #e9eef3; border-radius: 16px; font-family: Arial, sans-serif; } .loading-text { text-align: center; font-family: Arial, sans-serif; font-size: 16px; color: #666; margin-top: 25px; margin-bottom: 25px; line-height: 1.6; } .loading-text a { color: #2d7bff; text-decoration: none; font-weight: 600; } .loading-text a:hover { text-decoration: underline; } .modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background: #ffffff; margin: 2% auto; padding: 10px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); position: relative; height: 95vh; width: auto; max-width: 90vw; min-width: 320px; display: flex; flex-direction: column; transition: width 0.3s ease; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-shrink: 0; } .modal-header h2 { font-size: 24px; color: #1e293b; font-family: Arial, sans-serif; } .close-btn { font-size: 32px; font-weight: 300; color: #94a3b8; cursor: pointer; transition: color 0.2s; line-height: 1; } .close-btn:hover { color: #ef4444; } #flipbook-wrapper { position: relative; overflow: hidden; flex: 1; min-height: 500px; background: #e9eef3; border-radius: 12px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.06); } #page-container { position: relative; width: 100%; height: 100%; } .page-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.92); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); border-radius: 4px; background: white; opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease; will-change: transform, opacity; } .page-canvas.active { opacity: 1; pointer-events: auto; z-index: 10; } .page-canvas.exit-left { transform: translate(calc(-50% - 80px), -50%) scale(0.92); opacity: 0; } .page-canvas.exit-right { transform: translate(calc(-50% + 80px), -50%) scale(0.92); opacity: 0; } #navigation { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 20px; flex-shrink: 0; padding: 8px 0; } #navigation button { padding: 10px 24px; font-size: 16px; font-weight: 600; background: #f1f5f9; color: #1e293b; border: 1px solid #d1d9e6; border-radius: 30px; cursor: pointer; transition: all 0.2s; min-width: 100px; font-family: Arial, sans-serif; } #navigation button:hover:not(:disabled) { background: #2d7bff; color: white; border-color: #2d7bff; box-shadow: 0 4px 12px rgba(45, 123, 255, 0.3); } #navigation button:disabled { opacity: 0.4; cursor: not-allowed; background: #e2e8f0; border-color: #cbd5e1; color: #94a3b8; } #pageInfo { font-size: 18px; font-weight: 500; color: #1e293b; min-width: 140px; text-align: center; font-family: Arial, sans-serif; } @media (max-width: 700px) { .modal-content { padding: 15px; margin: 2% auto; width: 98% !important; max-width: 98%; } .modal-header h2 { font-size: 20px; } #flipbook-wrapper { min-height: 350px; } #navigation button { padding: 8px 16px; font-size: 14px; min-width: 70px; } #pageInfo { font-size: 16px; min-width: 100px; } #openModalBtn { width: 200px; height: 280px; } } @media (max-width: 500px) { #flipbook-wrapper { min-height: 250px; } #navigation { gap: 12px; flex-wrap: wrap; } #openModalBtn { width: 160px; height: 220px; } } Загрузка PDF… Пожалуйста, дождитесь загрузки PDF-файла или откройте его по ссылке: многостраничный буклет Просмотр документа ×   ◀ Назад Разворот 2‑3 Вперед ▶ (function() { const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; const modal = document.getElementById('pdfModal'); const openBtn = document.getElementById('openModalBtn'); const closeBtn = document.querySelector('.close-btn'); const pageContainer = document.getElementById('page-container'); const prevBtn = document.getElementById('prevPage'); const nextBtn = document.getElementById('nextPage'); const pageInfo = document.getElementById('pageInfo'); let pdfDoc = null; let totalPages = 0; let currentSpreadStart = 2; let pagesRendered = false; const GAP = 10; const dpr = window.devicePixelRatio || 1; async function renderPageFullSize(page, canvas) { const viewport = page.getViewport({ scale: 1 }); canvas.width = viewport.width * dpr; canvas.height = viewport.height * dpr; canvas.style.width = viewport.width + 'px'; canvas.style.height = viewport.height + 'px'; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); await page.render({ canvasContext: ctx, viewport: viewport }).promise; return { width: viewport.width, height: viewport.height }; } async function loadPDF(url) { try { pdfDoc = await pdfjsLib.getDocument(url).promise; totalPages = pdfDoc.numPages; if (totalPages < 2) { pageContainer.innerHTML = 'PDF содержит менее 2 страниц, развороты не доступны.'; return; } const firstPage = await pdfDoc.getPage(1); const canvas1 = document.createElement('canvas'); await renderPageFullSize(firstPage, canvas1); openBtn.style.backgroundImage = `url(${canvas1.toDataURL('image/png')})`; const placeholder = openBtn.querySelector('.loading-placeholder'); if (placeholder) placeholder.style.display = 'none'; } catch (error) { console.error('Ошибка загрузки PDF:', error); const placeholder = openBtn.querySelector('.loading-placeholder'); if (placeholder) placeholder.textContent = '❌ Ошибка'; pageContainer.innerHTML = 'Не удалось загрузить PDF'; } } async function renderPages() { if (!pdfDoc) return; if (pagesRendered) return; pageContainer.innerHTML = ''; const wrapper = document.getElementById('flipbook-wrapper'); const containerWidth = wrapper.clientWidth - 40; const containerHeight = wrapper.clientHeight - 40; if (containerWidth totalPages) return; if (startPage === currentSpreadStart) return; const cssScale = window._cssScale || 1; const direction = startPage > currentSpreadStart ? 'right' : 'left'; const currentActive = document.querySelectorAll('.page-canvas.active'); currentActive.forEach(el => { el.classList.remove('active'); el.classList.add(direction === 'right' ? 'exit-left' : 'exit-right'); el.style.transform = `translate(calc(-50% ${direction === 'right' ? '- 80px' : '+ 80px'}), -50%) scale(${cssScale * 0.92})`; el.style.opacity = '0'; }); const page1 = document.querySelector(`.page-canvas[data-page="${startPage}"]`); const page2 = document.querySelector(`.page-canvas[data-page="${startPage + 1}"]`); if (page1) { const w = parseFloat(page1.dataset.width); const shift = (w * cssScale) / 2 + GAP / 2; page1.classList.add('active'); page1.style.transform = `translate(calc(-50% - ${shift}px), -50%) scale(${cssScale})`; page1.style.opacity = '1'; } if (page2) { const w = parseFloat(page2.dataset.width); const shift = (w * cssScale) / 2 + GAP / 2; page2.classList.add('active'); page2.style.transform = `translate(calc(-50% + ${shift}px), -50%) scale(${cssScale})`; page2.style.opacity = '1'; } const endPage = Math.min(startPage + 1, totalPages); pageInfo.textContent = `Страницы ${startPage}–${endPage}`; currentSpreadStart = startPage; updateButtons(); setTimeout(() => { currentActive.forEach(el => { el.classList.remove('exit-left', 'exit-right'); el.style.transform = `translate(-50%, -50%) scale(${cssScale * 0.92})`; el.style.opacity = '0'; }); }, 450); } function updateButtons() { prevBtn.disabled = currentSpreadStart = totalPages; } openBtn.addEventListener('click', () => { modal.style.display = 'block'; if (pdfDoc && !pagesRendered) { renderPages(); } else if (pdfDoc && pagesRendered) { showSpread(2); } else { loadPDF('https://www.susu.ru/sites/default/files/files/buklet_postranichno_pravki_06_06_itog.pdf'); } }); closeBtn.addEventListener('click', () => { modal.style.display = 'none'; }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; } }); document.addEventListener('keydown', (e) => { if (modal.style.display === 'block' && e.key === 'Escape') { modal.style.display = 'none'; } }); prevBtn.addEventListener('click', () => { goToSpread(currentSpreadStart - 2); }); nextBtn.addEventListener('click', () => { goToSpread(currentSpreadStart + 2); }); document.addEventListener('keydown', (e) => { if (modal.style.display === 'block') { if (e.key === 'ArrowLeft') { e.preventDefault(); goToSpread(currentSpreadStart - 2); } if (e.key === 'ArrowRight') { e.preventDefault(); goToSpread(currentSpreadStart + 2); } } }); loadPDF('https://www.susu.ru/sites/default/files/files/buklet_postranichno_pravki_06_06_itog.pdf'); })();