<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radar Bandung — Epaper</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  <style type="text/css">@font-face {font-family:Geist;font-style:normal;font-weight:400;src:url(/cf-fonts/v/geist/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:400;src:url(/cf-fonts/v/geist/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:400;src:url(/cf-fonts/v/geist/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:500;src:url(/cf-fonts/v/geist/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:500;src:url(/cf-fonts/v/geist/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:500;src:url(/cf-fonts/v/geist/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:600;src:url(/cf-fonts/v/geist/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:600;src:url(/cf-fonts/v/geist/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:600;src:url(/cf-fonts/v/geist/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:700;src:url(/cf-fonts/v/geist/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:700;src:url(/cf-fonts/v/geist/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Geist;font-style:normal;font-weight:700;src:url(/cf-fonts/v/geist/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}</style>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Geist', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  
  <style>
    .fade-in { animation: fadeIn 0.3s ease-out forwards; }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .spinner {
      border: 3px solid #e5e7eb;
      border-top-color: #3b82f6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans antialiased">

  <div id="landingView" class="min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-[360px]">

      <div class="mb-6 bg-amber-50 border border-amber-200 rounded-xl p-4">
        <div class="flex items-center gap-2 mb-2">
          <iconify-icon icon="lucide:alert-triangle" width="15" class="text-amber-500 flex-shrink-0"></iconify-icon>
          <span class="text-[13px] font-semibold text-amber-800">Situs Sedang Perbaikan</span>
        </div>
        <p class="text-[12px] text-amber-700 leading-relaxed">
          Kami mohon maaf, situs utama saat ini tidak dapat diakses. Anda tetap bisa membaca edisi hari ini melalui epaper di bawah ini.
        </p>
      </div>

      <div class="rounded-2xl overflow-hidden shadow-lg shadow-gray-200/80 border border-gray-200 bg-gray-100 relative">
        <div id="coverLoading" class="w-full aspect-[3/4] flex flex-col items-center justify-center gap-3 absolute inset-0 bg-gray-100 z-10">
          <div class="spinner" style="width:28px;height:28px;"></div>
          <span class="text-xs text-gray-400">Memuat cover...</span>
        </div>
        <canvas id="coverCanvas" class="w-full relative z-0"></canvas>
      </div>

      <div class="mt-5 text-center">
        <h1 class="text-gray-900 text-lg font-bold tracking-tight">Radar Bandung</h1>
        <p class="text-gray-400 text-sm mt-0.5">Edisi 06 Juni 2026</p>
      </div>

      <div class="mt-5 flex flex-col gap-2.5">
        <button id="readBtn" class="flex items-center justify-center gap-2 w-full h-12 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 active:scale-[0.98] transition-all cursor-pointer shadow-md shadow-blue-600/20">
          <iconify-icon icon="lucide:book-open" width="16"></iconify-icon>
          Baca Epaper
        </button>
        <a id="downloadBtn" href="#" download class="flex items-center justify-center gap-2 w-full h-12 rounded-xl border border-gray-200 bg-white text-gray-700 text-sm font-semibold hover:bg-gray-50 active:scale-[0.98] transition-all">
          <iconify-icon icon="lucide:download" width="16"></iconify-icon>
          Download Epaper
        </a>
      </div>

    </div>
  </div>

  <div id="pdfView" class="hidden fixed inset-0 z-50 bg-gray-900 flex flex-col">
    
    <div class="flex-shrink-0 bg-white border-b border-gray-200 z-20 flex justify-between items-center px-4 h-12">
      <span class="text-sm font-semibold text-gray-800">Epaper Radar Bandung</span>
      <button id="closePdf" class="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-red-50 text-red-600 hover:bg-red-100 transition-colors text-xs font-semibold">
        <iconify-icon icon="lucide:x" width="16"></iconify-icon>
        Tutup
      </button>
    </div>

    <div class="flex-1 relative w-full h-full">
      <iframe id="pdfIframe" class="w-full h-full border-none" allowfullscreen></iframe>
    </div>

  </div>

  <script>
    const PDF_URL = 'https://fesa.one/bk-epaper/RB-06-JUNI-26.pdf';
    
    // URL Viewer Resmi PDF.js (Demo Mozilla)
    // PENTING: Untuk produksi, Anda harus meng-host folder "web/viewer.html" di server Anda sendiri.
    const VIEWER_URL = 'https://fesa.one/pdfjs/web/viewer.html';

    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    // DOM Elements
    const readBtn = document.getElementById('readBtn');
    const downloadBtn = document.getElementById('downloadBtn');
    const pdfView = document.getElementById('pdfView');
    const closePdf = document.getElementById('closePdf');
    const pdfIframe = document.getElementById('pdfIframe');
    
    downloadBtn.href = PDF_URL;

    // ====== RENDER COVER LOGIC =======
    // Kita tetap menggunakan library inti di sini agar halaman depan terlihat estetik tanpa load iframe
    async function renderCover() {
      const coverCanvas = document.getElementById('coverCanvas');
      const coverLoading = document.getElementById('coverLoading');
      try {
        const pdf = await pdfjsLib.getDocument(PDF_URL).promise;
        const page = await pdf.getPage(1);
        const viewport = page.getViewport({ scale: 1.5 });
        const context = coverCanvas.getContext('2d');
        coverCanvas.height = viewport.height;
        coverCanvas.width = viewport.width;
        await page.render({ canvasContext: context, viewport: viewport }).promise;
        
        // Sembunyikan loading setelah selesai
        setTimeout(() => {
          coverLoading.classList.add('hidden');
        }, 300);
      } catch (error) {
        console.error('Cover error:', error);
        coverLoading.innerHTML = `<span class="text-xs text-gray-400">Cover gagal dimuat</span>`;
      }
    }
    renderCover();

    // ====== BUKA VIEWER =======
    readBtn.addEventListener('click', () => {
      pdfView.classList.remove('hidden');
      pdfView.classList.add('fade-in');
      document.body.style.overflow = 'hidden';
      
      // Inject sumber PDF ke Iframe hanya saat tombol diklik (menghemat data di awal)
      if (!pdfIframe.src) {
        // Parameter ?file= digunakan oleh PDF.js untuk memuat dokumen
        pdfIframe.src = `${VIEWER_URL}?file=${encodeURIComponent(PDF_URL)}`;
      }
    });

    // ====== TUTUP VIEWER =======
    closePdf.addEventListener('click', () => {
      pdfView.classList.add('hidden');
      document.body.style.overflow = '';
      
      // Opsional: Hapus src jika Anda ingin reset state saat ditutup
      // pdfIframe.src = '';
    });
  </script>
</body>
</html>