|
|
|
@@ -501,40 +501,25 @@ function FlipBook({ pages, onClose }: { pages: string[]; onClose: () => void }) |
|
|
|
<div |
|
|
|
className="relative shadow-2xl" |
|
|
|
style={{ |
|
|
|
width: 'min(95vw, 1400px)', |
|
|
|
height: 'min(85vh, 900px)', |
|
|
|
// Two A4 pages side-by-side: aspect ratio ≈ 1.41:1 (2 × 0.707). |
|
|
|
// Cap by 95vw and 90vh so the book never overflows. |
|
|
|
width: 'min(95vw, calc(90vh * 1.41))', |
|
|
|
aspectRatio: '1.41 / 1', |
|
|
|
maxHeight: '90vh', |
|
|
|
transformStyle: 'preserve-3d', |
|
|
|
}} |
|
|
|
> |
|
|
|
{/* Static left page */} |
|
|
|
{visibleLeft ? ( |
|
|
|
{visibleLeft && ( |
|
|
|
<div className="absolute left-0 top-0 w-1/2 h-full bg-white overflow-hidden flex items-center justify-center"> |
|
|
|
<img src={visibleLeft} className={pageImgClass} alt="" draggable={false} /> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div |
|
|
|
className="absolute left-0 top-0 w-1/2 h-full overflow-hidden" |
|
|
|
style={{ |
|
|
|
background: 'linear-gradient(135deg, #4a3826 0%, #2e2114 55%, #1a1108 100%)', |
|
|
|
boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55)', |
|
|
|
}} |
|
|
|
aria-hidden |
|
|
|
/> |
|
|
|
)} |
|
|
|
{/* Static right page */} |
|
|
|
{visibleRight ? ( |
|
|
|
{visibleRight && ( |
|
|
|
<div className="absolute right-0 top-0 w-1/2 h-full bg-white overflow-hidden flex items-center justify-center"> |
|
|
|
<img src={visibleRight} className={pageImgClass} alt="" draggable={false} /> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div |
|
|
|
className="absolute right-0 top-0 w-1/2 h-full overflow-hidden" |
|
|
|
style={{ |
|
|
|
background: 'linear-gradient(225deg, #4a3826 0%, #2e2114 55%, #1a1108 100%)', |
|
|
|
boxShadow: 'inset 0 0 80px rgba(0,0,0,0.55)', |
|
|
|
}} |
|
|
|
aria-hidden |
|
|
|
/> |
|
|
|
)} |
|
|
|
|
|
|
|
{/* Flipping overlay — forward (right page rotates left) */} |
|
|
|
|
