(function() {
const $ = i => document.getElementById(i),
w = m => new Promise(r => setTimeout(r, m)),
v = (l, t) => l.dispatchEvent(new Event(t, {bubbles: 1}));
async function f() {
let s = $('t-slider'), t = $('t-task'), c = $('qrCaptchaContainer'), d = $('t-frame-display'), i = 0, a = 0;
if (!s || !t || !c) return;
Object.assign(c.style, {height: '230px', overflow: 'visible'});
if (!d) {
d = Object.assign(document.createElement('div'), {id: 't-frame-display'});
d.style = "display:flex;justify-content:center;gap:5px;margin-top:10px;min-height:55px";
s.after(d);
}
d.innerHTML = '...'; await w(300);
while (s.disabled && a++ < 50) await w(100);
if (s.disabled) return;
for (d.innerHTML = ''; i <= s.max; i++) {
let n = i; s.value = n; v(s, 'input'); await w(110);
let g = document.createElement('div');
g.style = `width:55px;height:55px;background-image:${getComputedStyle(t).backgroundImage};background-size:cover;border:1px solid #555;cursor:pointer`;
g.onclick = () => {
s.value = n; ['input', 'change'].map(x => v(s, x));
[...d.children].map(k => k.style.borderColor = '#555');
g.style.borderColor = '#d6adad';
};
d.append(g);
}
s.value = 0; v(s, 'input');
}
document.addEventListener('click', e => ['t-load', 't-next'].includes(e.target.id) && f());
document.addEventListener('keydown', e => e.code == 'Space' && document.activeElement.id != 'qrForm' && !$('t-next')?.disabled && f());
})();
do you need more?
