Upload index.html

index.html

@@ -695,213 +695,78 @@ catLoaded=true;
 function initCatTabs(){
 let tabs=document.getElementById('catTabs');
 if(!tabs||!CAT_LIST.length)return;
-tabs.innerHTML=CAT_LIST.map((c,i)=>`<button class="ctab" onclick="loadCatalogue(${i})" style="padding:8px 18px;border-radius:10px;border:2px solid ${i===0?'var(--p)':'var(--gl)'};background:${i===0?'var(--p)':'#fff'};color:${i===0?'#fff':'var(--d)'};font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s">${c.name} <span style="opacity:.5;font-weight:400">${c.pages.length}p</span></button>`).join('');
+tabs.innerHTML=CAT_LIST.map((c,i)=>`<button class="pgb${i===0?' active':''}" onclick="loadCatalogue(${i})" style="white-space:nowrap">${c.title}</button>`).join('');
 }
 
 function loadCatalogue(idx){
 activeCat=idx;
-catPage=1;
-document.querySelectorAll('.ctab').forEach((t,i)=>{
-  t.style.background=i===idx?'var(--p)':'#fff';
-  t.style.color=i===idx?'#fff':'var(--d)';
-  t.style.borderColor=i===idx?'var(--p)':'var(--gl)';
-});
-renderCatPages();
-}
-
-function renderCatPages(){
-let c=CAT_LIST[activeCat];
+let c=CAT_LIST[idx];
 if(!c)return;
-let total=c.pages.length;
-let totalPages=Math.ceil(total/CAT_PER_PAGE);
-if(catPage>totalPages)catPage=totalPages;
-let start=(catPage-1)*CAT_PER_PAGE;
-let items=c.pages.slice(start,start+CAT_PER_PAGE);
-
-let container=document.getElementById('catContent');
-// Pagination
-let pagHtml='';
-if(totalPages>1){
-pagHtml=`<div style="display:flex;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap">`;
-pagHtml+=`<button onclick="catPage--;renderCatPages();window.scrollTo({top:document.getElementById('catContent').offsetTop-80,behavior:'smooth'})" style="padding:8px 14px;border:2px solid var(--gl);border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-weight:600;font-size:.8rem" ${catPage<=1?'disabled style="opacity:.3;padding:8px 14px;border:2px solid var(--gl);border-radius:8px;background:#fff;cursor:default;font-family:inherit;font-weight:600;font-size:.8rem"':''}><i class="fas fa-chevron-left"></i></button>`;
-pagHtml+=`<span style="padding:8px 14px;font-size:.82rem;font-weight:600;color:var(--g)">Trang ${catPage}/${totalPages} (${total} trang catalogue)</span>`;
-pagHtml+=`<button onclick="catPage++;renderCatPages();window.scrollTo({top:document.getElementById('catContent').offsetTop-80,behavior:'smooth'})" style="padding:8px 14px;border:2px solid var(--gl);border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-weight:600;font-size:.8rem" ${catPage>=totalPages?'disabled style="opacity:.3;padding:8px 14px;border:2px solid var(--gl);border-radius:8px;background:#fff;cursor:default;font-family:inherit;font-weight:600;font-size:.8rem"':''}><i class="fas fa-chevron-right"></i></button>`;
-pagHtml+=`</div>`;
-}
-
-container.innerHTML=`
-<div style="background:#fff;border-radius:20px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.06)">
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px">
-<div><h3 style="font-size:1.2rem;font-weight:800;color:var(--d)"><i class="fas fa-book-open" style="color:var(--a);margin-right:8px"></i>${c.name}</h3>
-<p style="color:var(--g);font-size:.8rem;margin-top:4px">${c.desc} — ${total} trang</p></div>
-</div>
-${pagHtml}
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px">
-${items.map((img,i)=>{let pgNum=start+i+1;return`<div style="position:relative;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)';this.style.boxShadow='0 8px 20px rgba(0,0,0,.1)'" onmouseout="this.style.borderColor='var(--gl)';this.style.transform='';this.style.boxShadow=''" onclick="openCatImage('${img.replace(/'/g,"\\'")}')">
-<img src="${img}" alt="Trang ${pgNum}" loading="lazy" style="width:100%;display:block">
-<div style="position:absolute;top:8px;left:8px;background:var(--p);color:#fff;padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:700">Trang ${pgNum}</div>
-<div style="position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem"><i class="fas fa-search-plus"></i></div>
-</div>`}).join('')}
-</div>
-${pagHtml}
+// Update active tab
+let tabBtns=document.querySelectorAll('#catTabs .pgb');
+tabBtns.forEach((b,i)=>b.classList.toggle('active',i===idx));
+let content=document.getElementById('catContent');
+if(!content)return;
+let pages=c.pages||[];
+let totalPages=pages.length;
+let totalPagesDisplay=totalPages;
+let pageHtml=`<div style="text-align:center;margin-bottom:16px">
+<div style="font-size:.85rem;color:var(--g)">${c.desc||''} — <strong>${totalPagesDisplay}</strong> trang</div>
 </div>`;
-}
-
-function openCatImage(src){
-let overlay=document.createElement('div');
-overlay.style.cssText='position:fixed;inset:0;background:rgba(0,0,0,.9);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:8px;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="event.stopPropagation();this.parentElement.remove()"><i class="fas fa-times"></i></button>`;
-document.body.appendChild(overlay);
-}
-
-
-// ===== CATALOGUE SEARCH (OCR text index) =====
-let catOcrData=null;
-let catSearchMode=false;
-
-function loadCatOcr(){
-if(catOcrData)return Promise.resolve();
-return fetch('catalogue_ocr.json').then(r=>r.ok?r.json():null).then(d=>{catOcrData=d}).catch(()=>{catOcrData=null});
+pageHtml+=`<div style="display:flex;flex-direction:column;gap:16px;align-items:center">`;
+pageHtml+=pages.map(pg=>`<div style="width:100%;max-width:900px"><img src="grob_img/${pg.file}" alt="${pg.title||'Page'}" style="width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.1)" loading="lazy"><div style="text-align:center;font-size:.75rem;color:var(--g);margin-top:6px">Trang ${pg.page||''}</div></div>`).join('');
+pageHtml+=`</div>`;
+content.innerHTML=pageHtml;
+window.scrollTo({top:0,behavior:'smooth'});
 }
 
 function searchCatalogue(){
-let q=document.getElementById('catSearch').value.trim().toLowerCase();
-let countEl=document.getElementById('catSearchCount');
-if(!q){
-catSearchMode=false;
-countEl.textContent='';
-renderCatPages();
-return;
-}
-catSearchMode=true;
-if(!catOcrData){
-loadCatOcr().then(()=>searchCatalogue());
-countEl.textContent='Đang tải...';
-return;
-}
-// Search through OCR texts
+let q=document.getElementById('catSearch').value.trim();
+if(!q){loadCatalogue(activeCat);document.getElementById('catSearchCount').textContent='';return}
+let nq=nVN(q);
 let results=[];
-for(let ci=0;ci<CAT_LIST.length;ci++){
-let ocr=catOcrData&&catOcrData[ci]?catOcrData[ci].texts:[];
-let pages=CAT_LIST[ci].pages;
-for(let pi=0;pi<pages.length;pi++){
-let txt=(ocr[pi]||'').toLowerCase();
-if(txt.includes(q)){
-results.push({catIdx:ci,catName:CAT_LIST[ci].name,pageIdx:pi,pageNum:pi+1,img:pages[pi],text:ocr[pi]||''});
-}
-}
-}
-countEl.textContent=results.length?results.length+' trang':'Không tìm thấy';
-renderCatSearchResults(results,q);
-}
-
-function renderCatSearchResults(results,q){
-let container=document.getElementById('catContent');
-if(!results.length){
-container.innerHTML=`<div style="text-align:center;padding:50px;color:var(--g)"><i class="fas fa-search" style="font-size:2.5rem;opacity:.3;display:block;margin-bottom:14px"></i><h3 style="font-size:1rem;font-weight:700;color:var(--d);margin-bottom:6px">Không tìm thấy "${q}"</h3><p style="font-size:.85rem">Thử từ khóa khác hoặc xóa bộ lọc</p></div>`;
-return;
-}
-// Hide tabs selection when showing search results
-container.innerHTML=`
-<div style="background:#fff;border-radius:20px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,.06)">
-<div style="margin-bottom:16px"><h3 style="font-size:1.1rem;font-weight:700;color:var(--d)"><i class="fas fa-search" style="color:var(--a);margin-right:8px"></i>${results.length} trang chứa "${q}"</h3></div>
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px">
-${results.map(r=>`<div style="position:relative;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('${r.img.replace(/'/g,"\\'")}')">
-<img src="${r.img}" alt="" loading="lazy" style="width:100%;display:block">
-<div style="position:absolute;top:8px;left:8px;background:var(--p);color:#fff;padding:3px 10px;border-radius:6px;font-size:.68rem;font-weight:700">${r.catName} — Trang ${r.pageNum}</div>
-<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:10px 12px 8px;color:#fff;font-size:.72rem;line-height:1.4">${highlightText(r.text.substring(0,120),q)}...</div>
-</div>`).join('')}
-</div>
-</div>`;
-}
-
-function highlightText(text,q){
-let re=new RegExp('('+q.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')+')','gi');
-return text.replace(re,'<mark style="background:var(--al);color:var(--d);padding:1px 2px;border-radius:2px">$1</mark>');
+CAT_LIST.forEach(c=>{
+(c.pages||[]).forEach(pg=>{
+let text=nVN((pg.ocr||'')+' '+(pg.title||''));
+if(text.includes(nq))results.push({cat:c.title,page:pg});
+});
+});
+document.getElementById('catSearchCount').textContent=results.length+' kết quả';
+let content=document.getElementById('catContent');
+if(!results.length){content.innerHTML='<div class="empty" style="padding:40px"><i class="fas fa-search"></i><h3>Không tìm thấy trong catalogue</h3></div>';return}
+content.innerHTML=`<div style="display:flex;flex-direction:column;gap:16px;align-items:center">`+results.map(r=>`<div style="width:100%;max-width:900px"><div style="font-size:.8rem;color:var(--p);font-weight:700;margin-bottom:6px">${r.cat} — Trang ${r.page.page||''}</div><img src="grob_img/${r.page.file}" alt="${r.page.title||'Page'}" style="width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.1)" loading="lazy"></div>`).join('')+`</div>`;
 }
 
