<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../_assets/fonts/Iosevka/index.css"> <style> body { background-color: #222; color: #fff; font-family: "Iosevka sbruder"; font-size: 10vh; } span { margin: 5vh 5vw; position: absolute; } span#tl { top: 0; left: 0; } span#tr { top: 0; right: 0; } span#bl { bottom: 0; left: 0; } span#br { bottom: 0; right: 0; } </style> </head> <body> <span id="tl"></span> <span id="tr"></span> <span id="bl"></span> <span id="br"></span> <script> const desiredPasswords = ['hallo', 'passwort', '12345678', 'sicher'] const initialPasswords = ['QZtn.', 'oaifraFG', 'D@A?CN;F', 'IHKYaR'] const sleep = 15 let intervals = [] function next(c, d) { if (c.length !== d.length) { return '' } for (i=0; i<c.length; i++) { if (c[i] < d[i]) { return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) + 1) + c.substr(i + 1) } else if (c[i] > d[i]) { return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) - 1) + c.substr(i + 1) } } } window.addEventListener("message", (e) => { console.log(e) if (e.data === 'slide:start') { document.querySelectorAll('span').forEach((el, idx) => intervals.push(setInterval(() => { if (el.textContent === '') { el.textContent = initialPasswords[idx] } if (el.textContent !== desiredPasswords[idx]) { el.textContent = next(el.textContent, desiredPasswords[idx]) } else { setTimeout(() => el.textContent = '', 1000) } }, sleep))) } else if (e.data === 'slide:stop') { document.querySelectorAll('span').forEach(el => el.textContent = '') intervals = intervals.filter(item => clearInterval(item)) } }); </script> </body> </html>