Catalogue: render page images directly on page, no iframe/redirect. Flipbook opens in popup window.

index.html

@@ -378,12 +378,12 @@ textarea.form-input{height:120px;resize:vertical}
 <div class="page-section" id="page-catalogue">
 <div class="section-header" style="text-align:center;margin-bottom:10px">
 <h2 style="font-size:1.8rem;font-weight:800;color:var(--d)"><i class="fas fa-book-open" style="color:var(--a);margin-right:10px"></i>Catalogue <span style="color:var(--a)">Malloca</span></h2>
-<p style="color:var(--g);font-size:.9rem;max-width:500px;margin:10px auto 0">Xem catalogue sản phẩm trực tuyến — lật trang trực tiếp trên trang này</p>
+<p style="color:var(--g);font-size:.9rem;max-width:550px;margin:10px auto 0">Chọn catalogue để xem trực tiếp — mỗi cuốn là flipbook lật trang tương tác đầy đủ</p>
 </div>
-<!-- Catalogue tab selector -->
+<!-- Tab selector -->
 <div id="catTabs" style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px"></div>
-<!-- Catalogue viewer renders here -->
-<div id="catEmbed" style="width:100%;height:85vh;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.08)"></div>
+<!-- Catalogue content renders here -->
+<div id="catContent"></div>
 </div>
 
 <!-- CONTACT PAGE -->
