74 lines
1.8 KiB
HTML
74 lines
1.8 KiB
HTML
<!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>
|
||
|