Pup - the AI's own browser

@@ -0,0 +1,51 @@+<div id="pupshow" style="max-width:1100px;margin:0 auto;padding:18px 0;font-family:Satoshi,'Segoe UI',system-ui,sans-serif;color:#c9d1d9;background:#0d1117">+  <h1 style="color:#e6edf3;font-size:26px;margin:0 0 4px">pup: the AI-driven browser</h1>+  <p style="color:#8b949e;margin:0 0 14px">A guided tour of every feature. Use your LEFT and RIGHT arrow keys (or click the edges). Each slide narrates itself; press M to mute.</p>+  <div id="stage" style="position:relative;border:1px solid #30363d;border-radius:14px;overflow:hidden;background:#161b22;cursor:pointer">+    <img id="slideimg" src="https://wiki.adom.inc/api/v1/pages/adom-desktop-puppeteer-bridge/files/slides/s1.png" style="display:block;width:100%;height:auto" alt="slide">+    <div id="zL" style="position:absolute;left:0;top:0;width:30%;height:100%"></div>+    <div id="zR" style="position:absolute;right:0;top:0;width:70%;height:100%"></div>+  </div>+  <div style="display:flex;align-items:center;gap:12px;margin-top:12px">+    <button id="prev" style="background:#161b22;border:1px solid #30363d;color:#e6edf3;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:15px">&#8592; back</button>+    <div id="dots" style="flex:1;display:flex;gap:7px;justify-content:center"></div>+    <button id="next" style="background:#00b8b1;border:1px solid #00b8b1;color:#05221f;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;font-size:15px">next &#8594;</button>+  </div>+  <p id="cap" style="text-align:center;color:#8b949e;margin-top:10px;font-size:13px"></p>+  <audio id="voice" preload="auto"></audio>+</div>+<script>+(function(){+  var N=10, i=1, muted=false;+  var BASE='https://wiki.adom.inc/api/v1/pages/adom-desktop-puppeteer-bridge/files/slides';+  var img=document.getElementById('slideimg'), voice=document.getElementById('voice');+  var dots=document.getElementById('dots'), cap=document.getElementById('cap');+  var titles=['The core goal: adom-you','Background by default','Foreground only when you ask','Favicon overlay badges','The taskbar flash','AUMID: one icon per window','Icon styles','Split or grouped','Jump lists','The live dashboard'];+  for(var k=1;k<=N;k++){var d=document.createElement('div');d.id='dot'+k;d.style.cssText='width:9px;height:9px;border-radius:50%;background:#30363d;cursor:pointer';(function(kk){d.onclick=function(){go(kk);};})(k);dots.appendChild(d);}+  // preload next image + audio for instant nav+  function preload(n){ if(n>=1&&n<=N){ (new Image()).src=BASE+'/s'+n+'.png'; } }+  function go(n){+    if(n<1)n=1; if(n>N)n=N; i=n;+    img.src=BASE+'/s'+i+'.png';+    cap.textContent='Slide '+i+' of '+N+': '+titles[i-1];+    for(var k=1;k<=N;k++){document.getElementById('dot'+k).style.background=(k===i?'#00b8b1':'#30363d');}+    if(!muted){ try{ voice.src=BASE+'/s'+i+'.mp3'; voice.play().catch(function(){}); }catch(e){} }+    preload(i+1);+  }+  document.getElementById('next').onclick=function(){go(i+1);};+  document.getElementById('prev').onclick=function(){go(i-1);};+  document.getElementById('zR').onclick=function(){go(i+1);};+  document.getElementById('zL').onclick=function(){go(i-1);};+  document.addEventListener('keydown',function(e){+    if(e.key==='ArrowRight'){go(i+1);e.preventDefault();}+    else if(e.key==='ArrowLeft'){go(i-1);e.preventDefault();}+    else if(e.key==='m'||e.key==='M'){muted=!muted; if(muted){try{voice.pause();}catch(e2){}} cap.textContent=muted?'muted (press M to unmute)':('Slide '+i+' of '+N);}+  });+  window.addEventListener('message',function(e){+    var d=e.data;+    if(d==='next')go(i+1); else if(d==='prev')go(i-1);+    else if(typeof d==='string'&&d.indexOf('goto:')===0)go(parseInt(d.slice(5),10)||1);+  });+  go(1);+})();+</script>

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯

⋯ 1 unchanged line ⋯