@@ -646,21 +646,20 @@ function updActive(sel,attr,val){document.querySelectorAll(sel).forEach(e=>e.cla
 function closeMsb(){document.getElementById('msb').classList.remove('open')}
 document.addEventListener('keydown',e=>{if(e.key==='Escape')goBack();if(e.key==='/'&&document.activeElement.tagName!=='INPUT'){e.preventDefault();document.getElementById('q').focus()}});
 
-// ===== CATALOGUE (direct render, no redirect) =====
+// ===== CATALOGUE (render directly as images, no iframe/redirect) =====
 const CAT_LIST=[
-{name:'Bếp',slug:'catalogue-bep',pages:64},
-{name:'Máy Hút',slug:'catalogue-may-hut',pages:66},
-{name:'Lò Nướng',slug:'catalogue-lo',pages:44},
-{name:'Chậu & Vòi',slug:'catalogue-chau-voi-royol6p8w4z4',pages:76},
-{name:'SP Khác',slug:'catalogue-san-pham-khac',pages:54},
-{name:'Bảng Giá',slug:'catalogue-bang-gia',pages:68},
-{name:'Master',slug:'malloca_catalog_master',pages:174},
+{name:'Bếp',slug:'catalogue-bep',pages:64,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_1_1.jpg?1777012815229',desc:'Bếp từ, bếp gas, bếp kết hợp',imgs:['https://view.publitas.com/100898/2439255/pages/48020e95-9aeb-4442-bd20-8fd1a4bd20f7-at1600.jpg','https://view.publitas.com/100898/2439255/pages/19700c99-706e-4cc8-9c8b-6c7124eb862e-at1600.jpg','https://view.publitas.com/100898/2439255/pages/c6f61a3d-105c-475a-9823-ede668a53614-at1600.jpg']},
+{name:'Máy Hút',slug:'catalogue-may-hut',pages:66,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_1_3.jpg?1777012815229',desc:'Máy hút khói khử mùi',imgs:['https://view.publitas.com/100898/2439259/pages/45640d49-55b9-4151-b8fd-26d33f4ef48b-at1600.jpg','https://view.publitas.com/100898/2439259/pages/e7f5b309-7003-42e4-ad25-c2b7a97e20e2-at1600.jpg','https://view.publitas.com/100898/2439259/pages/6b5e46c9-3596-42b3-929c-e36a75dd6f01-at1600.jpg']},
+{name:'Lò Nướng',slug:'catalogue-lo',pages:44,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_1.jpg?1777012815229',desc:'Lò nướng, lò hấp, lò vi sóng',imgs:['https://view.publitas.com/100898/2439257/pages/2625baa6-7b03-473c-afde-d23b03f7f9b7-at1600.jpg','https://view.publitas.com/100898/2439257/pages/3e3b65a8-aab6-44e4-9cff-6f6df51dab1e-at1600.jpg','https://view.publitas.com/100898/2439257/pages/edbb6c3a-3dab-44b6-b3e4-5e6b5130f14f-at1600.jpg']},
+{name:'Chậu & Vòi',slug:'catalogue-chau-voi-royol6p8w4z4',pages:76,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_2.jpg?1777012815229',desc:'Chậu rửa chén, vòi rửa',imgs:['https://view.publitas.com/100898/2439256/pages/85441d92-508a-41b2-b0f8-77ebd57daad9-at1600.jpg','https://view.publitas.com/100898/2439256/pages/fedc8601-f4e1-4b66-84e9-f5bca0b54d40-at1600.jpg','https://view.publitas.com/100898/2439256/pages/82e1c6b1-4b79-450d-a2e4-b1cdf7f6ab3e-at1600.jpg']},
+{name:'SP Khác',slug:'catalogue-san-pham-khac',pages:54,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_2_3.jpg?1777012815229',desc:'Tủ lạnh, máy rửa chén...',imgs:['https://view.publitas.com/100898/2439253/pages/bfa2fcd0-407b-4ed6-aafe-642a0aaa2a19-at1600.jpg','https://view.publitas.com/100898/2439253/pages/bcb83b8e-2ab9-4f5a-bc47-0e38cbc13fb7-at1600.jpg','https://view.publitas.com/100898/2439253/pages/5e9e2c37-c53e-4c1b-932b-b1e4e6e68b5c-at1600.jpg']},
+{name:'Bảng Giá',slug:'catalogue-bang-gia',pages:68,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_3_1.jpg?1777012815229',desc:'Bảng giá sản phẩm',imgs:['https://view.publitas.com/100898/2389531/pages/9fbbdd34-a22b-42a1-94e2-106768db3d36-at1600.jpg','https://view.publitas.com/100898/2389531/pages/93f8e3bd-5ad9-4e19-998b-d2b1e7f7dfbb-at1600.jpg','https://view.publitas.com/100898/2389531/pages/b82a389f-fa40-4e74-9a6e-9be11215120c-at1600.jpg']},
+{name:'Master',slug:'malloca_catalog_master',pages:174,thumb:'https://bizweb.dktcdn.net/100/567/847/themes/1041000/assets/page_catalogue_3_3.jpg?1777012815229',desc:'Tổng hợp toàn bộ',imgs:['https://view.publitas.com/100898/2439250/pages/5ab1158f-5865-4710-b37c-9c74d884db27-at1600.jpg','https://view.publitas.com/100898/2439250/pages/a3ded2ba-c53f-489f-a640-4e19f09e8aff-at1600.jpg','https://view.publitas.com/100898/2439250/pages/fe58b2e1-30e6-4de8-9ac5-b27f5e6f18a3-at1600.jpg']},
 ];
 let catLoaded=false;
 let activeCat=0;
 
 function loadCatalogue(idx){
-if(idx===undefined)idx=0;
 activeCat=idx;
 document.querySelectorAll('.ctab').forEach((t,i)=>{
   t.style.background=i===idx?'var(--p)':'#fff';
@@ -668,10 +667,45 @@ document.querySelectorAll('.ctab').forEach((t,i)=>{
   t.style.borderColor=i===idx?'var(--p)':'var(--gl)';
 });
 let c=CAT_LIST[idx];
+let container=document.getElementById('catContent');
+// Render preview images directly on page + full viewer button
+container.innerHTML=`
+<div style="background:#fff;border-radius:20px;padding:28px;box-shadow:0 2px 16px rgba(0,0,0,.06)">
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px">
+<div>
+<h3 style="font-size:1.3rem;font-weight:800;color:var(--d)"><i class="fas fa-book-open" style="color:var(--a);margin-right:8px"></i>Catalogue ${c.name}</h3>
+<p style="color:var(--g);font-size:.82rem;margin-top:4px">${c.desc} — ${c.pages} trang</p>
+</div>
+<button onclick="openFullCatalogue(${idx})" style="padding:12px 24px;background:var(--p);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;transition:all .2s"><i class="fas fa-book-reader"></i> Xem flipbook đầy đủ ${c.pages} trang</button>
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px">
+${c.imgs.map((img,i)=>`<div style="border-radius:12px;overflow:hidden;border:2px solid var(--gl);cursor:pointer;transition:all .2s" onmouseover="this.style.borderColor='var(--p)';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--gl)';this.style.transform=''" onclick="openCatImage('${img.replace(/'/g,"\\'")}',${idx})"><img src="${img}" alt="Trang ${i+1}" loading="lazy" style="width:100%;display:block"></div>`).join('')}
+</div>
+<div style="text-align:center;margin-top:24px;padding:20px;background:var(--l);border-radius:14px">
+<p style="color:var(--g);font-size:.88rem;margin-bottom:14px"><i class="fas fa-info-circle" style="margin-right:6px"></i>Đây là preview ${c.imgs.length} trang đầu. Nhấn nút bên dưới để xem đầy đủ ${c.pages} trang với flipbook lật trang tương tác.</p>
+<button onclick="openFullCatalogue(${idx})" style="padding:14px 32px;background:var(--a);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:10px;transition:all .2s"><i class="fas fa-expand"></i> Mở Flipbook Đầy Đủ ${c.pages} Trang</button>
+</div>
+</div>`;
+}
+
+function openFullCatalogue(idx){
+let c=CAT_LIST[idx];
 let url='https://view.publitas.com/malloca/'+c.slug;
-let container=document.getElementById('catEmbed');
-// Create iframe with sandbox to block top-navigation but allow scripts
-container.innerHTML=`<iframe src="${url}" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" style="width:100%;height:100%;border:none;border-radius:16px" allowfullscreen></iframe>`;
+// Open in a new popup window (not redirect, not iframe - guaranteed to work)
+let w=window.open(url,'malloca_catalogue','width=1100,height=800,scrollbars=yes,resizable=yes');
+if(!w||w.closed){
+// Popup blocked - open in new tab
+window.open(url,'_blank');
+}
+}
+
+function openCatImage(src,idx){
+// Show full-size image in a lightbox overlay
+let overlay=document.createElement('div');
+overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;backdrop-filter:blur(6px)';
+overlay.onclick=()=>overlay.remove();
+overlay.innerHTML=`<img src="${src}" style="max-width:95%;max-height:95%;object-fit:contain;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.4)"><button style="position:absolute;top:20px;right:20px;width:40px;height:40px;border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:10px;font-size:1.2rem;cursor:pointer" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>`;
+document.body.appendChild(overlay);
 }
 
 function initCatTabs(){
@@ -708,7 +742,6 @@ catLoaded=true;
 window.scrollTo({top:0,behavior:'smooth'});
 }
 
-function initCatalogue(){}
 
 // ===== CART =====
 let cart=JSON.parse(localStorage.getItem('malloca_cart')||'[]');