webchat-irc 1.0.0
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 +90 -0
- package/bin/webchat.js +18 -0
- package/index.js +270 -0
- package/package.json +44 -0
- package/public/demo.html +178 -0
- package/public/embed.html +692 -0
- package/public/img/LogoV1.png +0 -0
- package/public/index.html +64 -0
- package/public/style.css +276 -0
- package/webchat.config.example.json +13 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
|
|
3
|
+
<head>
|
|
4
|
+
<title>webchat - IRC for your website</title>
|
|
5
|
+
<link rel="stylesheet" href="https://getbootstrap.com/1.4.0/assets/css/bootstrap.min.css">
|
|
6
|
+
<link rel="stylesheet" href="style.css">
|
|
7
|
+
</head>
|
|
8
|
+
<html lang="en">
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<div class="topbar">
|
|
13
|
+
<div class="fill">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<a class="brand" href="#">webchat IRC</a>
|
|
16
|
+
<ul class="nav">
|
|
17
|
+
<li class="active"><a href="#">Home</a></li>
|
|
18
|
+
<li><a href="#about">Setup</a></li>
|
|
19
|
+
<li><a href="/demo.html">Demo</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="container">
|
|
26
|
+
<div class="hero-unit">
|
|
27
|
+
<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! Minimal user setup
|
|
29
|
+
required. </p>
|
|
30
|
+
<p><a class="btn primary large">Get Started »</a></p>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div class="row">
|
|
34
|
+
<div class="span-one-third">
|
|
35
|
+
<h2>Why webchat IRC?</h2>
|
|
36
|
+
<p>Allow people from different websites to communicate all in one place. Keep your niche communities closer by
|
|
37
|
+
adopting webchat IRC to your site!</p>
|
|
38
|
+
<p><a class="btn" href="#">View details »</a></p>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="span-one-third">
|
|
41
|
+
<h2>Guestbook mode</h2>
|
|
42
|
+
<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>
|
|
44
|
+
<p><a class="btn" href="#">View details »</a></p>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="span-one-third">
|
|
47
|
+
<h2>Easy to install</h2>
|
|
48
|
+
<p>webchat IRC was made with simplicity in mind. For the basic user, it should take 10 minutes maximum to setup
|
|
49
|
+
an instance, and you can customize everything to your liking.</p>
|
|
50
|
+
<p><a class="btn" href="#">View details »</a></p>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<footer>
|
|
55
|
+
<p>Open source on <b><a href="https://github.com/byeoon/webchatIRC">GitHub</a></b>!</p>
|
|
56
|
+
</footer>
|
|
57
|
+
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
</body>
|
|
63
|
+
|
|
64
|
+
</html>
|
package/public/style.css
ADDED
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
* {
|
|
2
|
+
font-family: Georgia, 'Times New Roman', serif;
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
body {
|
|
7
|
+
padding-top: 50px;
|
|
8
|
+
background: #e8e8e8;
|
|
9
|
+
margin: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.chat-wrapper {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
align-items: center;
|
|
16
|
+
padding: 20px 16px;
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.username-overlay {
|
|
21
|
+
position: absolute;
|
|
22
|
+
inset: 0;
|
|
23
|
+
z-index: 10;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
background: rgba(20, 17, 25, 0.85);
|
|
28
|
+
border-radius: 6px;
|
|
29
|
+
max-width: 700px;
|
|
30
|
+
margin: 20px auto;
|
|
31
|
+
min-height: 660px;
|
|
32
|
+
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.username-overlay.hidden {
|
|
36
|
+
opacity: 0;
|
|
37
|
+
visibility: hidden;
|
|
38
|
+
pointer-events: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.username-form {
|
|
42
|
+
text-align: center;
|
|
43
|
+
color: #fff;
|
|
44
|
+
padding: 32px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.username-form h2 {
|
|
48
|
+
margin: 0 0 4px;
|
|
49
|
+
font-size: 26px;
|
|
50
|
+
color: #fff;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.form-subtitle {
|
|
54
|
+
color: #999;
|
|
55
|
+
margin: 0 0 20px;
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.username-input {
|
|
60
|
+
display: block;
|
|
61
|
+
width: 260px;
|
|
62
|
+
margin: 0 auto 14px;
|
|
63
|
+
padding: 10px 14px;
|
|
64
|
+
font-size: 16px;
|
|
65
|
+
font-family: Georgia, serif;
|
|
66
|
+
border: 2px solid #555;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
background: #2a2a2e;
|
|
69
|
+
color: #fff;
|
|
70
|
+
outline: none;
|
|
71
|
+
transition: border-color 0.2s ease;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.username-input:focus {
|
|
75
|
+
border-color: #0069d9;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.username-input::placeholder {
|
|
79
|
+
color: #777;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.webchatcontainer {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
border: 2px solid #b8b8b8;
|
|
86
|
+
box-shadow: 0 0 10px 8px rgba(11, 11, 11, 0.69);
|
|
87
|
+
background-color: rgba(20, 17, 25, 0.9);
|
|
88
|
+
width: 100%;
|
|
89
|
+
max-width: 700px;
|
|
90
|
+
padding: 12px;
|
|
91
|
+
border-radius: 6px 6px 0 0;
|
|
92
|
+
min-height: 600px;
|
|
93
|
+
max-height: 600px;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.chat-header {
|
|
98
|
+
display: flex;
|
|
99
|
+
justify-content: space-between;
|
|
100
|
+
align-items: center;
|
|
101
|
+
padding: 0 4px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.chat-header-left {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: baseline;
|
|
107
|
+
gap: 12px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.chat-header-right {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: flex-end;
|
|
114
|
+
gap: 2px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.chat-header h1 {
|
|
118
|
+
color: #fff;
|
|
119
|
+
margin: 0;
|
|
120
|
+
font-size: 24px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.channel-label {
|
|
124
|
+
color: #888;
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
font-style: italic;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.server-label {
|
|
130
|
+
color: #aaa;
|
|
131
|
+
font-size: 13px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.users-label {
|
|
135
|
+
color: #0069d9;
|
|
136
|
+
font-size: 13px;
|
|
137
|
+
font-weight: bold;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
#log {
|
|
142
|
+
flex: 1;
|
|
143
|
+
overflow-y: auto;
|
|
144
|
+
scroll-behavior: smooth;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
#chat-list {
|
|
148
|
+
list-style-type: none;
|
|
149
|
+
margin: 0;
|
|
150
|
+
padding: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
#chat-list>li {
|
|
154
|
+
padding: 6px 10px;
|
|
155
|
+
font-size: 15px;
|
|
156
|
+
word-wrap: break-word;
|
|
157
|
+
color: #ddd;
|
|
158
|
+
background: #242424;
|
|
159
|
+
line-height: 1.5;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
#chat-list>li:nth-child(odd) {
|
|
163
|
+
background: #2c2c2c;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.timestamp {
|
|
167
|
+
color: #666;
|
|
168
|
+
font-size: 12px;
|
|
169
|
+
margin-right: 4px;
|
|
170
|
+
font-family: 'Courier New', monospace;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.domain {
|
|
174
|
+
color: #7eb8da;
|
|
175
|
+
font-weight: bold;
|
|
176
|
+
font-size: 14px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.nick {
|
|
180
|
+
color: #c5c5c5;
|
|
181
|
+
font-weight: bold;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.text {
|
|
185
|
+
color: #e0e0e0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
.self-msg {
|
|
190
|
+
border-left: 3px solid #0069d9;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.self-msg .nick {
|
|
194
|
+
color: #8ab4f8;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.system-msg {
|
|
198
|
+
background: transparent !important;
|
|
199
|
+
padding: 3px 10px !important;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.system-text {
|
|
203
|
+
color: #777;
|
|
204
|
+
font-style: italic;
|
|
205
|
+
font-size: 13px;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.chatbox-wrapper {
|
|
209
|
+
display: flex;
|
|
210
|
+
width: 100%;
|
|
211
|
+
max-width: 700px;
|
|
212
|
+
border: 2px solid #b8b8b8;
|
|
213
|
+
border-top: 1px solid #444;
|
|
214
|
+
border-radius: 0 0 6px 6px;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
box-shadow: 0 4px 10px rgba(11, 11, 11, 0.5);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.chatbox {
|
|
220
|
+
flex: 1;
|
|
221
|
+
padding: 12px 14px;
|
|
222
|
+
font-size: 15px;
|
|
223
|
+
font-family: Georgia, serif;
|
|
224
|
+
border: none;
|
|
225
|
+
outline: none;
|
|
226
|
+
background: #333;
|
|
227
|
+
color: #fff;
|
|
228
|
+
min-height: 46px;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.chatbox::placeholder {
|
|
232
|
+
color: #777;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.chatbox:focus {
|
|
236
|
+
background: #3a3a3e;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.send-btn {
|
|
240
|
+
padding: 12px 20px;
|
|
241
|
+
background: #0069d9;
|
|
242
|
+
color: #fff;
|
|
243
|
+
border: none;
|
|
244
|
+
font-family: Georgia, serif;
|
|
245
|
+
font-size: 15px;
|
|
246
|
+
font-weight: bold;
|
|
247
|
+
cursor: pointer;
|
|
248
|
+
transition: background 0.2s ease;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.send-btn:hover {
|
|
252
|
+
background: #0053aa;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.send-btn:disabled {
|
|
256
|
+
background: #555;
|
|
257
|
+
cursor: default;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
|
|
261
|
+
.divider {
|
|
262
|
+
border-radius: 1px;
|
|
263
|
+
border: 1px solid #444;
|
|
264
|
+
margin: 8px 0;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
footer {
|
|
268
|
+
text-align: center;
|
|
269
|
+
padding: 20px;
|
|
270
|
+
color: #666;
|
|
271
|
+
font-size: 13px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
footer a {
|
|
275
|
+
color: #0069d9;
|
|
276
|
+
}
|