Parts Search

@@ -309,6 +309,27 @@ select.sel:disabled{opacity:.5;cursor:not-allowed} .restore-btn.armed{color:var(--red);border-color:rgba(248,81,73,.5);background:rgba(248,81,73,.08)} .restore-btn svg{width:16px;height:16px} +/* ---- Guided demo: spotlight + transport floaty ---- */+#demoSpot{position:fixed;z-index:calc(var(--z-toolbar) + 5);pointer-events:none;border:2px solid var(--accent);border-radius:12px;box-shadow:0 0 0 4px rgba(0,184,177,.25),0 0 0 9999px rgba(6,9,14,.5);transition:all .35s ease;display:none}+#demoSpot.on{display:block}+#demoHud{position:fixed;right:22px;bottom:44px;z-index:var(--z-floating-menu);width:264px;background:var(--overlay);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);display:none;user-select:none}+#demoHud.on{display:block}+.dh-head{display:flex;align-items:center;gap:8px;padding:8px 10px 6px 12px;cursor:move;border-bottom:1px solid var(--border)}+.dh-title{font:600 12.5px var(--brand-heading);color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}+.dh-step{font:11px var(--mono);color:var(--text-2);flex:none}+.dh-body{padding:8px 12px 10px}+.dh-name{font:600 13px var(--brand-heading);color:var(--accent);margin-bottom:6px}+.dh-prog{display:flex;gap:4px;margin-bottom:9px}+.dh-prog i{flex:1;height:4px;border-radius:999px;background:var(--border);transition:background .2s ease}+.dh-prog i.done{background:var(--accent)}+.dh-prog i.cur{background:var(--accent-hover)}+.dh-controls{display:flex;gap:6px;justify-content:center}+.dh-controls .iconbtn{width:36px;height:36px;background:var(--elevated);border-color:var(--border)}+.dh-controls .iconbtn.play{background:var(--accent);color:var(--on-accent)}+.dh-controls .iconbtn.play:hover{background:var(--accent-hover)}+.dh-controls .iconbtn.exit:hover{color:var(--red);border-color:rgba(248,81,73,.5)}+@media (max-width:720px){#demoHud{right:10px;left:10px;bottom:36px;width:auto}}+ /* ---- Responsive: reshape, do not shrink ---- */ @media (max-width:720px){   .brand .sub,.meta,.vsep{display:none}@@ -357,6 +378,7 @@ select.sel:disabled{opacity:.5;cursor:not-allowed}     <div class="meta" id="meta"></div>     <div class="actions">       <span class="hled" id="hled" data-tooltip="Vendor backend health. Green: Mouser, DigiKey, and JLCPCB all answered. Yellow: one is degraded or switched off. Red: none reachable. Pulsing teal: a search is running."></span>+      <button class="iconbtn" id="btnDemo" aria-label="Run the demo" data-tooltip="A two-minute narrated walk through the whole page: the Say it strip, a live search, the columns, the best-source banner, Settings, and the health lights. A floaty gives you pause, next, previous, and exit."><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M10 8.5v7l5.5-3.5z"/></svg></button>       <button class="iconbtn" id="btnSettings" aria-label="Settings" data-tooltip="Settings: results per vendor, which vendors to query, the recommendation policy, product photos, and the taskbar progress bar."><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z"/></svg></button>     </div>   </header>@@ -420,6 +442,25 @@ select.sel:disabled{opacity:.5;cursor:not-allowed}   </footer> </div> +<div id="demoSpot" aria-hidden="true"></div>+<div id="demoHud" role="dialog" aria-label="Demo controls">+  <div class="dh-head" id="dhHead">+    <span class="dh-title">Parts Search demo</span>+    <span class="dh-step" id="dhStep"></span>+  </div>+  <div class="dh-body">+    <div class="dh-name" id="dhName"></div>+    <div class="dh-prog" id="dhProg"></div>+    <div class="dh-controls">+      <button class="iconbtn" id="dhPrev" aria-label="Previous step" data-tooltip="Back one step (Left arrow)."><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button>+      <button class="iconbtn play" id="dhPlay" aria-label="Pause" data-tooltip="Pause or resume the narration and the auto-advance (Space)."><svg id="dhPlayIcon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 6h3v12H8zM13 6h3v12h-3z"/></svg></button>+      <button class="iconbtn" id="dhNext" aria-label="Next step" data-tooltip="Skip ahead one step (Right arrow)."><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>+      <button class="iconbtn exit" id="dhExit" aria-label="Exit the demo" data-tooltip="Stop the demo and put everything back (Escape)."><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></button>+    </div>+  </div>+</div>+<audio id="demoAudio" preload="none"></audio>+ <div id="toasts" aria-live="polite"></div>  <div id="lightbox" class="lightbox" role="dialog" aria-hidden="true" aria-label="Product photo">@@ -887,7 +928,7 @@ let lastSig=null,lastResults=null,lastClickTs=Date.now(),first=true; function clickById(id,value){   const map={search:()=>$('#go').click(),instock:()=>$('#instock').click(),settings:()=>{if(!dlg.open)$('#btnSettings').click();},'close-settings':()=>{if(dlg.open)dlg.close();},restore:()=>$('#btnRestore').click(),     limit:()=>{const b=document.querySelector('#search-form .seg button[data-limit="'+value+'"]');if(b)b.click();},policy:()=>{const i=document.querySelector('#policySet input[value="'+value+'"]');if(i){i.checked=true;i.dispatchEvent(new Event('change',{bubbles:true}));}},-    'say-close':()=>$('#sayClose').click(),'say':()=>$('#tglSay').click(),'vendor-mouser':()=>$('#tglMouser').click(),'vendor-digikey':()=>$('#tglDigikey').click(),'vendor-jlcpcb':()=>$('#tglJlcpcb').click(),images:()=>$('#tglImages').click(),taskbar:()=>$('#tglTaskbar').click(),query:()=>{$('#q').value=value||'';$('#q').focus();}};+    demo:()=>demo.start(),'demo-next':()=>demo.next(),'demo-prev':()=>demo.prev(),'demo-pause':()=>demo.toggle(),'demo-exit':()=>demo.exit(),'say-close':()=>$('#sayClose').click(),'say':()=>$('#tglSay').click(),'vendor-mouser':()=>$('#tglMouser').click(),'vendor-digikey':()=>$('#tglDigikey').click(),'vendor-jlcpcb':()=>$('#tglJlcpcb').click(),images:()=>$('#tglImages').click(),taskbar:()=>$('#tglTaskbar').click(),query:()=>{$('#q').value=value||'';$('#q').focus();}};   if(map[id]){map[id]();console.log('ui click: '+id+(value?' '+value:''));return true;}   const el=document.getElementById(id);if(el){el.click();console.log('ui click: #'+id);return true;}   console.warn('ui click: no control with id "'+id+'"');return false;@@ -906,6 +947,80 @@ async function pollState(){     first=false;   }catch{} }+// ---- Guided demo: pre-rendered narration, spotlight, transport floaty ----+const demo=(()=>{+  const audio=$('#demoAudio'),hud=$('#demoHud'),spot=$('#demoSpot');+  const STEPS=[+    {name:'Welcome',target:'.app-header'},+    {name:'Say it to your AI',target:'#say',enter(){if($('#say').hidden){demoState.stripWasHidden=true;$('#say').hidden=false;}},leave(){if(demoState.stripWasHidden){$('#say').hidden=true;demoState.stripWasHidden=false;}}},+    {name:'The search bar',target:'.searchwrap',enter(){if(!searching&&$('#subject').textContent!=='LM555'){$('#q').value='LM555';doSearch('LM555');}}},+    {name:'Three vendor columns',target:'#grid'},+    {name:'The best source',target:'#recommendation',fallback:'#grid'},+    {name:'Settings',target:'#dlgSettings',enter(){const d=$('#dlgSettings');if(!d.open){demoState.openedSettings=true;d.style.position='fixed';d.style.margin='0';d.style.left='50%';d.style.top='50%';d.style.transform='translate(-50%,-50%)';d.show();$('#settingsBody').scrollTop=0;}},leave(){const d=$('#dlgSettings');if(demoState.openedSettings&&d.open){d.close();d.style.cssText='';demoState.openedSettings=false;}}},+    {name:'Live health',target:'#appFooter'},+    {name:'That is Parts Search',target:'.app-header'},+  ];+  const demoState={active:false,step:-1,playing:true,stripWasHidden:false,openedSettings:false,raf:0};+  function paintSpot(){+    if(!demoState.active)return;+    const st=STEPS[demoState.step];+    if(!st){demoState.raf=requestAnimationFrame(paintSpot);return;}+    let el=document.querySelector(st.target);+    if(el&&st.target==='#recommendation'&&!el.firstElementChild)el=document.querySelector(st.fallback);+    if(!el||(el.getBoundingClientRect().width===0)){spot.classList.remove('on');}+    else{const r=el.getBoundingClientRect();spot.classList.add('on');spot.style.left=(r.left-6)+'px';spot.style.top=(r.top-6)+'px';spot.style.width=(r.width+12)+'px';spot.style.height=(r.height+12)+'px';}+    demoState.raf=requestAnimationFrame(paintSpot);+  }+  function paintHud(){+    $('#dhStep').textContent=(demoState.step+1)+' / '+STEPS.length;+    $('#dhName').textContent=STEPS[demoState.step].name;+    $('#dhProg').innerHTML=STEPS.map((_,i)=>'<i class="'+(i<demoState.step?'done':i===demoState.step?'cur':'')+'"></i>').join('');+    $('#dhPlayIcon').innerHTML=demoState.playing?'<path d="M8 6h3v12H8zM13 6h3v12h-3z"/>':'<path d="M9 6.5v11l8.5-5.5z"/>';+    $('#dhPlay').setAttribute('aria-label',demoState.playing?'Pause':'Play');+  }+  function goto(n){+    if(!demoState.active)return;+    const prev=STEPS[demoState.step];if(prev&&prev.leave)try{prev.leave();}catch{}+    if(n<0)n=0;+    if(n>=STEPS.length){exit();toast('Demo finished. Ask your AI for parts, or just type into the box.','success');return;}+    demoState.step=n;const st=STEPS[n];+    if(st.enter)try{st.enter();}catch(e){console.warn('demo step enter failed: '+e.message);}+    const el=document.querySelector(st.target);+    if(el&&st.target!=='#dlgSettings'&&st.target!=='.app-header'&&st.target!=='#appFooter')el.scrollIntoView({block:'center',behavior:'smooth'});+    if(st.target==='.app-header')$('#appBody').scrollTo({top:0,behavior:'smooth'});+    audio.src='audio/demo-'+(n+1)+'.mp3';+    if(demoState.playing)audio.play().catch(()=>{demoState.playing=false;paintHud();toast('Press Play on the demo floaty to hear the narration (browsers unlock audio on a click).','info');});+    paintHud();+  }+  audio.addEventListener('ended',()=>{if(demoState.active&&demoState.playing)setTimeout(()=>{if(demoState.active&&demoState.playing)goto(demoState.step+1);},500);});+  function start(){+    if(demoState.active)return;+    demoState.active=true;demoState.playing=true;hud.classList.add('on');+    paintSpot();goto(0);+    console.log('demo started');+  }+  function exit(){+    if(!demoState.active)return;+    const st=STEPS[demoState.step];if(st&&st.leave)try{st.leave();}catch{}+    demoState.active=false;demoState.step=-1;cancelAnimationFrame(demoState.raf);+    hud.classList.remove('on');spot.classList.remove('on');+    audio.pause();audio.removeAttribute('src');+    console.log('demo exited');+  }+  $('#dhNext').addEventListener('click',()=>goto(demoState.step+1));+  $('#dhPrev').addEventListener('click',()=>goto(demoState.step-1));+  $('#dhExit').addEventListener('click',exit);+  $('#dhPlay').addEventListener('click',()=>{demoState.playing=!demoState.playing;if(demoState.playing){(audio.src?audio.play():Promise.reject()).catch(()=>goto(demoState.step));}else audio.pause();paintHud();});+  document.addEventListener('keydown',e=>{if(!demoState.active)return;if(e.key==='Escape'&&!$('#dlgSettings').open){exit();}else if(e.key==='ArrowRight'){goto(demoState.step+1);}else if(e.key==='ArrowLeft'){goto(demoState.step-1);}else if(e.key===' '&&!e.target.closest('input,select')){e.preventDefault();$('#dhPlay').click();}});+  (function(){const head=$('#dhHead');let drag=null;+    head.addEventListener('mousedown',e=>{const r=hud.getBoundingClientRect();drag={dx:e.clientX-r.left,dy:e.clientY-r.top};hud.style.right='auto';hud.style.bottom='auto';e.preventDefault();});+    document.addEventListener('mousemove',e=>{if(!drag)return;hud.style.left=Math.max(0,Math.min(e.clientX-drag.dx,innerWidth-hud.offsetWidth))+'px';hud.style.top=Math.max(0,Math.min(e.clientY-drag.dy,innerHeight-hud.offsetHeight))+'px';});+    document.addEventListener('mouseup',()=>{drag=null;});+  })();+  return {start,exit,next:()=>goto(demoState.step+1),prev:()=>goto(demoState.step-1),toggle:()=>$('#dhPlay').click(),active:()=>demoState.active};+})();+$('#btnDemo').addEventListener('click',()=>demo.start());+ (function(){const ex=['STM32F103RBT6','LM358','ESP32-S3-WROOM-1','10k 0402','LDO 3.3V 500mA','USB-C receptacle'];const host=$('#examples');host.insertAdjacentHTML('beforeend',ex.map(e=>'<button type="button" class="ex" data-tooltip="Run this example search.">'+escape(e)+'</button>').join(''));host.addEventListener('click',e=>{const b=e.target.closest('.ex');if(!b)return;$('#q').value=b.textContent;doSearch(b.textContent);});})(); renderIdle();paintSettings();pollState();setInterval(pollState,500); </script>