:root{ --accent:#2b6cb0; --muted:#6b7280; --bg:#f8fafc; --card:#fff; --radius:12px; --gap:16px; } *{box-sizing:border-box} body{ margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:#0f172a; padding:28px; } .container{ max-width:1100px; margin:0 auto; } h1{ margin:0 0 12px 0; font-size:20px; letter-spacing:0.2px; } .controls{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; } .tabs{ display:flex; gap:8px; flex-wrap:wrap; } .tab{ border:1px solid transparent; background:transparent; padding:8px 14px; border-radius:999px; cursor:pointer; font-weight:600; transition:all .15s; } .tab[aria-pressed="true"]{ background:var(--accent); color:white; box-shadow:0 6px 18px rgba(43,108,176,0.12); transform:translateY(-1px); } .mobile-select{ display:none; } .grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(4, 1fr); } .card{ background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 12px rgba(15,23,42,0.06); border:1px solid rgba(15,23,42,0.04); } .card img{ width:100%; height:180px; object-fit:cover; display:block; } .card .meta{ padding:10px 12px; } .tag{ display:inline-block; font-size:12px; color:var(--muted); } @media (max-width:1000px){ .grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width:720px){ .grid{ grid-template-columns: repeat(2,1fr); } .mobile-select{ display:block; margin-left:auto; } .tabs{ display:none; } } @media (max-width:420px){ .grid{ grid-template-columns: 1fr; } } .empty{ padding:40px; text-align:center; color:var(--muted); } const items = [ {id:1, title:"Black Markino Granite", category:"granite", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-27-at-11.05.25-AM.jpeg", alt:"Black Markino Granite"}, {id:2, title:"Crystal Brown", category:"granite", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-27-at-11.05.40-AM.jpeg", alt:"Crystal Brown Granite"}, {id:3, title:"Ice Blue", category:"granite", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-27-at-11.05.57-AM.jpeg", alt:"Ice Blue Granite"}, {id:4, title:"Apple Green", category:"granite", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-27-at-11.05.16-AM.jpeg", alt:"Apple Green Granite"}, {id:5, title:"Patagonia", category:"exotic", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-21-at-3.39.41-PM-1.jpeg", alt:"Patagonia Exotic Stone"}, {id:6, title:"River Blue", category:"exotic", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-21-at-3.39.10-PM.jpeg", alt:"River Blue Exotic Stone"}, {id:7, title:"Titanium Black", category:"exotic", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-21-at-3.40.25-PM.jpeg", alt:"Titanium Black Exotic Stone"}, {id:8, title:"Golden Alaska", category:"exotic", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/11/WhatsApp-Image-2025-11-21-at-3.48.28-PM.jpeg", alt:"Golden Alaska Exotic Stone"}, // नया Quartz आइटम {id:9, title:"Snow White Quartz", category:"quartz", imageUrl:"https://abhilashamarmograni.com/wp-content/uploads/2025/12/Pure-White-Quartz.jpg", alt:"Snow White Quartz"} ]; const gallery = document.getElementById('gallery'); const emptyBox = document.getElementById('empty'); const tabs = Array.from(document.querySelectorAll('.tab')); const mobileSelect = document.getElementById('mobileFilter'); function renderGrid(filtered){ gallery.innerHTML = ''; if(filtered.length === 0){ emptyBox.style.display = 'block'; return; } emptyBox.style.display = 'none'; const frag = document.createDocumentFragment(); filtered.forEach(item => { const card = document.createElement('article'); card.className = 'card'; card.setAttribute('data-category', item.category); const img = document.createElement('img'); img.src = item.imageUrl; img.alt = item.alt || item.title; img.loading = 'lazy'; const meta = document.createElement('div'); meta.className = 'meta'; meta.innerHTML = ` `; card.appendChild(img); card.appendChild(meta); frag.appendChild(card); }); gallery.appendChild(frag); } renderGrid(items); function applyFilter(filter){ if(filter === 'all'){ renderGrid(items); } else{ const out = items.filter(i => i.category === filter); renderGrid(out); } } tabs.forEach(btn=>{ btn.addEventListener('click', ()=>{ tabs.forEach(t=>t.setAttribute('aria-pressed','false')); btn.setAttribute('aria-pressed','true'); const cat = btn.dataset.filter; mobileSelect.value = cat; applyFilter(cat); }); }); mobileSelect.addEventListener('change', e=>{ const value = e.target.value; tabs.forEach(t=> t.setAttribute('aria-pressed', t.dataset.filter === value ? 'true' : 'false')); applyFilter(value); });