greeenbeans.github.io/code.html at master · greeenbeans/greeenbeans.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
	<head>
		<title>Crack the code!</title>
	</head>
	<style>
		html,body {
			margin: 0;
			width: 100%;
			height: 100%;
			background-color: #6168d4;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		#flash {
			width: 30%;
			height: 30vw;
		}
		#tiktok {
			width: 30%;
			height: 3em;
		}
		#counting {
			font-size: 3em;
			font-weight: bold;
			color: white;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
	</style>
	<body>
		<div id="flash"></div>
		<div id="tiktok"></div>
		<div id="counting"></div>
		<script>
			const flash = document.getElementById("flash");
			const tiktok = document.getElementById("tiktok");
			const counting = document.getElementById("counting");
			const code = atob(`5a6d786862576c755a32383d`.match(/.{2}/g).map(_=>String.fromCharCode(parseInt(_, 16))).join``).split``.map(_=>_.charCodeAt(0).toString(2).padStart(8,"0")).join``;
			let index = 0;

			setInterval(function() {
				flash.style.backgroundColor = code[index] === "1" ? "white" : "black";
				tiktok.style.backgroundColor = "red";
				setTimeout(()=>{tiktok.style.backgroundColor = "transparent"}, 100);
				counting.innerText = index;
				index = (index + 1) % code.length;
			}, 1000);
		</script>
	</body>
</html>