-
Notifications
You must be signed in to change notification settings - Fork 116
/
index.html
249 lines (229 loc) · 12.5 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
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<style>
ul,
li,
p {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 200px 1fr;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}
@media (max-width: 550px) {
body {
grid-template-columns: auto 1fr;
}
}
.controls {
grid-column: 2;
grid-row: 1;
padding: 1rem;
display: flex;
justify-content: space-between;
}
button {
border-radius: 3px;
border: none;
padding: .5rem;
box-shadow: 0 3px 0 0 #0004;
cursor: pointer;
background-color: #eee;
font-size: .7rem;
}
button:hover {
background-color: #fff8d3;
}
.rooms {
grid-column: 1;
grid-row: 1 / -1;
padding: 1rem;
background: #a0d0ff;
}
.room {
padding: .5rem .5rem calc(.5rem + 3px) .5rem;
border-radius: 3px;
background: white;
margin-block-end: .5rem;
cursor: pointer;
box-shadow: inset 0px -3px 0 0 #0004;
display: flex;
gap: .5rem;
align-items: center;
}
.room::before {
content: '⚫';
}
.room:not(.active):hover {
background: #fff8d3;
}
.room.active {
background-color: #1a8cff;
font-weight: bold;
}
.room:not(:hover) .close {
visibility: hidden;
}
.room .close {
margin-inline-start: auto;
background: red;
width: 1rem;
height: 1rem;
border-radius: 50%;
font-weight: normal;
display: flex;
justify-content: center;
align-items: center;
background: #333;
color: #858585;
font-size: .7rem;
box-shadow: 0 1px 0 0 #ffffff7a;
}
@media (max-width: 550px) {
.room {
writing-mode: vertical-lr;
margin-block-end: 0;
margin-inline-end: .5rem;
}
}
.chat {
grid-row: 2;
grid-column: 2;
overflow: auto;
}
.message {
margin: 1rem;
border-radius: 3px;
display: grid;
column-gap: .5rem;
grid-template-columns: 1rem 1fr;
}
.message .photo {
grid-column: 1;
grid-row: 1 / -1;
}
.message .name {
grid-column: 2;
margin: 0;
font-weight: bold;
}
.message .text {
grid-column: 1 / -1;
margin: 0;
padding: .5rem;
border-radius: 3px 3px 0 0;
}
.message .time {
grid-column: 1 / -1;
text-align: end;
border-radius: 0 0 3px 3px;
padding: 0 .5rem .5rem .5rem;
font-size: .8rem;
color: #666;
}
</style>
<div class="controls">
<button class="high-traffic">Fast traffic</button>
<button class="low-traffic">Slow traffic</button>
<button class="stop-traffic">Stop</button>
<button class="send-message">One message</button>
</div>
<ul class="rooms">
<li class="room" data-id="r1">Room 1 <span class="close" title="Leave this room">x</span></li>
<li class="room" data-id="r2">Room 2 <span class="close" title="Leave this room">x</span></li>
<li class="room" data-id="r3">Room 3 <span class="close" title="Leave this room">x</span></li>
</ul>
<div class="chat">
</div>
<script>
function fakeColor() {
return "hsl(" + 360 * Math.random() + ',' +
(25 + 70 * Math.random()) + '%,' +
(85 + 10 * Math.random()) + '%)'
}
const fakePhotos = [
'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M72.9,65.8h-9.3l-1.1-4c7.3-4.3,11.1-12,12.1-18c3.8-0.8,5.6-3.5,5.6-8.2c0-3.6-0.8-6.1-2.6-7.6c-0.6-0.6-1.6-1.1-2.9-1.4 c0-1-0.1-1.9-0.2-3C73.1,4.3,60.1,2.5,50,2.5c-10.1,0-23.1,1.9-24.6,21c-0.1,1.1-0.1,2-0.2,3c-1.3,0.3-2.3,0.8-2.9,1.4 c-1.7,1.5-2.6,4-2.6,7.6c0,4.7,1.8,7.4,5.6,8.2c1,5.9,4.8,13.7,12.1,18l-1.1,4h-9.3c-9.2,0-16.6,7.5-16.6,16.6v9c0,3.3,2.7,6,6,6 h67.1c3.3,0,6-2.7,6-6v-9C89.5,73.3,82.1,65.8,72.9,65.8z M29.7,42.1c-0.1-1.4-1.2-2.4-2.5-2.6c-1.7-0.2-2.9-0.3-2.9-4 c0-2.9,0.7-4,1.1-4.3c0.1-0.1,0.5-0.4,1.3-0.4c0.1,1.4,0.3,2.6,0.5,3.4c0.4,1.5,2.2,1.3,2.4,0c0.2-1,1-6.8,4.2-12.8 c1.9,1.5,4.2,2.8,6.9,3.1c0.3,0,0.5-0.3,0.4-0.6c-0.5-1-0.9-2.4-1.2-3.8c2.3,2.2,6.2,5,10.9,4.7c0.3,0,0.4-0.4,0.3-0.6 c-0.6-0.8-1.1-1.9-1.5-3.1c2.7,1.6,7,3.5,11.4,2.3c0.3-0.1,0.4-0.5,0.1-0.7c-0.8-0.7-1.6-1.8-2.3-3c1.9,1,4.6,2.2,7.6,2.3 c3,5.7,3.7,11.2,3.9,12.2c0.3,1.3,2,1.5,2.4,0c0.2-0.7,0.4-2,0.5-3.4c0.9,0,1.2,0.3,1.3,0.4c0.4,0.4,1.1,1.4,1.1,4.3 c0,3.7-1.2,3.8-2.8,4c-1.4,0.1-2.4,1.2-2.6,2.5c-0.8,7.2-6.9,18.5-20.3,18.5C36.6,60.6,30.4,49.3,29.7,42.1z M50,65.1 c3.1,0,5.9-0.5,8.4-1.4l1.4,5.2c0.4,1.6-0.2,3.2-1.5,4.2l-5.9,4.4c-1.4,1.1-3.4,1.1-4.8,0L41.7,73c-1.3-1-1.9-2.6-1.5-4.2l1.4-5.1 C44.1,64.6,46.9,65.1,50,65.1z M85.1,91.5c0,0.9-0.7,1.6-1.5,1.6H16.5c-0.8,0-1.5-0.7-1.5-1.6v-9c0-6.7,5.5-12.2,12.2-12.2h8.5 c0.1,2.5,1.3,4.8,3.4,6.3l5.9,4.4c1.5,1.1,3.3,1.7,5.1,1.7c1.8,0,3.6-0.6,5.1-1.7l5.9-4.4c2.1-1.5,3.3-3.9,3.4-6.3h8.5 c6.7,0,12.2,5.5,12.2,12.2V91.5z"/></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M73.9,69.1h-9.4l-1.2-4.6c10.5,0.9,18.4,0.4,16.2-21.7c1.4-1.5,2.1-3.6,2.1-6.6c0-3.7-0.9-6.3-2.7-8 c-0.5-0.4-1.1-0.8-1.9-1.2C71.6,2.1,53.4,2.5,50.1,2.5c-3.3,0-21.6-0.3-26.9,24.6c-0.9,0.3-1.5,0.8-2,1.2c-1.8,1.6-2.7,4.2-2.7,8 c0,3,0.7,5.2,2.1,6.6c-2.2,21.9,5.7,22.5,16.1,21.6l-1.2,4.6h-9.4c-8.3,0-15.1,6.7-15.1,15v9.4c0,2.2,1.8,4,4,4h70 c2.2,0,4-1.8,4-4v-9.4C88.9,75.8,82.2,69.1,73.9,69.1z M28.8,43.2c-0.1-1.4-1.3-2.6-2.7-2.7c-1.7-0.2-3-0.3-3-4.2 c0-3,0.7-4.1,1.1-4.5c0.1-0.1,0.2-0.2,0.5-0.3c0.2,0.9,0.9,1.6,1.9,1.8c1.3,0.2,2.5-0.6,2.7-1.9c0.4-2.2,1-4.2,1.7-6.1 c3.9,0.4,9.8-0.9,15.9-3.8c3.1-1.5,5.8-3.2,8.1-4.9c0.9,0.9,1.9,1.9,3,2.8c3.9,3.2,8,5.3,11,5.8c0.7,1.9,1.4,3.9,1.8,6.2 c0.2,1.1,1.2,1.9,2.3,1.9c0.1,0,0.3,0,0.4,0c1-0.2,1.7-0.9,1.9-1.8c0.3,0.1,0.4,0.2,0.5,0.3c0.4,0.4,1.1,1.5,1.1,4.5 c0,3.9-1.3,4-3,4.2c-1.4,0.1-2.6,1.3-2.7,2.7c-0.6,6-4.4,11.4-11.1,16.1c-5.9,4.2-14.3,4.2-20.2,0C33.1,54.5,29.4,49.1,28.8,43.2z M58.7,75.5l-6.2,4.6c-1.5,1.1-3.5,1.1-5,0l-6.2-4.6c-1.4-1-2-2.8-1.5-4.4l1.6-5.8c2.7,1.2,5.6,1.8,8.6,1.8c3,0,5.9-0.7,8.6-1.8 l1.6,5.8C60.6,72.8,60,74.5,58.7,75.5z"/></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M72.9,65.8h-9l-1.4-4.8c0.5-0.4,1-0.8,1.5-1.2c5.3,0.8,10.1,1.8,11.9-0.5c2.6-3.3,2.7-9.2,2-17.2c1.5-1.4,2.3-3.6,2.3-6.6 c0-3.6-0.8-6.1-2.6-7.6c-0.3-0.3-0.8-0.6-1.3-0.8C74,4.9,58.8,2.5,50,2.5c-8.8,0-24,2.4-26.4,24.5c-0.5,0.3-1,0.6-1.3,0.9 c-1.7,1.6-2.6,4-2.6,7.6c0,3,0.8,5.2,2.3,6.6c-0.7,8-0.6,13.9,2,17.2c1.8,2.3,6.6,1.3,11.9,0.5c0.5,0.4,1,0.8,1.5,1.2L36,65.8h-9 c-9.2,0-16.7,7.5-16.7,16.7v9c0,3.3,2.7,6,6,6h67.2c3.3,0,6-2.7,6-6v-9C89.6,73.2,82.1,65.8,72.9,65.8z M59.8,67.4 c0.4,1.2-0.2,2.6-1.4,3.4l-5.9,4c-1.5,1-3.5,1-5,0l-5.9-4c-1.2-0.8-1.8-2.1-1.4-3.4l1.3-4.2C44.1,64.4,47,65,50,65 c3,0,5.9-0.7,8.5-1.8L59.8,67.4z M29.6,42.1c-0.1-1.4-1.2-2.5-2.6-2.6c-1.7-0.2-2.9-0.3-2.9-4c0-2.9,0.7-4,1.1-4.3 c0.1-0.1,0.2-0.2,0.5-0.3c0.2,0.9,0.9,1.6,1.8,1.7c1.2,0.2,2.4-0.6,2.6-1.8c0.9-5.3,1.9-9.2,3.6-12.1L35,24c0.2,0.9,1,1.5,1.9,1.5 h26.3c0.9,0,1.7-0.6,1.9-1.5l1.2-5.3c1.7,2.9,2.7,6.9,3.6,12.1c0.2,1.1,1.1,1.8,2.2,1.8c0.1,0,0.3,0,0.4,0 c0.9-0.2,1.6-0.9,1.8-1.7c0.2,0.1,0.4,0.2,0.5,0.3c0.4,0.4,1.1,1.4,1.1,4.3c0,3.7-1.2,3.8-2.9,4c-1.4,0.1-2.5,1.2-2.6,2.5 c-0.6,5.7-4.2,10.9-10.7,15.5c-5.7,4-13.7,4-19.4,0C33.8,52.9,30.2,47.7,29.6,42.1z M85.1,91.5c0,0.9-0.7,1.6-1.5,1.6H16.4 c-0.9,0-1.6-0.7-1.6-1.6v-9c0-6.7,5.5-12.2,12.2-12.2H36c0.5,1.7,1.6,3.2,3.1,4.2l5.9,4c1.5,1,3.2,1.5,5,1.5c1.7,0,3.5-0.5,5-1.5 l5.9-4c1.6-1.1,2.6-2.6,3.1-4.2h8.9c6.7,0,12.2,5.5,12.2,12.2V91.5z"/></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M72.9,70.3h-8.8c0-0.1,0-0.2-0.1-0.4l-1.5-5.7c6.8-4.9,11-10.8,12-17.2c3.8-0.8,5.6-3.5,5.6-8.2c0-3.6-0.8-6.1-2.6-7.6 c-0.7-0.6-1.9-1.3-3.5-1.5c0.1-2.6,0-5.6-0.2-9.4c-0.1-1.9-0.4-3.6-0.9-5.1c0.6-2.8,0.9-6,0.4-8.5c-0.2-0.9-1.2-1.5-2-1.1 c-0.5,0.2-1,0.4-1.6,0.5c0.1-0.8,0.1-1.6,0.1-2.4c-0.1-1-1.2-1.6-2.1-1.2c-4,1.5-10,2.9-17.6,2.9c-12.6,0-22.9,0.6-23.8,14.9 c-0.3,3.7-0.3,6.8-0.2,9.4c-1.7,0.2-2.8,0.8-3.6,1.5c-1.7,1.5-2.5,4-2.5,7.6c0,4.7,1.8,7.4,5.6,8.2c1.1,6.4,5.2,12.3,12,17.2 l-1.5,5.7c0,0.1,0,0.2-0.1,0.4h-8.7c-8,0-14.4,6.5-14.4,14.4v9c0,2.1,1.7,3.8,3.8,3.8h67c2.1,0,3.8-1.7,3.8-3.8v-9 C87.3,76.8,80.8,70.3,72.9,70.3z M29.7,45.4c-0.1-1.4-1.2-2.4-2.5-2.6c-1.7-0.2-2.9-0.3-2.9-4c0-2.9,0.7-3.9,1.1-4.3 c0.1-0.1,0.5-0.4,1.3-0.4c0.1,1.4,0.3,2.6,0.5,3.4c0.4,1.5,4.3,1.4,4.5,0.1c0.2-1.1-0.7-8.6,2.9-15.3c3.7,1.5,9.3,2.5,15.5,2.5 c6.2,0,11.8-1,15.5-2.5c3.5,6.7,2.7,14.2,2.8,15.3c0.2,1.3,4.2,1.4,4.5-0.1c0.2-0.7,0.3-2,0.5-3.4c0.8,0,1.2,0.3,1.3,0.4 c0.4,0.4,1.1,1.4,1.1,4.3c0,3.7-1.2,3.8-2.8,4c-1.4,0.1-2.4,1.2-2.6,2.5c-0.6,5.7-4.2,10.9-10.6,15.4c-5.7,4-13.7,4-19.3,0 C33.9,56.3,30.3,51.1,29.7,45.4z M58.3,75.3l-5.9,4.4c-1.4,1.1-3.4,1.1-4.8,0l-5.9-4.4c-1.3-1-1.9-2.6-1.5-4.2l1.2-4.6 c2.7,1.2,5.6,1.8,8.5,1.8s5.9-0.7,8.5-1.8l1.2,4.6C60.2,72.7,59.6,74.3,58.3,75.3z"/></svg>',
];
const fakeNames = [
"Danas Barkus",
"Hannah Haynes",
"Vladimir Zeman",
"Diane Gabriene",
"Amelie Garner",
"Joyikutty Thankachan",
"Leela Parameswaran",
"Ahmad Hakiki",
"Zuzana Polaskova",
"Heidi Liew"
];
const fakeTexts = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"Phasellus in magna nec est finibus consequat",
"Duis dolor est, lacinia in sollicitudin at, porta feugiat eros",
"Ut in erat sed metus aliquet egestas pretium eget purus",
"Donec quis enim mauris",
"Aenean vehicula hendrerit mauris vitae tristique",
"Proin massa magna, tristique ac eros sed, varius ullamcorper dui",
"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas",
"Nunc molestie pulvinar ex vel congue",
"Duis consectetur faucibus arcu, vitae iaculis libero egestas quis",
"Nunc hendrerit velit ligula, non faucibus ligula facilisis ac",
"Integer sapien metus, consectetur et fringilla sit amet, bibendum id nisi",
"Donec sed imperdiet tellus",
"Sed aliquam eleifend massa, ut lobortis erat",
"Vestibulum vitae lacus ut urna gravida fringilla ut a nibh",
"Aenean pellentesque, dui at aliquet pharetra, est ligula sodales ligula, ut dignissim magna magna quis libero",
"Pellentesque pellentesque semper ex vitae congue",
"Phasellus eu accumsan orci",
"Cras posuere felis augue, ac convallis sem rutrum in",
"Nam at rhoncus nulla",
"Praesent ac laoreet enim",
"Duis posuere lacus dui, a iaculis mauris lobortis vel",
"Suspendisse posuere lorem id ex feugiat, ut volutpat erat imperdiet",
"Mauris ut tempus orci",
"Quisque luctus ligula sit amet metus sodales, vel malesuada tellus iaculis",
"Interdum et malesuada fames ac ante ipsum primis in faucibus",
"Pellentesque elementum gravida sem, in tempus risus maximus non",
"In ligula sem, placerat quis pulvinar eget, sodales non metus",
"Cras tincidunt nibh vitae libero egestas vehicula",
"Nullam aliquet elit nec posuere egestas",
"Mauris semper, nunc in auctor sagittis, nunc turpis tristique nisi, id aliquet enim augue ac eros",
"Nulla facilisi",
"Sed in lorem odio",
"Cras aliquet est vestibulum erat varius, commodo malesuada eros tempor",
"Ut eu justo mauris",
"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus",
"Nulla iaculis, lectus vitae malesuada dictum, ipsum nisi consequat enim, eu blandit ligula lectus ut ligula",
"Aliquam placerat mauris a tellus aliquam, sit amet rutrum sem ultricies",
"Sed pharetra pulvinar feugiat",
"Sed dapibus justo sit amet dui convallis auctor",
"Proin efficitur hendrerit purus at molestie",
"Cras non metus in lectus rhoncus suscipit",
"Curabitur lacinia nulla quis nisi rhoncus, in cursus nunc pretium",
"Suspendisse risus risus, venenatis in sagittis a, mollis condimentum odio",
"Interdum et malesuada fames ac ante ipsum primis in faucibus",
"Duis orci odio, cursus nec risus in, tincidunt dignissim arcu",
"Donec tempor dui purus, in malesuada dolor tristique a",
"Curabitur eget urna et justo faucibus dapibus at in justo",
"Vivamus ut lorem purus",
"Maecenas odio arcu, iaculis at est eget, venenatis commodo tellus",
"Aenean ornare justo est, in volutpat metus lacinia eu",
"Cras mollis ex vitae tempus posuere",
"Duis molestie cursus ex, in tristique mi pulvinar sit amet"
];
</script>
<script src="room.js"></script>
<script src="chat.js"></script>