✏️ 编辑:8597c2ce674da31a11a0b62a537c409607b12515.php
路径:
/home/boguraj1/.trash/storage.1/framework/views/8597c2ce674da31a11a0b62a537c409607b12515.php
大小:27.4 KB · 修改:2026-07-31 19:59:13 · 权限:0644 · 可写
← 返回目录
👁 查看
⬇ 下载
<?php $__env->startSection('title', $siteName . ' — ' . $newspaper->publish_date->format('d M Y')); ?> <?php $__env->startSection('meta_description', 'Read ' . $newspaper->publish_date->format('d M Y') . ' edition of ' . $siteName); ?> <?php $__env->startPush('styles'); ?> <style> /* ════════════════════════════════════════════════════════ READER — 80% newspaper | 20% right sidebar ════════════════════════════════════════════════════════ */ .main-content { padding: 0 !important; display: flex !important; flex-direction: column !important; } .reader-shell { display: flex; flex-direction: column; flex: 1; } /* ── Two-column body ──────────────────────────────────── */ .r-body { display: flex; align-items: flex-start; } /* ── LEFT 80% — newspaper page ──────────────────────── */ .r-paper { flex: 1; min-width: 0; background: #d0c8b8; padding: 0; display: flex; flex-direction: column; } /* page panels */ .r-page-panel { display: none; width: 100%; } .r-page-panel.active { display: block; } .r-zoom-target { transform-origin: top left; transition: transform .2s ease; } .r-page-wrap { position: relative; background: #fff; box-shadow: 2px 0 12px rgba(0,0,0,.18); overflow: hidden; width: 100%; } .r-page-wrap img { display: block; width: 100%; height: auto; } .r-page-title { text-align: center; padding: 6px 0; font-family: 'Playfair Display',serif; font-size:.82rem; color:#fff; text-transform:uppercase; letter-spacing:1px; background:#2c2c2c; } /* ── RIGHT 20% — sidebar (calendar + ad) ────────────── */ .r-sidebar { width: 210px; flex-shrink: 0; background: #fff; border-left: 1px solid #ddd; padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; } /* Calendar widget */ .cal-widget { font-family:'Inter',sans-serif; } .cal-head-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:#999; border-bottom:2px solid #c0392b; padding-bottom:6px; margin-bottom:8px; display:flex; align-items:center; gap:5px; } .cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .cal-nav-btn { background:none; border:1px solid #e0e0e0; border-radius:4px; width:24px; height:24px; cursor:pointer; font-size:.75rem; display:flex; align-items:center; justify-content:center; transition:background .15s; } .cal-nav-btn:hover { background:#fdf0e0; border-color:#c0392b; color:#c0392b; } .cal-month-title { font-size:.78rem; font-weight:700; color:#1a1a2e; } .cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:4px; } .cal-weekdays span { font-size:.55rem; font-weight:700; color:#bbb; padding:2px 0; } .cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .cal-day { aspect-ratio:1; border-radius:4px; font-size:.68rem; display:flex; align-items:center; justify-content:center; cursor:default; color:#ccc; } .cal-day.has-edition { background:#fdf6ea; color:#333; cursor:pointer; font-weight:600; border:1px solid #f0e0c0; text-decoration:none; transition:background .15s; } .cal-day.has-edition:hover { background:#f5d5b0; border-color:#c0392b; color:#c0392b; } .cal-day.today { background:#c0392b !important; color:#fff !important; border-color:#c0392b !important; font-weight:700; } .cal-day.empty { cursor:default; } /* Ad slot */ .r-ad-slot { background:#f8f8f8; border:1px dashed #ddd; border-radius:6px; min-height:120px; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:.7rem; color:#bbb; text-align:center; flex-direction:column; gap:6px; padding:10px; overflow:hidden; } .r-ad-slot--filled { background:none; border:none; border-radius:0; padding:0; min-height:0; display:block; } .r-ad-slot--filled img { width:100%; height:auto; display:block; } .r-ad-slot--filled a { display:block; } /* ── Hotspot overlay ──────────────────────────────────── */ .hotspot-area { position: absolute; cursor: pointer; box-sizing: border-box; border: 2px solid transparent; background: rgba(192,57,43,0); transition: background .2s, border-color .2s; z-index: 10; } .hotspot-area:hover { background: rgba(192,57,43,.13); border-color: rgba(192,57,43,.8); } .hotspot-area::before { /* pulsing dot */ content: ''; position: absolute; top: 5px; left: 5px; width: 9px; height: 9px; border-radius: 50%; background: #c0392b; animation: hs-dot 2s infinite; } @keyframes hs-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.7); } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } } /* ════════════════════════════════════════════════════════ ARTICLE POPUP — transparent overlay canvas viewer ════════════════════════════════════════════════════════ */ .hs-overlay { display: none; position: fixed; inset: 0; z-index: 9999; flex-direction: column; background: rgba(0,0,0,.82); } .hs-overlay.open { display: flex; } /* Floating close button — top-right corner */ .hs-close-btn { position: fixed; top: 14px; right: 18px; z-index: 10000; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px; padding: 6px 14px; font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s; } .hs-close-btn:hover { background: rgba(192,57,43,.75); border-color: #c0392b; } .hs-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; background: transparent; padding-top: 50px; } .hs-loading { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #c0c0c0; font-family: 'Inter', sans-serif; font-size: .85rem; } .hs-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.15); border-top-color: #c0392b; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #hsCropCanvas { display: block; max-width: 100%; height: auto; box-shadow: 0 8px 40px rgba(0,0,0,.6); } .hs-bottombar { background: rgba(20,20,40,.88); padding: 9px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(6px); } .hs-bottombar-left { display: flex; align-items: center; gap: 8px; } .hs-zoomlabel { font-family:'Inter',sans-serif; font-size:.72rem; color:#8892b0; } .hs-zoom-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #ccc; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; transition: background .15s; } .hs-zoom-btn:hover { background: rgba(255,255,255,.2); color: #fff; } .hs-readmore-btn { background: #c0392b; color: #fff; border: none; border-radius: 5px; padding: 7px 18px; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; white-space: nowrap; } .hs-readmore-btn:hover { background: #a93226; color: #fff; } .hs-readmore-btn.hidden { display: none; } /* ── Page number strip ──────────────────────────────── */ .r-page-strip { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #f7f7f7; border-bottom: 1px solid #e5e5e5; flex-wrap: wrap; } .r-pg-num { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700; cursor: pointer; color: #374151; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s; } .r-pg-num:hover { background: #f0f0f0; border-color: #aaa; } .r-pg-num.active { background: #c0392b; color: #fff; border-color: #c0392b; } .r-pg-arrow { height: 30px; padding: 0 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; font-size: .8rem; font-family: 'Inter', sans-serif; cursor: pointer; color: #374151; display: flex; align-items: center; gap: 4px; transition: background .15s; } .r-pg-arrow:hover { background: #f0f0f0; } .r-pg-arrow:disabled { opacity: .35; cursor: default; } /* ── mobile responsive ────────────────────────────────── */ @media (max-width: 768px) { .r-sidebar { display: none; } .r-paper { padding: 10px 8px; } } </style> <?php $__env->stopPush(); ?> <?php $__env->startSection('content'); ?> <div class="reader-shell"> <div class="r-body"> <div class="r-paper" id="rPaper"> <?php if($newspaper->pages->count() > 1): ?> <div class="r-page-strip"> <button id="btnPrevPage" type="button" class="r-pg-arrow" disabled> <i class="bi bi-chevron-left"></i> পূর্ববর্তী </button> <?php $__currentLoopData = $newspaper->pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <button type="button" class="r-pg-num page-nav-link <?php echo e($loop->first ? 'active' : ''); ?>" data-page="<?php echo e($page->page_number); ?>"> <?php echo e($page->page_number); ?> </button> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> <button id="btnNextPage" type="button" class="r-pg-arrow"> পরবর্তী <i class="bi bi-chevron-right"></i> </button> </div> <?php else: ?> <button id="btnPrevPage" type="button" style="display:none" disabled></button> <button id="btnNextPage" type="button" style="display:none" disabled></button> <?php endif; ?> <?php $__currentLoopData = $newspaper->pages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <div class="r-page-panel <?php echo e($loop->first ? 'active' : ''); ?>" id="panel-<?php echo e($page->page_number); ?>"> <?php if($page->title): ?> <div class="r-page-title"> Page <?php echo e($page->page_number); ?>: <?php echo e($page->title); ?> </div> <?php endif; ?> <div class="r-zoom-target" id="zt-<?php echo e($page->page_number); ?>"> <div class="r-page-wrap"> <img src="<?php echo e($page->image_url); ?>" alt="Page <?php echo e($page->page_number); ?>" id="img-<?php echo e($page->page_number); ?>"> <?php $__currentLoopData = $page->hotspots; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $hotspot): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <div class="hotspot-area" role="button" tabindex="0" data-title="<?php echo e($hotspot->title); ?>" data-image="<?php echo e($page->image_url); ?>" data-x="<?php echo e($hotspot->x_percent); ?>" data-y="<?php echo e($hotspot->y_percent); ?>" data-w="<?php echo e($hotspot->width_percent); ?>" data-h="<?php echo e($hotspot->height_percent); ?>" data-link-type="<?php echo e($hotspot->link_type); ?>" data-link-val="<?php echo e($hotspot->link_value); ?>" aria-label="<?php echo e($hotspot->title ?: 'View article'); ?>" style="left:<?php echo e($hotspot->x_percent); ?>%;top:<?php echo e($hotspot->y_percent); ?>%; width:<?php echo e($hotspot->width_percent); ?>%;height:<?php echo e($hotspot->height_percent); ?>%"> </div> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </div> </div> </div> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </div> <div class="r-sidebar" id="rSidebar"> <div class="cal-widget"> <div class="cal-head-label"> <i class="bi bi-calendar3"></i> আর্কাইভ </div> <div class="cal-nav"> <button class="cal-nav-btn" id="calPrev" title="আগের মাস">‹</button> <span class="cal-month-title" id="calTitle"></span> <button class="cal-nav-btn" id="calNext" title="পরের মাস">›</button> </div> <div class="cal-weekdays"> <span>র</span><span>সো</span><span>ম</span> <span>বু</span><span>বৃ</span><span>শু</span><span>শ</span> </div> <div class="cal-days" id="calDays"></div> </div> <?php $ad1 = \App\Models\Setting::get('sidebar_ad_1'); $ad2 = \App\Models\Setting::get('sidebar_ad_2'); ?> <?php if($ad1): ?> <div class="r-ad-slot r-ad-slot--filled"><?php echo $ad1; ?></div> <?php else: ?> <div class="r-ad-slot"> <i class="bi bi-image" style="font-size:1.6rem;opacity:.3"></i> <span>বিজ্ঞাপন ১</span> </div> <?php endif; ?> <?php if($ad2): ?> <div class="r-ad-slot r-ad-slot--filled"><?php echo $ad2; ?></div> <?php else: ?> <div class="r-ad-slot"> <i class="bi bi-image" style="font-size:1.6rem;opacity:.3"></i> <span>বিজ্ঞাপন ২</span> </div> <?php endif; ?> </div> </div> </div> <div class="hs-overlay" id="hsOverlay" role="dialog" aria-modal="true"> <button class="hs-close-btn" id="hsClose"> <i class="bi bi-x-lg"></i> Close </button> <div class="hs-body" id="hsBody"> <div class="hs-loading" id="hsLoading"> <div class="hs-spinner"></div> <span>Loading article…</span> </div> <canvas id="hsCropCanvas" style="display:none"></canvas> </div> <div class="hs-bottombar"> <div class="hs-bottombar-left"> <span class="hs-zoomlabel" id="hsZoomPct">100%</span> <button class="hs-zoom-btn" id="hsZoomIn" title="Zoom in"><i class="bi bi-plus"></i></button> <button class="hs-zoom-btn" id="hsZoomOut" title="Zoom out"><i class="bi bi-dash"></i></button> <button class="hs-zoom-btn" id="hsZoomFit" title="Fit"><i class="bi bi-aspect-ratio"></i></button> </div> <a href="#" id="hsReadMore" class="hs-readmore-btn hidden" target="_blank" rel="noopener noreferrer"> <i class="bi bi-box-arrow-up-right"></i> Read More </a> </div> </div> <?php $__env->stopSection(); ?> <?php $__env->startPush('scripts'); ?> <script> (function () { 'use strict'; /* ══════════════════════════════════════════════════ 0. CALENDAR ARCHIVE WIDGET ══════════════════════════════════════════════════ */ (function () { var availableDates = <?php echo json_encode($allDates, 15, 512) ?>; var dateSet = {}; availableDates.forEach(function(d) { dateSet[d] = true; }); var currentDate = '<?php echo e($newspaper->publish_date->format("Y-m-d")); ?>'; var parts = currentDate.split('-'); var calYear = parseInt(parts[0]); var calMonth = parseInt(parts[1]); // 1-based var monthsBn = ['জানুয়ারি','ফেব্রুয়ারি','মার্চ','এপ্রিল','মে','জুন', 'জুলাই','আগস্ট','সেপ্টেম্বর','অক্টোবর','নভেম্বর','ডিসেম্বর']; function pad(n) { return n < 10 ? '0' + n : '' + n; } function renderCalendar() { document.getElementById('calTitle').textContent = monthsBn[calMonth - 1] + ' ' + calYear; var grid = document.getElementById('calDays'); grid.innerHTML = ''; var firstDay = new Date(calYear, calMonth - 1, 1).getDay(); // 0=Sun var daysInMonth = new Date(calYear, calMonth, 0).getDate(); var today = new Date().toISOString().slice(0, 10); // blank cells for days before month start for (var i = 0; i < firstDay; i++) { var blank = document.createElement('span'); blank.className = 'cal-day empty'; grid.appendChild(blank); } for (var d = 1; d <= daysInMonth; d++) { var dateStr = calYear + '-' + pad(calMonth) + '-' + pad(d); var el; if (dateSet[dateStr]) { el = document.createElement('a'); el.href = '<?php echo e(url("/newspaper")); ?>/' + dateStr; el.className = 'cal-day has-edition' + (dateStr === currentDate ? ' today' : ''); el.title = dateStr; } else { el = document.createElement('span'); el.className = 'cal-day' + (dateStr === today ? ' today' : ''); } el.textContent = d; grid.appendChild(el); } } document.getElementById('calPrev').addEventListener('click', function () { calMonth--; if (calMonth < 1) { calMonth = 12; calYear--; } renderCalendar(); }); document.getElementById('calNext').addEventListener('click', function () { calMonth++; if (calMonth > 12) { calMonth = 1; calYear++; } renderCalendar(); }); renderCalendar(); })(); /* ══════════════════════════════════════════════════ 1. PAGE SWITCHING ══════════════════════════════════════════════════ */ var currentPage = 1; function switchPage(num) { /* hide old panel */ var old = document.querySelector('.r-page-panel.active'); if (old) old.classList.remove('active'); /* show new panel */ var panel = document.getElementById('panel-' + num); if (!panel) return; panel.classList.add('active'); currentPage = num; /* scroll viewer back to top */ document.getElementById('rPaper').scrollTop = 0; } /* ══════════════════════════════════════════════════ 2. ARTICLE CANVAS POPUP ══════════════════════════════════════════════════ */ var overlay = document.getElementById('hsOverlay'); var hsBody = document.getElementById('hsBody'); var canvas = document.getElementById('hsCropCanvas'); var ctx = canvas.getContext('2d'); var loading = document.getElementById('hsLoading'); var readMore = document.getElementById('hsReadMore'); var zoomPct = document.getElementById('hsZoomPct'); var imgCache = {}; var current = null; var artZoom = 0.75; function renderCanvas(img, x, y, w, h, zoom) { var dpr = window.devicePixelRatio || 1; var srcX = img.naturalWidth * x / 100; var srcY = img.naturalHeight * y / 100; var srcW = img.naturalWidth * w / 100; var srcH = img.naturalHeight * h / 100; /* CSS display size */ var cssW = Math.round(window.innerWidth * zoom); var cssH = Math.round(srcH / srcW * cssW); /* Physical pixel budget — draw at full device resolution */ var physW = Math.round(cssW * dpr); var physH = Math.round(cssH * dpr); canvas.width = physW; canvas.height = physH; canvas.style.width = cssW + 'px'; canvas.style.height = cssH + 'px'; ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, physW, physH); canvas.style.display = 'block'; loading.style.display = 'none'; hsBody.scrollTop = 0; zoomPct.textContent = Math.round(zoom * 100) + '%'; } function openPopup(hs) { var title = hs.dataset.title || ''; var imageUrl = hs.dataset.image; var x = parseFloat(hs.dataset.x); var y = parseFloat(hs.dataset.y); var w = parseFloat(hs.dataset.w); var h = parseFloat(hs.dataset.h); var linkType = hs.dataset.linkType || ''; var linkVal = hs.dataset.linkVal || ''; artZoom = 0.75; current = { imageUrl: imageUrl, x: x, y: y, w: w, h: h }; canvas.style.display = 'none'; loading.style.display = 'flex'; overlay.classList.add('open'); document.body.style.overflow = 'hidden'; /* Read More */ var href = ''; if (linkType === 'url' && linkVal) href = linkVal; if (linkType === 'page' && linkVal) href = '#panel-' + linkVal; if (linkType === 'anchor' && linkVal) href = '#' + linkVal; if (href) { readMore.href = href; readMore.classList.remove('hidden'); if (linkType === 'url') { readMore.setAttribute('target', '_blank'); readMore.onclick = null; } else { readMore.removeAttribute('target'); readMore.onclick = function (e) { e.preventDefault(); closePopup(); if (linkType === 'page') switchPage(parseInt(linkVal, 10)); }; } } else { readMore.classList.add('hidden'); } /* draw */ if (imgCache[imageUrl]) { renderCanvas(imgCache[imageUrl], x, y, w, h, artZoom); } else { var tmp = new Image(); tmp.onload = function () { imgCache[imageUrl] = tmp; if (overlay.classList.contains('open')) { renderCanvas(tmp, x, y, w, h, artZoom); } }; tmp.src = imageUrl; } } function closePopup() { overlay.classList.remove('open'); document.body.style.overflow = ''; current = null; } function reZoom(z) { artZoom = Math.min(4, Math.max(0.5, z)); if (current && imgCache[current.imageUrl]) { renderCanvas(imgCache[current.imageUrl], current.x, current.y, current.w, current.h, artZoom); } } document.getElementById('hsZoomIn').onclick = function () { reZoom(artZoom + 0.25); }; document.getElementById('hsZoomOut').onclick = function () { reZoom(artZoom - 0.25); }; document.getElementById('hsZoomFit').onclick = function () { reZoom(1); }; document.getElementById('hsClose').addEventListener('click', closePopup); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePopup(); }); /* pinch zoom on mobile */ var pinch0 = null; hsBody.addEventListener('touchstart', function (e) { if (e.touches.length === 2) pinch0 = Math.hypot(e.touches[1].clientX - e.touches[0].clientX, e.touches[1].clientY - e.touches[0].clientY); }, { passive: true }); hsBody.addEventListener('touchmove', function (e) { if (e.touches.length !== 2 || !pinch0) return; var d = Math.hypot(e.touches[1].clientX - e.touches[0].clientX, e.touches[1].clientY - e.touches[0].clientY); reZoom(artZoom * (d / pinch0)); pinch0 = d; }, { passive: true }); /* wire hotspots */ document.querySelectorAll('.hotspot-area').forEach(function (hs) { hs.addEventListener('click', function (e) { e.stopPropagation(); openPopup(this); }); hs.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPopup(this); } }); }); /* ══════════════════════════════════════════════════ 4. NAVBAR PAGE LINKS ══════════════════════════════════════════════════ */ var btnPrevPage = document.getElementById('btnPrevPage'); var btnNextPage = document.getElementById('btnNextPage'); var totalPages = <?php echo e($newspaper->pages->count()); ?>; function updatePageNavBtns() { if (btnPrevPage) btnPrevPage.disabled = (currentPage <= 1); if (btnNextPage) btnNextPage.disabled = (currentPage >= totalPages); } if (btnPrevPage) { btnPrevPage.addEventListener('click', function () { if (currentPage > 1) switchPage(currentPage - 1); }); } if (btnNextPage) { btnNextPage.addEventListener('click', function () { if (currentPage < totalPages) switchPage(currentPage + 1); }); } document.querySelectorAll('.page-nav-link').forEach(function (a) { a.addEventListener('click', function (e) { e.preventDefault(); switchPage(parseInt(this.dataset.page, 10)); }); }); /* keep navbar active state + prev/next buttons in sync with switchPage */ var _origSwitch = switchPage; switchPage = function (num) { _origSwitch(num); document.querySelectorAll('.page-nav-link').forEach(function (a) { a.classList.toggle('active', parseInt(a.dataset.page, 10) === num); }); updatePageNavBtns(); }; updatePageNavBtns(); })(); </script> <?php $__env->stopPush(); ?> <?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/boguraj1/public_html/epaper/resources/views/frontend/reader.blade.php ENDPATH**/ ?>
💾 保存
取消
保存为 UTF-8,换行统一为 LF