/* Container Flipbook Utama (Disesuaikan untuk 1 Halaman Full) */ .flipbook-wrapper { position: relative; width: 90%; max-width: 650px; /* Ukuran pas untuk 1 halaman tunggal */ height: 88vh; margin: 10px auto; background: #0f172a; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.3); font-family: sans-serif; } /* Toolbar Kontrol (Atas) */ .flipbook-toolbar { background: #1e293b; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); height: 50px; z-index: 10; box-sizing: border-box; } .flipbook-toolbar button { background: #f59e0b; color: #0f172a; border: none; padding: 6px 14px; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.2s; } .flipbook-toolbar button:hover { background: #d97706; } /* Area Buku 3D */ .flipbook-viewport { flex: 1; width: 100%; height: calc(100% - 50px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 10px; box-sizing: border-box; } /* Memaksa canvas 1 halaman pas di layar tanpa kepotong */ #book canvas { width: 100% !important; height: 100% !important; object-fit: contain; display: block; } #book > div { width: 100%; height: 100%; } /* Mode Fullscreen (Satu Halaman Penuh di Layar) */ .flipbook-wrapper:fullscreen { width: 100vw; height: 100vh; max-width: 100vw; border-radius: 0; } ◀ Prev Next ▶ Majalah Kwarran Edisi Hari Pramuka Tahun 2026 Full Screen ⛶ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; const pdfUrl = 'https://purwojati.pramukabanyumas.or.id/wp-content/uploads/2026/08/Majalah-Kwarran-Edisi-Hari-Pramuka-Tahun-2026_compressed.pdf'; let pageFlipObj = null; async function loadPdfBook() { try { const pdf = await pdfjsLib.getDocument(pdfUrl).promise; const bookEl = document.getElementById('book'); // Mengambil rasio halaman asli const firstPage = await pdf.getPage(1); const origViewport = firstPage.getViewport({ scale: 1 }); const pageWidth = origViewport.width; const pageHeight = origViewport.height; for (let i = 1; i { setTimeout(() => window.dispatchEvent(new Event('resize')), 100); }); } else { document.exitFullscreen().then(() => { setTimeout(() => window.dispatchEvent(new Event('resize')), 100); }); } } loadPdfBook();
Pramuka Purwojati Edukasi, Prestasi, Semangat Tanpa Henti!