-// ===== MAIN SEARCH → CATALOGUE OCR RESULTS =====
 function renderMainCatSearch(){
-let container=document.getElementById('catSearchResults');
-if(!container)return;
-let q=S.q;
-if(!q||q.length<2){container.innerHTML='';return;}
-// Ensure OCR data and catalogue list are loaded
-if(!catOcrData){
-loadCatOcr().then(()=>{
-if(!CAT_LIST.length){
-fetch('catalogues.json').then(r=>r.json()).then(data=>{CAT_LIST=data;renderMainCatSearch()});
-}else{renderMainCatSearch()}
-});
-return;
-}
-if(!CAT_LIST.length){
-fetch('catalogues.json').then(r=>r.json()).then(data=>{CAT_LIST=data;renderMainCatSearch()});
-return;
-}
-let ql=nVN(q);
+let q=document.getElementById('q').value.trim();
+let csr=document.getElementById('catSearchResults');
+if(!csr)return;
+if(!q){csr.innerHTML='';return}
+let nq=nVN(q);
 let results=[];
-for(let ci=0;ci<CAT_LIST.length;ci++){
-let ocr=catOcrData&&catOcrData[ci]?catOcrData[ci].texts:[];
-let pages=CAT_LIST[ci].pages;
-for(let pi=0;pi<pages.length;pi++){
-let txt=nVN(ocr[pi]||'');
-if(txt.includes(ql)){
-results.push({catIdx:ci,catName:CAT_LIST[ci].name,pageIdx:pi,pageNum:pi+1,img:pages[pi],text:ocr[pi]||''});
-}
-}
-}
-if(!results.length){container.innerHTML='';return;}
-let shown=results.slice(0,8);
-let moreCount=results.length-shown.length;
-container.innerHTML=`
-<div style="margin-top:24px;background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.06)">
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px">
-<h3 style="font-size:.95rem;font-weight:700;color:var(--d);display:flex;align-items:center;gap:8px">
-<i class="fas fa-book-open" style="color:var(--a)"></i> Tìm thấy trong Catalogue: <strong style="color:var(--p)">${results.length} trang</strong>
-</h3>
-${results.length>8?`<button onclick="showPage('catalogue');document.getElementById('catSearch').value='${q.replace(/'/g,"\\'")}';setTimeout(searchCatalogue,300)" style="padding:6px 16px;border:2px solid var(--p);border-radius:8px;background:#fff;color:var(--p);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit">Xem tất cả ${results.length} trang <i class="fas fa-arrow-right" style="margin-left:4px"></i></button>`:''}
-</div>
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
-${shown.map(r=>`<div style="position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--gl);cursor:pointer;transition:all .2s;aspect-ratio:1.4" onmouseover="this.style.borderColor='var(--p)';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--gl)';this.style.transform=''" onclick="openCatImage('${r.img.replace(/'/g,"\\'")}')">
-<img src="${r.img}" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover">
-<div style="position:absolute;top:6px;left:6px;background:var(--p);color:#fff;padding:2px 8px;border-radius:5px;font-size:.6rem;font-weight:700">${r.catName} — Trang ${r.pageNum}</div>
-<div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));padding:8px 10px 6px;color:#fff;font-size:.65rem;line-height:1.3">${highlightText(r.text.substring(0,100),q)}...</div>
-</div>`).join('')}
-</div>
-${moreCount>0?`<div style="text-align:center;margin-top:12px"><button onclick="showPage('catalogue');document.getElementById('catSearch').value='${q.replace(/'/g,"\\'")}';setTimeout(searchCatalogue,300)" style="padding:8px 20px;border:none;background:var(--p);color:#fff;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit">+${moreCount} trang khác trong Catalogue <i class="fas fa-arrow-right" style="margin-left:4px"></i></button></div>`:''}
-</div>`;
+CAT_LIST.forEach(c=>{
+(c.pages||[]).forEach(pg=>{
+let text=nVN((pg.ocr||'')+' '+(pg.title||''));
+if(text.includes(nq))results.push({cat:c.title,page:pg});
+});
+});
+if(!results.length){csr.innerHTML='';return}
+csr.innerHTML=`<div style="margin-top:24px;padding-top:24px;border-top:2px solid var(--gl)"><h3 style="font-size:1rem;font-weight:700;margin-bottom:12px"><i class="fas fa-book-open" style="color:var(--a);margin-right:8px"></i>Kết quả trong Catalogue (${results.length})</h3><div style="display:flex;flex-wrap:wrap;gap:12px">`+results.slice(0,6).map(r=>`<div style="width:200px;cursor:pointer" onclick="showPage('catalogue');document.getElementById('catSearch').value='${document.getElementById('q').value.replace(/'/g,"\\'")}';searchCatalogue();"><img src="grob_img/${r.page.file}" style="width:100%;border-radius:8px;border:2px solid var(--gl)" loading="lazy"><div style="font-size:.7rem;color:var(--g);margin-top:4px">${r.cat}</div></div>`).join('')+`</div></div>`;
 }
 
