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>
|
|||
|
|
|