webchat-irc 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/package.json +1 -1
- package/public/embed.html +1 -438
- package/public/embedstyle.css +436 -0
- package/public/index.html +8 -15
- package/public/demo.html +0 -178
package/README.md
CHANGED
|
@@ -66,7 +66,7 @@ Once the server is running, embed the widget on any page using an iframe:
|
|
|
66
66
|
</iframe>
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
The `/embed.html` widget includes tabbed panels for **Chat** and **Guestbook
|
|
69
|
+
The `/embed.html` widget includes tabbed panels for **Chat** and **Guestbook**.
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
## Development
|
|
@@ -86,5 +86,4 @@ npm start
|
|
|
86
86
|
| Route | Description |
|
|
87
87
|
|---|---|
|
|
88
88
|
| `/` | Landing page |
|
|
89
|
-
| `/
|
|
90
|
-
| `/embed.html` | Embeddable widget (chat + guestbook tabs) |
|
|
89
|
+
| `/embed.html` | Embeddable widget (chat + guestbook tabs) (This also serves as a live demo!) |
|
package/package.json
CHANGED
package/public/embed.html
CHANGED
|
@@ -5,444 +5,7 @@
|
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
7
|
<title>webchatIRC</title>
|
|
8
|
-
<
|
|
9
|
-
* {
|
|
10
|
-
font-family: Georgia, 'Times New Roman', serif;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
margin: 0;
|
|
13
|
-
padding: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
html,
|
|
17
|
-
body {
|
|
18
|
-
height: 100%;
|
|
19
|
-
background: #1a1a1e;
|
|
20
|
-
overflow: hidden;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.embed-wrapper {
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
height: 100%;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
.tab-bar {
|
|
31
|
-
display: flex;
|
|
32
|
-
background: #111114;
|
|
33
|
-
border-bottom: 2px solid #333;
|
|
34
|
-
flex-shrink: 0;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.tab-btn {
|
|
38
|
-
flex: 1;
|
|
39
|
-
padding: 10px 0;
|
|
40
|
-
text-align: center;
|
|
41
|
-
font-family: Georgia, serif;
|
|
42
|
-
font-size: 14px;
|
|
43
|
-
font-weight: bold;
|
|
44
|
-
color: #888;
|
|
45
|
-
background: transparent;
|
|
46
|
-
border: none;
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
transition: color 0.2s, border-bottom 0.2s;
|
|
49
|
-
border-bottom: 2px solid transparent;
|
|
50
|
-
margin-bottom: -2px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.tab-btn:hover {
|
|
54
|
-
color: #bbb;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.tab-btn.active {
|
|
58
|
-
color: #fff;
|
|
59
|
-
border-bottom-color: #0069d9;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.tab-panel {
|
|
63
|
-
display: none;
|
|
64
|
-
flex-direction: column;
|
|
65
|
-
flex: 1;
|
|
66
|
-
overflow: hidden;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.tab-panel.active {
|
|
70
|
-
display: flex;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.username-overlay {
|
|
74
|
-
position: absolute;
|
|
75
|
-
inset: 0;
|
|
76
|
-
z-index: 10;
|
|
77
|
-
display: flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
background: rgba(20, 17, 25, 0.92);
|
|
81
|
-
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.username-overlay.hidden {
|
|
85
|
-
opacity: 0;
|
|
86
|
-
visibility: hidden;
|
|
87
|
-
pointer-events: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.username-form {
|
|
91
|
-
text-align: center;
|
|
92
|
-
color: #fff;
|
|
93
|
-
padding: 24px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.username-form h2 {
|
|
97
|
-
margin: 0 0 4px;
|
|
98
|
-
font-size: 22px;
|
|
99
|
-
color: #fff;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.form-subtitle {
|
|
103
|
-
color: #999;
|
|
104
|
-
margin: 0 0 16px;
|
|
105
|
-
font-size: 13px;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.username-input {
|
|
109
|
-
display: block;
|
|
110
|
-
width: 220px;
|
|
111
|
-
margin: 0 auto 12px;
|
|
112
|
-
padding: 9px 12px;
|
|
113
|
-
font-size: 15px;
|
|
114
|
-
font-family: Georgia, serif;
|
|
115
|
-
border: 2px solid #555;
|
|
116
|
-
border-radius: 4px;
|
|
117
|
-
background: #2a2a2e;
|
|
118
|
-
color: #fff;
|
|
119
|
-
outline: none;
|
|
120
|
-
transition: border-color 0.2s ease;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.username-input:focus {
|
|
124
|
-
border-color: #0069d9;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.username-input::placeholder {
|
|
128
|
-
color: #777;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.btn {
|
|
132
|
-
padding: 9px 22px;
|
|
133
|
-
font-family: Georgia, serif;
|
|
134
|
-
font-size: 14px;
|
|
135
|
-
font-weight: bold;
|
|
136
|
-
border: none;
|
|
137
|
-
border-radius: 4px;
|
|
138
|
-
cursor: pointer;
|
|
139
|
-
color: #fff;
|
|
140
|
-
background: #0069d9;
|
|
141
|
-
transition: background 0.2s ease;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.btn:hover {
|
|
145
|
-
background: #0053aa;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.chat-header {
|
|
149
|
-
display: flex;
|
|
150
|
-
justify-content: space-between;
|
|
151
|
-
align-items: center;
|
|
152
|
-
padding: 8px 12px 4px;
|
|
153
|
-
background: rgba(20, 17, 25, 0.95);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.chat-header-left {
|
|
157
|
-
display: flex;
|
|
158
|
-
align-items: baseline;
|
|
159
|
-
gap: 10px;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.chat-header-right {
|
|
163
|
-
display: flex;
|
|
164
|
-
flex-direction: column;
|
|
165
|
-
align-items: flex-end;
|
|
166
|
-
gap: 2px;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.chat-header h1 {
|
|
170
|
-
color: #fff;
|
|
171
|
-
font-size: 16px;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.channel-label {
|
|
175
|
-
color: #888;
|
|
176
|
-
font-size: 12px;
|
|
177
|
-
font-style: italic;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.server-label {
|
|
181
|
-
color: #aaa;
|
|
182
|
-
font-size: 11px;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.users-label {
|
|
186
|
-
color: #0069d9;
|
|
187
|
-
font-size: 11px;
|
|
188
|
-
font-weight: bold;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.divider {
|
|
192
|
-
border: 1px solid #333;
|
|
193
|
-
margin: 0 12px;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
#log {
|
|
197
|
-
flex: 1;
|
|
198
|
-
overflow-y: auto;
|
|
199
|
-
scroll-behavior: smooth;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
#chat-list {
|
|
203
|
-
list-style-type: none;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
#chat-list>li {
|
|
207
|
-
padding: 5px 10px;
|
|
208
|
-
font-size: 13px;
|
|
209
|
-
word-wrap: break-word;
|
|
210
|
-
color: #ddd;
|
|
211
|
-
background: #242424;
|
|
212
|
-
line-height: 1.5;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
#chat-list>li:nth-child(odd) {
|
|
216
|
-
background: #2c2c2c;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.timestamp {
|
|
220
|
-
color: #666;
|
|
221
|
-
font-size: 11px;
|
|
222
|
-
margin-right: 4px;
|
|
223
|
-
font-family: 'Courier New', monospace;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.domain {
|
|
227
|
-
color: #7eb8da;
|
|
228
|
-
font-weight: bold;
|
|
229
|
-
font-size: 12px;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.nick {
|
|
233
|
-
color: #c5c5c5;
|
|
234
|
-
font-weight: bold;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.text {
|
|
238
|
-
color: #e0e0e0;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.self-msg {
|
|
242
|
-
border-left: 3px solid #0069d9;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.self-msg .nick {
|
|
246
|
-
color: #8ab4f8;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.system-msg {
|
|
250
|
-
background: transparent !important;
|
|
251
|
-
padding: 3px 10px !important;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.system-text {
|
|
255
|
-
color: #777;
|
|
256
|
-
font-style: italic;
|
|
257
|
-
font-size: 12px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.chatbox-wrapper {
|
|
261
|
-
display: flex;
|
|
262
|
-
border-top: 1px solid #333;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.chatbox {
|
|
266
|
-
flex: 1;
|
|
267
|
-
padding: 10px 12px;
|
|
268
|
-
font-size: 14px;
|
|
269
|
-
font-family: Georgia, serif;
|
|
270
|
-
border: none;
|
|
271
|
-
outline: none;
|
|
272
|
-
background: #333;
|
|
273
|
-
color: #fff;
|
|
274
|
-
min-height: 40px;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.chatbox::placeholder {
|
|
278
|
-
color: #777;
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.chatbox:focus {
|
|
282
|
-
background: #3a3a3e;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.send-btn {
|
|
286
|
-
padding: 10px 16px;
|
|
287
|
-
background: #0069d9;
|
|
288
|
-
color: #fff;
|
|
289
|
-
border: none;
|
|
290
|
-
font-family: Georgia, serif;
|
|
291
|
-
font-size: 14px;
|
|
292
|
-
font-weight: bold;
|
|
293
|
-
cursor: pointer;
|
|
294
|
-
transition: background 0.2s ease;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
.send-btn:hover {
|
|
298
|
-
background: #0053aa;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
.send-btn:disabled {
|
|
302
|
-
background: #555;
|
|
303
|
-
cursor: default;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
/* Guestbook Stuff */
|
|
307
|
-
|
|
308
|
-
.gb-panel-inner {
|
|
309
|
-
flex: 1;
|
|
310
|
-
overflow-y: auto;
|
|
311
|
-
padding: 14px;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.gb-sign-form {
|
|
315
|
-
background: #222226;
|
|
316
|
-
border: 1px solid #444;
|
|
317
|
-
border-radius: 6px;
|
|
318
|
-
padding: 14px;
|
|
319
|
-
margin-bottom: 14px;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.gb-sign-form.signed {
|
|
323
|
-
text-align: center;
|
|
324
|
-
color: #8ab4f8;
|
|
325
|
-
font-style: italic;
|
|
326
|
-
padding: 18px;
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.gb-sign-form label {
|
|
330
|
-
display: block;
|
|
331
|
-
color: #ccc;
|
|
332
|
-
font-size: 13px;
|
|
333
|
-
margin-bottom: 3px;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
.gb-sign-form input,
|
|
337
|
-
.gb-sign-form textarea {
|
|
338
|
-
width: 100%;
|
|
339
|
-
padding: 8px 10px;
|
|
340
|
-
font-size: 14px;
|
|
341
|
-
font-family: Georgia, serif;
|
|
342
|
-
border: 2px solid #555;
|
|
343
|
-
border-radius: 4px;
|
|
344
|
-
background: #2a2a2e;
|
|
345
|
-
color: #fff;
|
|
346
|
-
outline: none;
|
|
347
|
-
margin-bottom: 10px;
|
|
348
|
-
transition: border-color 0.2s ease;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.gb-sign-form input:focus,
|
|
352
|
-
.gb-sign-form textarea:focus {
|
|
353
|
-
border-color: #0069d9;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.gb-sign-form input::placeholder,
|
|
357
|
-
.gb-sign-form textarea::placeholder {
|
|
358
|
-
color: #777;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
.gb-sign-form textarea {
|
|
362
|
-
resize: vertical;
|
|
363
|
-
min-height: 50px;
|
|
364
|
-
max-height: 100px;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
.gb-sign-form button {
|
|
368
|
-
padding: 8px 20px;
|
|
369
|
-
background: #0069d9;
|
|
370
|
-
color: #fff;
|
|
371
|
-
border: none;
|
|
372
|
-
border-radius: 4px;
|
|
373
|
-
font-family: Georgia, serif;
|
|
374
|
-
font-size: 14px;
|
|
375
|
-
font-weight: bold;
|
|
376
|
-
cursor: pointer;
|
|
377
|
-
transition: background 0.2s ease;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.gb-sign-form button:hover {
|
|
381
|
-
background: #0053aa;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.gb-error {
|
|
385
|
-
color: #e74c3c;
|
|
386
|
-
font-size: 12px;
|
|
387
|
-
margin-bottom: 8px;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
.gb-entries {
|
|
391
|
-
list-style: none;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
.gb-entry {
|
|
395
|
-
background: #222226;
|
|
396
|
-
border: 1px solid #3a3a3a;
|
|
397
|
-
border-radius: 5px;
|
|
398
|
-
padding: 10px 12px;
|
|
399
|
-
margin-bottom: 8px;
|
|
400
|
-
transition: border-color 0.2s;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
.gb-entry:hover {
|
|
404
|
-
border-color: #0069d9;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.gb-entry-header {
|
|
408
|
-
display: flex;
|
|
409
|
-
justify-content: space-between;
|
|
410
|
-
align-items: baseline;
|
|
411
|
-
margin-bottom: 4px;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
.gb-entry-name {
|
|
415
|
-
color: #8ab4f8;
|
|
416
|
-
font-weight: bold;
|
|
417
|
-
font-size: 14px;
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.gb-entry-date {
|
|
421
|
-
color: #666;
|
|
422
|
-
font-size: 11px;
|
|
423
|
-
font-family: 'Courier New', monospace;
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
.gb-entry-msg {
|
|
427
|
-
color: #ddd;
|
|
428
|
-
font-size: 13px;
|
|
429
|
-
line-height: 1.4;
|
|
430
|
-
word-wrap: break-word;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
.gb-entry-domain {
|
|
434
|
-
color: #7eb8da;
|
|
435
|
-
font-size: 11px;
|
|
436
|
-
margin-top: 4px;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.gb-empty {
|
|
440
|
-
text-align: center;
|
|
441
|
-
color: #666;
|
|
442
|
-
font-style: italic;
|
|
443
|
-
padding: 30px 0;
|
|
444
|
-
}
|
|
445
|
-
</style>
|
|
8
|
+
<link rel="stylesheet" href="embedstyle.css">
|
|
446
9
|
</head>
|
|
447
10
|
|
|
448
11
|
<body>
|
|
@@ -0,0 +1,436 @@
|
|
|
1
|
+
* {
|
|
2
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
html,
|
|
9
|
+
body {
|
|
10
|
+
height: 100%;
|
|
11
|
+
background: #1a1a1e;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.embed-wrapper {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
height: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
.tab-bar {
|
|
23
|
+
display: flex;
|
|
24
|
+
background: #111114;
|
|
25
|
+
border-bottom: 2px solid #333;
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.tab-btn {
|
|
30
|
+
flex: 1;
|
|
31
|
+
padding: 10px 0;
|
|
32
|
+
text-align: center;
|
|
33
|
+
font-family: Georgia, serif;
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
font-weight: bold;
|
|
36
|
+
color: #888;
|
|
37
|
+
background: transparent;
|
|
38
|
+
border: none;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
transition: color 0.2s, border-bottom 0.2s;
|
|
41
|
+
border-bottom: 2px solid transparent;
|
|
42
|
+
margin-bottom: -2px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.tab-btn:hover {
|
|
46
|
+
color: #bbb;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.tab-btn.active {
|
|
50
|
+
color: #fff;
|
|
51
|
+
border-bottom-color: #0069d9;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tab-panel {
|
|
55
|
+
display: none;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
flex: 1;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.tab-panel.active {
|
|
62
|
+
display: flex;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.username-overlay {
|
|
66
|
+
position: absolute;
|
|
67
|
+
inset: 0;
|
|
68
|
+
z-index: 10;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
background: rgba(20, 17, 25, 0.92);
|
|
73
|
+
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.username-overlay.hidden {
|
|
77
|
+
opacity: 0;
|
|
78
|
+
visibility: hidden;
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.username-form {
|
|
83
|
+
text-align: center;
|
|
84
|
+
color: #fff;
|
|
85
|
+
padding: 24px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.username-form h2 {
|
|
89
|
+
margin: 0 0 4px;
|
|
90
|
+
font-size: 22px;
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.form-subtitle {
|
|
95
|
+
color: #999;
|
|
96
|
+
margin: 0 0 16px;
|
|
97
|
+
font-size: 13px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.username-input {
|
|
101
|
+
display: block;
|
|
102
|
+
width: 220px;
|
|
103
|
+
margin: 0 auto 12px;
|
|
104
|
+
padding: 9px 12px;
|
|
105
|
+
font-size: 15px;
|
|
106
|
+
font-family: Georgia, serif;
|
|
107
|
+
border: 2px solid #555;
|
|
108
|
+
border-radius: 4px;
|
|
109
|
+
background: #2a2a2e;
|
|
110
|
+
color: #fff;
|
|
111
|
+
outline: none;
|
|
112
|
+
transition: border-color 0.2s ease;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.username-input:focus {
|
|
116
|
+
border-color: #0069d9;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.username-input::placeholder {
|
|
120
|
+
color: #777;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.btn {
|
|
124
|
+
padding: 9px 22px;
|
|
125
|
+
font-family: Georgia, serif;
|
|
126
|
+
font-size: 14px;
|
|
127
|
+
font-weight: bold;
|
|
128
|
+
border: none;
|
|
129
|
+
border-radius: 4px;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
color: #fff;
|
|
132
|
+
background: #0069d9;
|
|
133
|
+
transition: background 0.2s ease;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.btn:hover {
|
|
137
|
+
background: #0053aa;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.chat-header {
|
|
141
|
+
display: flex;
|
|
142
|
+
justify-content: space-between;
|
|
143
|
+
align-items: center;
|
|
144
|
+
padding: 8px 12px 4px;
|
|
145
|
+
background: rgba(20, 17, 25, 0.95);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.chat-header-left {
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: baseline;
|
|
151
|
+
gap: 10px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.chat-header-right {
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-direction: column;
|
|
157
|
+
align-items: flex-end;
|
|
158
|
+
gap: 2px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.chat-header h1 {
|
|
162
|
+
color: #fff;
|
|
163
|
+
font-size: 16px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.channel-label {
|
|
167
|
+
color: #888;
|
|
168
|
+
font-size: 12px;
|
|
169
|
+
font-style: italic;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.server-label {
|
|
173
|
+
color: #aaa;
|
|
174
|
+
font-size: 11px;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.users-label {
|
|
178
|
+
color: #0069d9;
|
|
179
|
+
font-size: 11px;
|
|
180
|
+
font-weight: bold;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.divider {
|
|
184
|
+
border: 1px solid #333;
|
|
185
|
+
margin: 0 12px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
#log {
|
|
189
|
+
flex: 1;
|
|
190
|
+
overflow-y: auto;
|
|
191
|
+
scroll-behavior: smooth;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
#chat-list {
|
|
195
|
+
list-style-type: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
#chat-list>li {
|
|
199
|
+
padding: 5px 10px;
|
|
200
|
+
font-size: 13px;
|
|
201
|
+
word-wrap: break-word;
|
|
202
|
+
color: #ddd;
|
|
203
|
+
background: #242424;
|
|
204
|
+
line-height: 1.5;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
#chat-list>li:nth-child(odd) {
|
|
208
|
+
background: #2c2c2c;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.timestamp {
|
|
212
|
+
color: #666;
|
|
213
|
+
font-size: 11px;
|
|
214
|
+
margin-right: 4px;
|
|
215
|
+
font-family: 'Courier New', monospace;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.domain {
|
|
219
|
+
color: #7eb8da;
|
|
220
|
+
font-weight: bold;
|
|
221
|
+
font-size: 12px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.nick {
|
|
225
|
+
color: #c5c5c5;
|
|
226
|
+
font-weight: bold;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.text {
|
|
230
|
+
color: #e0e0e0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.self-msg {
|
|
234
|
+
border-left: 3px solid #0069d9;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.self-msg .nick {
|
|
238
|
+
color: #8ab4f8;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.system-msg {
|
|
242
|
+
background: transparent !important;
|
|
243
|
+
padding: 3px 10px !important;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.system-text {
|
|
247
|
+
color: #777;
|
|
248
|
+
font-style: italic;
|
|
249
|
+
font-size: 12px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.chatbox-wrapper {
|
|
253
|
+
display: flex;
|
|
254
|
+
border-top: 1px solid #333;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.chatbox {
|
|
258
|
+
flex: 1;
|
|
259
|
+
padding: 10px 12px;
|
|
260
|
+
font-size: 14px;
|
|
261
|
+
font-family: Georgia, serif;
|
|
262
|
+
border: none;
|
|
263
|
+
outline: none;
|
|
264
|
+
background: #333;
|
|
265
|
+
color: #fff;
|
|
266
|
+
min-height: 40px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.chatbox::placeholder {
|
|
270
|
+
color: #777;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.chatbox:focus {
|
|
274
|
+
background: #3a3a3e;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.send-btn {
|
|
278
|
+
padding: 10px 16px;
|
|
279
|
+
background: #0069d9;
|
|
280
|
+
color: #fff;
|
|
281
|
+
border: none;
|
|
282
|
+
font-family: Georgia, serif;
|
|
283
|
+
font-size: 14px;
|
|
284
|
+
font-weight: bold;
|
|
285
|
+
cursor: pointer;
|
|
286
|
+
transition: background 0.2s ease;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.send-btn:hover {
|
|
290
|
+
background: #0053aa;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.send-btn:disabled {
|
|
294
|
+
background: #555;
|
|
295
|
+
cursor: default;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Guestbook Stuff */
|
|
299
|
+
|
|
300
|
+
.gb-panel-inner {
|
|
301
|
+
flex: 1;
|
|
302
|
+
overflow-y: auto;
|
|
303
|
+
padding: 14px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.gb-sign-form {
|
|
307
|
+
background: #222226;
|
|
308
|
+
border: 1px solid #444;
|
|
309
|
+
border-radius: 6px;
|
|
310
|
+
padding: 14px;
|
|
311
|
+
margin-bottom: 14px;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.gb-sign-form.signed {
|
|
315
|
+
text-align: center;
|
|
316
|
+
color: #8ab4f8;
|
|
317
|
+
font-style: italic;
|
|
318
|
+
padding: 18px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.gb-sign-form label {
|
|
322
|
+
display: block;
|
|
323
|
+
color: #ccc;
|
|
324
|
+
font-size: 13px;
|
|
325
|
+
margin-bottom: 3px;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.gb-sign-form input,
|
|
329
|
+
.gb-sign-form textarea {
|
|
330
|
+
width: 100%;
|
|
331
|
+
padding: 8px 10px;
|
|
332
|
+
font-size: 14px;
|
|
333
|
+
font-family: Georgia, serif;
|
|
334
|
+
border: 2px solid #555;
|
|
335
|
+
border-radius: 4px;
|
|
336
|
+
background: #2a2a2e;
|
|
337
|
+
color: #fff;
|
|
338
|
+
outline: none;
|
|
339
|
+
margin-bottom: 10px;
|
|
340
|
+
transition: border-color 0.2s ease;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.gb-sign-form input:focus,
|
|
344
|
+
.gb-sign-form textarea:focus {
|
|
345
|
+
border-color: #0069d9;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.gb-sign-form input::placeholder,
|
|
349
|
+
.gb-sign-form textarea::placeholder {
|
|
350
|
+
color: #777;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.gb-sign-form textarea {
|
|
354
|
+
resize: vertical;
|
|
355
|
+
min-height: 50px;
|
|
356
|
+
max-height: 100px;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.gb-sign-form button {
|
|
360
|
+
padding: 8px 20px;
|
|
361
|
+
background: #0069d9;
|
|
362
|
+
color: #fff;
|
|
363
|
+
border: none;
|
|
364
|
+
border-radius: 4px;
|
|
365
|
+
font-family: Georgia, serif;
|
|
366
|
+
font-size: 14px;
|
|
367
|
+
font-weight: bold;
|
|
368
|
+
cursor: pointer;
|
|
369
|
+
transition: background 0.2s ease;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.gb-sign-form button:hover {
|
|
373
|
+
background: #0053aa;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.gb-error {
|
|
377
|
+
color: #e74c3c;
|
|
378
|
+
font-size: 12px;
|
|
379
|
+
margin-bottom: 8px;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.gb-entries {
|
|
383
|
+
list-style: none;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.gb-entry {
|
|
387
|
+
background: #222226;
|
|
388
|
+
border: 1px solid #3a3a3a;
|
|
389
|
+
border-radius: 5px;
|
|
390
|
+
padding: 10px 12px;
|
|
391
|
+
margin-bottom: 8px;
|
|
392
|
+
transition: border-color 0.2s;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.gb-entry:hover {
|
|
396
|
+
border-color: #0069d9;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.gb-entry-header {
|
|
400
|
+
display: flex;
|
|
401
|
+
justify-content: space-between;
|
|
402
|
+
align-items: baseline;
|
|
403
|
+
margin-bottom: 4px;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.gb-entry-name {
|
|
407
|
+
color: #8ab4f8;
|
|
408
|
+
font-weight: bold;
|
|
409
|
+
font-size: 14px;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.gb-entry-date {
|
|
413
|
+
color: #666;
|
|
414
|
+
font-size: 11px;
|
|
415
|
+
font-family: 'Courier New', monospace;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.gb-entry-msg {
|
|
419
|
+
color: #ddd;
|
|
420
|
+
font-size: 13px;
|
|
421
|
+
line-height: 1.4;
|
|
422
|
+
word-wrap: break-word;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.gb-entry-domain {
|
|
426
|
+
color: #7eb8da;
|
|
427
|
+
font-size: 11px;
|
|
428
|
+
margin-top: 4px;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.gb-empty {
|
|
432
|
+
text-align: center;
|
|
433
|
+
color: #666;
|
|
434
|
+
font-style: italic;
|
|
435
|
+
padding: 30px 0;
|
|
436
|
+
}
|
package/public/index.html
CHANGED
|
@@ -15,8 +15,7 @@
|
|
|
15
15
|
<a class="brand" href="#">webchat IRC</a>
|
|
16
16
|
<ul class="nav">
|
|
17
17
|
<li class="active"><a href="#">Home</a></li>
|
|
18
|
-
<li><a href="
|
|
19
|
-
<li><a href="/demo.html">Demo</a></li>
|
|
18
|
+
<li><a href="/embed.html">Live Demo</a></li>
|
|
20
19
|
</ul>
|
|
21
20
|
</div>
|
|
22
21
|
</div>
|
|
@@ -25,8 +24,7 @@
|
|
|
25
24
|
<div class="container">
|
|
26
25
|
<div class="hero-unit">
|
|
27
26
|
<h1>Bring the old web back</h1>
|
|
28
|
-
<p>webchat IRC aims to bring people together. Set up a webchat instance on your website today!
|
|
29
|
-
required. </p>
|
|
27
|
+
<p>webchat IRC aims to bring people together. Set up a webchat instance on your website today! </p>
|
|
30
28
|
<p><a class="btn primary large">Get Started »</a></p>
|
|
31
29
|
</div>
|
|
32
30
|
|
|
@@ -34,31 +32,26 @@
|
|
|
34
32
|
<div class="span-one-third">
|
|
35
33
|
<h2>Why webchat IRC?</h2>
|
|
36
34
|
<p>Allow people from different websites to communicate all in one place. Keep your niche communities closer by
|
|
37
|
-
adopting
|
|
38
|
-
<p><a class="btn" href="
|
|
35
|
+
adopting webchatIRC to your site!</p>
|
|
36
|
+
<p><a class="btn" href="/demo.html">See the Demo »</a></p>
|
|
39
37
|
</div>
|
|
40
38
|
<div class="span-one-third">
|
|
41
39
|
<h2>Guestbook mode</h2>
|
|
42
40
|
<p>For people hosting a webchat IRC instance, you can enable a guestbook channel which allows users on your
|
|
43
|
-
website to sign their name and add a little message that can only be sent once. </p>
|
|
41
|
+
website to sign their name and add a little message that can only be sent once and seen by everyone. </p>
|
|
44
42
|
<p><a class="btn" href="#">View details »</a></p>
|
|
45
43
|
</div>
|
|
46
44
|
<div class="span-one-third">
|
|
47
45
|
<h2>Easy to install</h2>
|
|
48
|
-
<p>
|
|
46
|
+
<p>webchatIRC was made with simplicity in mind. For an advanced user, it should take 10 minutes maximum to setup
|
|
49
47
|
an instance, and you can customize everything to your liking.</p>
|
|
50
|
-
<p><a class="btn" href="
|
|
48
|
+
<p><a class="btn" href="https://www.npmjs.com/package/webchat-irc">View on NPM »</a></p>
|
|
51
49
|
</div>
|
|
52
50
|
</div>
|
|
53
|
-
|
|
54
51
|
<footer>
|
|
55
|
-
<p>Open source on <b><a href="https://github.com/byeoon/webchatIRC">GitHub</a></b
|
|
52
|
+
<p>Open source on <b><a href="https://github.com/byeoon/webchatIRC">GitHub</a></b>! ❤️</p>
|
|
56
53
|
</footer>
|
|
57
|
-
|
|
58
54
|
</div>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
55
|
</body>
|
|
63
56
|
|
|
64
57
|
</html>
|
package/public/demo.html
DELETED
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>webchat - IRC for your website</title>
|
|
8
|
-
<link rel="stylesheet" href="https://getbootstrap.com/1.4.0/assets/css/bootstrap.min.css">
|
|
9
|
-
<link rel="stylesheet" href="style.css">
|
|
10
|
-
</head>
|
|
11
|
-
|
|
12
|
-
<body>
|
|
13
|
-
<div class="topbar">
|
|
14
|
-
<div class="fill">
|
|
15
|
-
<div class="container">
|
|
16
|
-
<a class="brand" href="#">webchat IRC</a>
|
|
17
|
-
<ul class="nav">
|
|
18
|
-
<li><a href="/index.html">Home</a></li>
|
|
19
|
-
<li><a href="#about">Setup</a></li>
|
|
20
|
-
<li class="active"><a href="/demo.html">Demo</a></li>
|
|
21
|
-
</ul>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<div class="chat-wrapper">
|
|
27
|
-
<div class="username-overlay" id="usernameOverlay">
|
|
28
|
-
<div class="username-form">
|
|
29
|
-
<h2>Enter webchatIRC Demo</h2>
|
|
30
|
-
<p class="form-subtitle">Pick a name and start chatting</p>
|
|
31
|
-
<input type="text" id="usernameInput" class="username-input" placeholder="Enter your name..."
|
|
32
|
-
maxlength="16" autocomplete="off">
|
|
33
|
-
<button class="btn primary" id="connectBtn">Connect</button>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
|
|
37
|
-
<div class="webchatcontainer" id="chatContainer">
|
|
38
|
-
<div class="chat-header">
|
|
39
|
-
<div class="chat-header-left">
|
|
40
|
-
<h1>webchat-IRC</h1>
|
|
41
|
-
<span class="channel-label" id="channelLabel">#webchatirc-general</span>
|
|
42
|
-
</div>
|
|
43
|
-
<div class="chat-header-right">
|
|
44
|
-
<span class="server-label" id="serverLabel"></span>
|
|
45
|
-
<span class="users-label" id="usersLabel"></span>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="divider"></div>
|
|
49
|
-
<div id="log">
|
|
50
|
-
<ul id="chat-list"></ul>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
<div class="chatbox-wrapper" id="chatboxWrapper" style="display: none;">
|
|
55
|
-
<input type="text" class="chatbox" id="chatInput" placeholder="Type a message..." maxlength="500"
|
|
56
|
-
autocomplete="off" disabled>
|
|
57
|
-
<button class="send-btn" id="sendBtn" disabled>Send</button>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<footer>
|
|
62
|
-
<p>Open source on <b><a href="https://github.com/byeoon/webchatIRC">GitHub</a></b>!</p>
|
|
63
|
-
</footer>
|
|
64
|
-
|
|
65
|
-
<script src="/socket.io/socket.io.js"></script>
|
|
66
|
-
<script>
|
|
67
|
-
const chatList = document.getElementById('chat-list');
|
|
68
|
-
const logContainer = document.getElementById('log');
|
|
69
|
-
const usernameOverlay = document.getElementById('usernameOverlay');
|
|
70
|
-
const usernameInput = document.getElementById('usernameInput');
|
|
71
|
-
const connectBtn = document.getElementById('connectBtn');
|
|
72
|
-
const chatInput = document.getElementById('chatInput');
|
|
73
|
-
const sendBtn = document.getElementById('sendBtn');
|
|
74
|
-
const chatboxWrapper = document.getElementById('chatboxWrapper');
|
|
75
|
-
const channelLabel = document.getElementById('channelLabel');
|
|
76
|
-
const serverLabel = document.getElementById('serverLabel');
|
|
77
|
-
const usersLabel = document.getElementById('usersLabel');
|
|
78
|
-
|
|
79
|
-
const socket = io();
|
|
80
|
-
let connected = false;
|
|
81
|
-
let currentUserCount = 0;
|
|
82
|
-
|
|
83
|
-
function formatTime(ts) {
|
|
84
|
-
const d = ts ? new Date(ts) : new Date();
|
|
85
|
-
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
function escapeHTML(str) {
|
|
89
|
-
const div = document.createElement('div');
|
|
90
|
-
div.textContent = str;
|
|
91
|
-
return div.innerHTML;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function addSystemMessage(text) {
|
|
95
|
-
const li = document.createElement('li');
|
|
96
|
-
li.classList.add('system-msg');
|
|
97
|
-
li.innerHTML = `<span class="timestamp">${formatTime()}</span> <span class="system-text">* ${escapeHTML(text)}</span>`;
|
|
98
|
-
chatList.appendChild(li);
|
|
99
|
-
logContainer.scrollTop = logContainer.scrollHeight;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function addChatMessage(msg) {
|
|
103
|
-
const li = document.createElement('li');
|
|
104
|
-
li.classList.add('chat-msg');
|
|
105
|
-
if (msg.self) li.classList.add('self-msg');
|
|
106
|
-
|
|
107
|
-
li.innerHTML = `<span class="timestamp">${formatTime(msg.timestamp)}</span> <span class="domain">[${escapeHTML(msg.domain)}]</span> <span class="nick">${escapeHTML(msg.nick)}</span>: <span class="text">${escapeHTML(msg.text)}</span>`;
|
|
108
|
-
chatList.appendChild(li);
|
|
109
|
-
logContainer.scrollTop = logContainer.scrollHeight;
|
|
110
|
-
}
|
|
111
|
-
socket.on('system', (text) => addSystemMessage(text));
|
|
112
|
-
socket.on('message', (msg) => addChatMessage(msg));
|
|
113
|
-
socket.on('error_msg', (text) => {
|
|
114
|
-
addSystemMessage(`ERROR: ${text}`);
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
socket.on('server_info', (data) => {
|
|
118
|
-
serverLabel.textContent = `Server: ${data.server}`;
|
|
119
|
-
currentUserCount = data.userCount;
|
|
120
|
-
usersLabel.textContent = `${currentUserCount} user${currentUserCount !== 1 ? 's' : ''}`;
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
socket.on('user_joined', () => {
|
|
124
|
-
if (currentUserCount > 0) {
|
|
125
|
-
currentUserCount++;
|
|
126
|
-
usersLabel.textContent = `${currentUserCount} user${currentUserCount !== 1 ? 's' : ''}`;
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
socket.on('user_left', () => {
|
|
131
|
-
if (currentUserCount > 0) {
|
|
132
|
-
currentUserCount--;
|
|
133
|
-
usersLabel.textContent = `${currentUserCount} user${currentUserCount !== 1 ? 's' : ''}`;
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
function doConnect() {
|
|
138
|
-
const username = usernameInput.value.trim() || 'Guest';
|
|
139
|
-
socket.emit('register', {
|
|
140
|
-
domain: window.location.hostname,
|
|
141
|
-
username: username
|
|
142
|
-
});
|
|
143
|
-
|
|
144
|
-
usernameOverlay.classList.add('hidden');
|
|
145
|
-
chatboxWrapper.style.display = 'flex';
|
|
146
|
-
chatInput.disabled = false;
|
|
147
|
-
sendBtn.disabled = false;
|
|
148
|
-
chatInput.focus();
|
|
149
|
-
connected = true;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
connectBtn.addEventListener('click', doConnect);
|
|
153
|
-
usernameInput.addEventListener('keydown', (e) => {
|
|
154
|
-
if (e.key === 'Enter') doConnect();
|
|
155
|
-
});
|
|
156
|
-
|
|
157
|
-
usernameInput.focus();
|
|
158
|
-
|
|
159
|
-
function sendMessage() {
|
|
160
|
-
const text = chatInput.value.trim();
|
|
161
|
-
if (!text || !connected) return;
|
|
162
|
-
socket.emit('chat', text);
|
|
163
|
-
chatInput.value = '';
|
|
164
|
-
chatInput.focus();
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
chatInput.addEventListener('keydown', (e) => {
|
|
168
|
-
if (e.key === 'Enter') {
|
|
169
|
-
e.preventDefault();
|
|
170
|
-
sendMessage();
|
|
171
|
-
}
|
|
172
|
-
});
|
|
173
|
-
|
|
174
|
-
sendBtn.addEventListener('click', sendMessage);
|
|
175
|
-
</script>
|
|
176
|
-
</body>
|
|
177
|
-
|
|
178
|
-
</html>
|