Product titles: MODEL CODE | Malloca | Name. Catalogue search UI ready.

index.html

@@ -378,7 +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: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>
+<p style="color:var(--g);font-size:.9rem;max-width:550px;margin:10px auto 0">Tất cả 607 trang catalogue hiển thị trực tiếp — tìm kiếm theo văn bản trong ảnh</p>
+<div style="max-width:480px;margin:16px auto 0;position:relative">
+<i class="fas fa-search" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--g);font-size:.85rem"></i>
+<input type="text" id="catSearch" placeholder="Tìm trong catalogue... (tên SP, mã SP, thông số...)" oninput="searchCatalogue()" style="width:100%;padding:10px 14px 10px 40px;border:2px solid var(--gl);border-radius:12px;font-size:.85rem;font-family:inherit;outline:none">
+<span id="catSearchCount" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.68rem;color:var(--g);background:var(--l);padding:2px 7px;border-radius:6px"></span>
+</div>
 </div>
 <!-- Tab selector -->
 <div id="catTabs" style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px"></div>
@@ -475,7 +480,7 @@ const PRICES=[
 {l:'15-30 triệu',min:15e6,max:3e7},{l:'30-50 triệu',min:3e7,max:5e7},{l:'Trên 50 triệu',min:5e7,max:1e15}
 ];
 
-fetch('products.json').then(r=>r.json()).then(d=>{D=d.map(p=>({name:p.n,link:p.l,image:p.i,price:p.p,priceNum:p.pn,cat:p.c,catSlug:p.cs,catIcon:p.ci,images:p.imgs||[],summary:p.sum||'',desc:p.desc||'',specs:p.specs||{},feats:p.feats||[],sku:p.sku||'',video:p.vid||''}));init()});
+fetch('products.json').then(r=>r.json()).then(d=>{D=d.map(p=>({name:p.n,link:p.l,image:p.i,price:p.p,priceNum:p.pn,cat:p.c,catSlug:p.cs,catIcon:p.ci,images:p.imgs||[],summary:p.sum||'',desc:p.desc||'',specs:p.specs||{},feats:p.feats||[],sku:p.sku||'',video:p.vid||'',model:p.mod||''}));init()});
 
 function init(){buildCats();buildPrices();render()}
 
@@ -494,7 +499,7 @@ document.getElementById('pr').innerHTML=h;document.getElementById('prm').innerHT
 function getF(){
 let r=D;
 if(S.cat!=='all')r=r.filter(p=>p.catSlug===S.cat);
-if(S.q){let q=S.q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');r=r.filter(p=>{let n=(p.name+' '+p.cat+' '+p.sku).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');return n.includes(q)})}
+if(S.q){let q=S.q.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');r=r.filter(p=>{let n=(p.name+' '+p.cat+' '+p.sku+' '+p.model+' malloca').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');return n.includes(q)})}
 if(S.pmin>0||S.pmax<1e15)r=r.filter(p=>p.priceNum>=S.pmin&&p.priceNum<=S.pmax);
 if(S.sort==='pa')r.sort((a,b)=>a.priceNum-b.priceNum);
 else if(S.sort==='pd')r.sort((a,b)=>b.priceNum-a.priceNum);
@@ -511,7 +516,7 @@ let g=document.getElementById('grid');
 g.className='pg'+(S.view==='l'?' lv':'');
 if(!items.length){g.innerHTML=`<div class="empty" style="grid-column:1/-1"><i class="fas fa-search"></i><h3>Không tìm thấy</h3><p>Thử thay đổi bộ lọc hoặc từ khóa</p><button class="reset-btn" onclick="resetAll()">Xóa bộ lọc</button></div>`;
 }else{
-g.innerHTML=items.map((p,i)=>{let idx=D.indexOf(p);return`<div class="pc fade" onclick="showDetail(${idx})" style="transition-delay:${Math.min(i*25,400)}ms"><div class="pi"><img src="${p.image}" alt="${p.name}" loading="lazy" onerror="this.style.display='none'"><span class="pi-badge"><i class="fas ${p.catIcon}"></i> ${p.cat}</span></div><div class="pb"><div class="pn">${p.name}</div><div class="pf"><span class="pp">${p.price||'Liên hệ'}</span><i class="fas fa-chevron-right"></i></div></div></div>`}).join('');
+g.innerHTML=items.map((p,i)=>{let idx=D.indexOf(p);return`<div class="pc fade" onclick="showDetail(${idx})" style="transition-delay:${Math.min(i*25,400)}ms"><div class="pi"><img src="${p.image}" alt="${p.name}" loading="lazy" onerror="this.style.display='none'"><span class="pi-badge"><i class="fas ${p.catIcon}"></i> ${p.cat}</span></div><div class="pb"><div style="font-size:.65rem;font-weight:700;color:var(--a);letter-spacing:.5px;margin-bottom:4px">${p.model}</div><div class="pn">${p.name}</div><div class="pf"><span class="pp">${p.price||'Liên hệ'}</span><i class="fas fa-chevron-right"></i></div></div></div>`}).join('');
 }
 requestAnimationFrame(()=>document.querySelectorAll('.fade').forEach(e=>e.classList.add('vis')));
 renderPag(tp);
@@ -586,9 +591,10 @@ dv.innerHTML=`
 ${allImgs.length>1?`<div class="gallery-thumbs">${thumbs}</div>`:''}
 </div>
 <div class="detail-info">
-${p.sku?`<div class="detail-sku">SKU: ${p.sku}</div>`:''}
+${p.sku?`<div class="detail-sku">SKU: ${p.sku} &bull; Model: ${p.model}</div>`:''}
 <div class="detail-cat"><i class="fas ${p.catIcon}"></i> ${p.cat}</div>
 <h1 class="detail-name">${p.name}</h1>
+<div style="font-size:.95rem;font-weight:800;color:var(--a);letter-spacing:1px;margin-bottom:12px">${p.model} | Malloca</div>
 <div class="detail-price">${p.price||'Liên hệ'}</div>
 ${p.summary?`<div class="detail-summary">${p.summary}</div>`:''}
 <div class="detail-badges">
@@ -726,6 +732,71 @@ 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});
+}
+
+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 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>');
+}
+
 // ===== NAVIGATION =====
 let currentPage='products';