-
Notifications
You must be signed in to change notification settings - Fork 7
/
bentleychat.html
84 lines (82 loc) · 2.16 KB
/
bentleychat.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
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bentley Chat</title>
</head>
<body>
<div id=messages>
</div>
<script type=module>
import choc, {set_content, DOM, on} from "https://rosuav.github.io/choc/factory.js";
const {DIV, SPAN} = choc; //autoimport
let target_time = +new Date + 300000; //Five minute timer. If you can set this to an absolute time point, it'll be more reliable.
let message_gap = 5000;
let messages = [];
switch (location.hash) {
case "#start":
messages = [
"thanks for being here!",
"we're starting soon! promise ♥~",
];
break;
case "#brb":
target_time = +new Date + 600000; //BRB screen counts down ten minutes
messages = [
"We'll be right back",
"Drink some water and get comfy ♥",
"We're so happy you're here!",
"Not too much longer now~",
];
break;
default: break;
}
messages.push(SPAN({id: "countdown"}));
let delay = -message_gap;
set_content("#messages", messages.map(m => DIV({"data-start": delay += message_gap}, m)));
function anim(el) {
el.classList.add("visible");
setTimeout(() => el.classList.remove("visible"), 25000); //This is how long each thing is readable
}
function animate() {
document.querySelectorAll("[data-start]").forEach(
el => setTimeout(anim, +el.dataset.start, el)
);
}
animate();
setInterval(animate, 25000 + delay); //This is how frequently the entire thing cycles
setInterval(() => {
let sec = Math.floor((target_time - +new Date) / 1000);
if (sec < 0) sec = 0;
const min = Math.floor(sec / 60); sec %= 60;
set_content("#countdown", ("0" + min).slice(-2) + ":" + ("0" + sec).slice(-2));
}, 1000);
</script>
<style>
* {box-sizing: border-box;}
#messages {
width: 300px; height: 400px;
display: flex;
flex-direction: column;
justify-content: end;
padding-left: 100px;
overflow: hidden;
font-family: "Odin Rounded", sans-serif;
}
#messages div {
background: #9cc497;
color: white;
margin: 0.5em;
border-radius: 10px;
padding: 0.5em;
transition: all 0.5s ease, transform 1s cubic-bezier(0.175, 0.885, 0.8, 1.1);
}
#messages div:not(.visible) {
visibility: hidden;
height: 0; margin: 0; padding: 0;
transform: translate(0, 200px);
transition: all 0s;
}
</style>
</body>
</html>