-
Notifications
You must be signed in to change notification settings - Fork 0
/
splitmessages.html
173 lines (162 loc) · 5.92 KB
/
splitmessages.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Don't | Split Messages</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/magic.css">
<script src="js/script.js"></script>
<!-- Open Graph meta tags -->
<meta property="og:title" content="Don't">
<meta property="og:description" content="Split Messages">
<meta property="og:image" content="https://jordy3d.github.io/files/logo.png">
<meta property="og:url" content="https://jordy3d.github.io/dont/splitmessages">
<meta property="og:type" content="website">
</head>
<body>
<header>
<div class="logo">
<h1 class="dont"><a href="index.html">Don't</a></h1>
<span>Split Messages</span>
</div>
<div class="nav"></div>
<div class="nav-toggle" onclick="toggleNav(this)"></div>
<script>loadNav();</script>
<script>checkNavFlex();</script>
</header>
<main>
<div class="content-wrapper">
<div class="content">
<div class="dont">
<h2>Don't ❌</h2>
<div class="example">
<div class="discord">
</div>
</div>
<div class="script">
<p>
Tim had to wait for Keith to finish typing everything before he could start thinking about
any
sort of response to the question.
</p>
<p>
Rather than being able to read it all at once, and not knowing
when Keith was going to stop typing, Tim had to wait for the message to finish before he
could
start thinking about it.
</p>
</div>
</div>
<div class="do">
<h2>Do ✅</h2>
<div class="example">
<div class="discord">
</div>
</div>
<div class="script">
<p>
It may seem like it takes more time to type out a longer message, but it actually takes less
time overall.
</p>
<p>
Tim can start thinking about the question as soon as he sees it, and can start
typing a response while Keith is still typing the rest of the message.
</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>Don't split your messages up and make us wait for you to finish!</p>
<p>Based on... experiencing people do this.</p>
</footer>
<script>
var dontMessages = [
// different messages: hey | so can you | like | help me with something? | I am stuck | I can't work this out
{
name: "Keith",
text: "Hey",
time: "2:15PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 1
},
{
name: "Keith",
text: "So can you",
time: "2:15PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 2
},
{
name: "Keith",
text: "Like",
time: "2:15PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 1
},
{
name: "Keith",
text: "Help me with something?",
time: "2:16PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 2
},
{
name: "Keith",
text: "I can't remember",
time: "2:17PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 2
},
{
name: "Keith",
text: "where the meeting agenda is",
time: "2:17PM",
imageUrl: "https://www.nohello.net/img/MxF06xdCHJ-128.webp",
delay: 2
},
{
name: "Tim",
text: "oh, it's on the shared drive",
time: "2:20PM",
imageUrl: "https://www.nohello.net/img/CGi-z9VgRi-128.webp",
delay: 3
}
];
var doMessages = [
{
name: "Dawn",
text: "Hey there! Can you help me with something? I can't remember where the meeting agenda is",
time: "2:15PM",
imageUrl: "https://www.nohello.net/img/4gebfK1xtc-128.webp",
delay: 4
},
{
name: "Tim",
text: "hi! it's on the shared drive",
time: "2:16PM",
imageUrl: "https://www.nohello.net/img/CGi-z9VgRi-128.webp",
delay: 3
},
{
name: "Dawn",
text: "Thanks!",
time: "2:16PM",
imageUrl: "https://www.nohello.net/img/4gebfK1xtc-128.webp",
delay: 1
},
{
name: "Tim",
text: "👌",
time: "2:16PM",
imageUrl: "https://www.nohello.net/img/CGi-z9VgRi-128.webp",
delay: 1
}
];
// call createMessages from script.js
createMessages(doMessages, dontMessages);
</script>
</body>
</html>