| 1 | (function(){ |
| 2 | window.HPX = window.HPX || {}; |
| 3 | window.HPX['typewriter-multi'] = function(el){ |
| 4 | if (getComputedStyle(el).position === 'static') el.style.position = 'relative'; |
| 5 | const lines = [ |
| 6 | (el.getAttribute('data-fx-line1') || '> initializing knowledge graph...'), |
| 7 | (el.getAttribute('data-fx-line2') || '> loading 28 concept nodes'), |
| 8 | (el.getAttribute('data-fx-line3') || '> agent ready. awaiting prompt_'), |
| 9 | ]; |
| 10 | const wrap = document.createElement('div'); |
| 11 | wrap.style.cssText = 'position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 48px;font:600 22px ui-monospace,Menlo,monospace;color:var(--text-1,#e7e7ef);'; |
| 12 | el.appendChild(wrap); |
| 13 | const rows = lines.map((txt) => { |
| 14 | const row = document.createElement('div'); |
| 15 | row.style.cssText = 'white-space:pre;display:flex;align-items:center;'; |
| 16 | const span = document.createElement('span'); span.textContent = ''; |
| 17 | const cur = document.createElement('span'); |
| 18 | cur.textContent = '\u2588'; |
| 19 | cur.style.cssText = 'display:inline-block;margin-left:2px;color:var(--accent,#22d3ee);animation:hpxBlink 1s steps(2) infinite;'; |
| 20 | row.appendChild(span); row.appendChild(cur); |
| 21 | wrap.appendChild(row); |
| 22 | return {row, span, txt, i:0}; |
| 23 | }); |
| 24 | // inject blink keyframes once |
| 25 | if (!document.getElementById('hpx-blink-kf')){ |
| 26 | const st = document.createElement('style'); |
| 27 | st.id = 'hpx-blink-kf'; |
| 28 | st.textContent = '@keyframes hpxBlink{50%{opacity:0}}'; |
| 29 | document.head.appendChild(st); |
| 30 | } |
| 31 | let stopped = false; |
| 32 | const speeds = [55, 70, 45]; |
| 33 | rows.forEach((r, idx) => { |
| 34 | const tick = () => { |
| 35 | if (stopped) return; |
| 36 | if (r.i < r.txt.length){ |
| 37 | r.span.textContent += r.txt[r.i++]; |
| 38 | setTimeout(tick, speeds[idx]); |
| 39 | } else { |
| 40 | setTimeout(() => { |
| 41 | if (stopped) return; |
| 42 | r.i = 0; r.span.textContent = ''; |
| 43 | tick(); |
| 44 | }, 2200); |
| 45 | } |
| 46 | }; |
| 47 | setTimeout(tick, idx*400); |
| 48 | }); |
| 49 | return { stop(){ stopped = true; if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } }; |
| 50 | }; |
| 51 | })(); |
| 52 |