This repository has been archived by the owner on Jan 10, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (79 loc) · 2.29 KB
/
index.html
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Coming Soon</title>
<style>
* {margin: 0; padding: 0;}
body {background: black;}
canvas {display: block;}
.centered {
position: fixed;
z-index: 1;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.centered h1{
margin: 20px auto;
color: #0ff;
font-size: 42px;
text-transform: uppercase;
text-shadow: 2px 3px 4px #000;
}
.centered h2{
margin: 20px auto;
color: #fff;
font-size: 18px;
text-shadow: 2px 3px 4px #000;
}
.centered h3{
margin: 20px auto;
color: #ff6;
font-size: 18px;
text-shadow: 2px 3px 4px #000;
}
</style>
</head>
<body>
<div class="centered">
<h1>Coming Soon</h1>
<h2>Our website is currently undergoing scheduled maintenance.</h2>
<h3>We should be back shortly. Thank you for your patience.</h3>
</div>
<canvas id="c"></canvas>
<script type="text/javascript">
;((id) => {
const c = document.getElementById(id);
const ctx = c.getContext('2d');
c.height = window.innerHeight;
c.width = window.innerWidth;
const s = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const a = s.split('');
const fontSize = 10;
const columns = c.width / fontSize;
const drops = [];
for (let x = 0; x < columns; x++) {
drops[x] = 1;
}
const draw = () => {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#0F0';
ctx.font = `${fontSize} px arial`;
for (let i = 0; i < drops.length; i++) {
const text = a[Math.floor(Math.random() * a.length)];
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > c.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
})('c');
</script>
</body>
</html>