-// ===== NAVIGATION =====
-let currentPage='products';
-
 function showPage(page){
-currentPage=page;
-document.querySelectorAll('.page-section').forEach(s=>s.classList.remove('active'));
-document.querySelectorAll('.nav-tab').forEach(t=>t.classList.remove('active'));
+document.querySelectorAll('.page-section').forEach(el=>el.classList.remove('active'));
+document.querySelectorAll('.nav-tab').forEach(el=>el.classList.toggle('active',el.dataset.page===page));
 let el=document.getElementById('page-'+page);
-if(el)el.classList.add('active');
-let tab=document.querySelector(`.nav-tab[data-page="${page}"]`);
-if(tab)tab.classList.add('active');
-if(page==='products'){
-document.getElementById('page-products').classList.add('active');
-document.getElementById('listView').style.display='';
-document.getElementById('detailView').classList.remove('show');
-document.getElementById('detailView').innerHTML='';
-document.querySelector('.hero').style.display='';
-}else{
-document.getElementById('detailView').classList.remove('show');
-document.getElementById('detailView').innerHTML='';
-document.querySelector('.hero').style.display='none';
-}
-if(page==='catalogue'&&!catLoaded){
-loadCatalogueData();
-}
+if(el){el.classList.add('active');}
+if(page==='catalogue'&&!catLoaded){loadCatalogueData();}
 window.scrollTo({top:0,behavior:'smooth'});
 }
 
+function initCatalogue(){
+// catalogue loads on demand
+}
+
 
 // ===== CART =====
 let cart=JSON.parse(localStorage.getItem('malloca_cart')||'[]');
@@ -1055,8 +920,30 @@ goBack();
 showPage('products');resetAll();
 }
 
+// Parse URL query params on load for direct search URLs
+function parseUrlParams(){
+let params=new URLSearchParams(location.search);
+let q=params.get('q')||params.get('search')||'';
+if(q){
+document.getElementById('q').value=q;
+S.q=q;
+S.pg=1;
+}
+let cat=params.get('cat');
+if(cat){S.cat=cat;}
+let brand=params.get('brand');
+if(brand){S.brand=brand;}
+let page=params.get('page');
+if(page){S.pg=parseInt(page)||1;}
+let sort=params.get('sort');
+if(sort){S.sort=sort;document.getElementById('ss').value=sort;}
+let p=params.get('p');
+if(p==='list'){S.view='l';document.getElementById('gb').classList.remove('active');document.getElementById('lb').classList.add('active');}
+}
+
 // Init on load
 document.addEventListener('DOMContentLoaded',()=>{
+parseUrlParams();
 initCatalogue();
 updateCartBadge();
 });