`public/index.html`

77 lines
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Google Merchant — DW Catalog</title>
<style>
:root{--cols:6}
*{box-sizing:border-box}
body{margin:0;font:14px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f1115;color:#e7e9ee}
header{position:sticky;top:0;z-index:5;background:#161922;border-bottom:1px solid #262b38;padding:12px 16px}
h1{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:.02em}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{background:#20252f;border:1px solid #2c3342;color:#cfd4de;border-radius:20px;padding:5px 12px;cursor:pointer;font-size:13px}
.chip.on{background:#2f6df6;border-color:#2f6df6;color:#fff}
.chip b{color:#fff;font-weight:700;margin-left:5px}
input[type=search]{background:#0f1115;border:1px solid #2c3342;color:#e7e9ee;border-radius:8px;padding:6px 10px;min-width:200px}
input[type=range]{vertical-align:middle}
.muted{color:#8b93a3;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;padding:14px 16px}
.card{background:#161922;border:1px solid #232838;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b0d12}
.card .b{padding:7px 8px}
.t{font-size:12px;line-height:1.3;max-height:2.6em;overflow:hidden;color:#dfe3ea}
.v{color:#8b93a3;font-size:11px;margin-top:2px}
.price{font-weight:700;font-size:13px}
.price.s{color:#e0a93b}.price.r{color:#5fd08a}
.st{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-top:4px}
.st.active,.st.approved{background:#183a29;color:#5fd08a}.st.disapproved{background:#3a1a1a;color:#f08a8a}.st.pending{background:#3a331a;color:#e0c93b}.st.unknown{background:#232838;color:#8b93a3}
.load{grid-column:1/-1;text-align:center;padding:20px;color:#8b93a3}
</style></head><body>
<header>
<h1>🛍️ Google Merchant — DW live catalog <span id="gen" class="muted"></span></h1>
<div class="bar">
  <span class="chip" data-f="all" id="c-all">All<b>–</b></span>
  <span class="chip" data-f="approved" id="c-approved">✅ Approved<b>–</b></span>
  <span class="chip" data-f="disapproved" id="c-disapproved">⛔ Disapproved<b>–</b></span>
  <span class="chip" data-f="pending" id="c-pending">⏳ Pending<b>–</b></span>
  <span class="chip" data-f="real" id="c-real">💲 Real price<b>–</b></span>
  <span class="chip" data-f="at425" id="c-at425">$4.25 sample<b>–</b></span>
  <input type="search" id="q" placeholder="search title / vendor…">
  <span class="muted">density</span><input type="range" id="dens" min="3" max="10" value="6">
  <span class="chip" id="refresh">↻ Refresh</span>
  <span class="muted" id="showing"></span>
</div>
</header>
<div class="grid" id="grid"><div class="load">loading…</div></div>
<script>
const $=s=>document.querySelector(s); let filter='all',q='';
const dens=$('#dens'); dens.oninput=()=>document.documentElement.style.setProperty('--cols',dens.value);
document.documentElement.style.setProperty('--cols',6);
async function summary(){
  const r=await fetch('/api/summary').then(r=>r.json());
  const s=r.summary||{};
  $('#gen').textContent = r.generated_at? '· '+new Date(r.generated_at).toLocaleString()+(r.refreshing?' · refreshing…':'') : (r.refreshing?'· building…':'');
  const set=(id,n)=>{const e=$(id); if(e)e.querySelector('b').textContent=(n??0).toLocaleString();};
  set('#c-all',s.total);set('#c-approved',s.approved);set('#c-disapproved',s.disapproved);set('#c-pending',s.pending);set('#c-real',s.real_price);set('#c-at425',s.at_425);
  if(r.refreshing) setTimeout(summary,4000);
}
async function load(){
  $('#grid').innerHTML='<div class="load">loading…</div>';
  const r=await fetch('/api/products?filter='+filter+'&q='+encodeURIComponent(q)+'&limit=800').then(r=>r.json());
  $('#showing').textContent=r.count.toLocaleString()+' match'+(r.count===1?'':'es')+(r.count>800?' (showing 800)':'');
  if(!r.items.length){$('#grid').innerHTML='<div class="load">no products</div>';return;}
  $('#grid').innerHTML=r.items.map(i=>{
    const s=Math.abs(i.price-4.25)<0.01?'s':'r';
    const st=i.status||'unknown';
    return `<div class="card">${i.image?`<img loading="lazy" src="${i.image}">`:'<div style="aspect-ratio:1/1;background:#0b0d12"></div>'}
    <div class="b"><div class="t" title="${(i.title||'').replace(/"/g,'&quot;')}">${i.title||'(untitled)'}</div>
    <div class="v">${i.brand||''} ${i.country?'· '+i.country:''}</div>
    <div class="price ${s}">$${(i.price||0).toFixed(2)}</div>
    <span class="st ${st}">${st}${i.issues&&i.issues.length?' · '+i.issues[0]:''}</span></div></div>`;
  }).join('');
}
document.querySelectorAll('.chip[data-f]').forEach(c=>c.onclick=()=>{document.querySelectorAll('.chip[data-f]').forEach(x=>x.classList.remove('on'));c.classList.add('on');filter=c.dataset.f;load();});
$('#c-all').classList.add('on');
let qt; $('#q').oninput=e=>{clearTimeout(qt);q=e.target.value;qt=setTimeout(load,250);};
$('#refresh').onclick=async()=>{await fetch('/api/refresh');summary();};
summary();load();
</script></body></html>