1 | <html> |
2 | <head> |
3 | <title>Chat Popup Test</title> |
4 | <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'> |
5 | <style>@import url(https://fonts.googleapis.com/css?family=Oswald:400,300); |
6 | @import url(https://fonts.googleapis.com/css?family=Open+Sans); |
7 | body |
8 | {
|
9 | font-family: 'Open Sans', sans-serif; |
10 | } |
11 | .popup-box {
|
12 | background-color: #ffffff; |
13 | border: 1px solid #b0b0b0; |
14 | bottom: 0; |
15 | display: none; |
16 | height: 415px; |
17 | /*position: fixed; |
18 | right: 70px;*/ |
19 | width: 600px; /* actual chat width, was 300 */ |
20 | margin: auto; |
21 | font-family: 'Open Sans', sans-serif; |
22 | } |
23 | .round.hollow {
|
24 | margin: 40px 0 0; |
25 | } |
26 | .round.hollow a {
|
27 | border: 2px solid #ff6701; |
28 | border-radius: 35px; |
29 | color: red; |
30 | color: #ff6701; |
31 | font-size: 23px; |
32 | padding: 10px 21px; |
33 | text-decoration: none; |
34 | font-family: 'Open Sans', sans-serif; |
35 | } |
36 | .round.hollow a:hover {
|
37 | border: 2px solid #000; |
38 | border-radius: 35px; |
39 | color: red; |
40 | color: #000; |
41 | font-size: 23px; |
42 | padding: 10px 21px; |
43 | text-decoration: none; |
44 | } |
45 | .popup-box-on {
|
46 | display: block !important; |
47 | } |
48 | .popup-box .popup-head {
|
49 | background-color: #fff; |
50 | clear: both; |
51 | color: #7b7b7b; |
52 | display: inline-table; |
53 | font-size: 21px; |
54 | padding: 7px 10px; |
55 | width: 100%; |
56 | font-family: Oswald; |
57 | } |
58 | .bg_none i {
|
59 | border: 1px solid #ff6701; |
60 | border-radius: 25px; |
61 | color: #ff6701; |
62 | font-size: 17px; |
63 | height: 33px; |
64 | line-height: 30px; |
65 | width: 33px; |
66 | } |
67 | .bg_none:hover i {
|
68 | border: 1px solid #000; |
69 | border-radius: 25px; |
70 | color: #000; |
71 | font-size: 17px; |
72 | height: 33px; |
73 | line-height: 30px; |
74 | width: 33px; |
75 | } |
76 | .bg_none {
|
77 | /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/ |
78 | background: #FADC00 none repeat scroll 0 0; |
79 | border: medium none; |
80 | } |
81 | .popup-box .popup-head .popup-head-right {
|
82 | margin: 11px 7px 0; |
83 | } |
84 | .popup-box .popup-messages {
|
85 | } |
86 | .popup-head-left img {
|
87 | border: 1px solid #7b7b7b; |
88 | border-radius: 50%; |
89 | width: 44px; |
90 | } |
91 | .popup-messages-footer > textarea {
|
92 | border-bottom: 1px solid #b2b2b2 !important; |
93 | height: 34px !important; |
94 | margin: 7px; |
95 | padding: 5px !important; |
96 | border: medium none; |
97 | width: 95% !important; /* XXX */ |
98 | } |
99 | .popup-messages-footer {
|
100 | background: #fff none repeat scroll 0 0; |
101 | bottom: 0; |
102 | /*position: absolute; |
103 | width: 100%;*/ |
104 | } |
105 | .popup-messages-footer .btn-footer {
|
106 | overflow: hidden; |
107 | padding: 2px 5px 10px 6px; |
108 | width: 100%; |
109 | } |
110 | .simple_round {
|
111 | background: #d1d1d1 none repeat scroll 0 0; |
112 | border-radius: 50%; |
113 | color: #4b4b4b !important; |
114 | height: 21px; |
115 | padding: 0 0 0 1px; |
116 | width: 21px; |
117 | } |
118 | |
119 | .popup-box .popup-messages {
|
120 | background: #FADC00 none repeat scroll 0 0; |
121 | /*background: #3f9684 none repeat scroll 0 0;*/ |
122 | height: 500px; /* testing */ |
123 | /*height: 100%;*/ /* testing */ |
124 | overflow: auto; |
125 | } |
126 | .direct-chat-messages {
|
127 | overflow: auto; |
128 | padding: 10px; |
129 | transform: translate(0px, 0px); |
130 | |
131 | } |
132 | .popup-messages .chat-box-single-line {
|
133 | border-bottom: 1px solid #a4c6b5; |
134 | height: 12px; |
135 | margin: 7px 0 20px; |
136 | position: relative; |
137 | text-align: center; |
138 | } |
139 | .popup-messages abbr.timestamp {
|
140 | background: #FADC00 none repeat scroll 0 0; |
141 | color: #000; |
142 | padding: 0 11px; |
143 | } |
144 | |
145 | .popup-head-right .btn-group {
|
146 | display: inline-flex; |
147 | margin: 0 8px 0 0; |
148 | vertical-align: top !important; |
149 | } |
150 | .chat-header-button {
|
151 | background: transparent none repeat scroll 0 0; |
152 | border: 1px solid #636364; |
153 | border-radius: 50%; |
154 | font-size: 14px; |
155 | height: 30px; |
156 | width: 30px; |
157 | } |
158 | .popup-head-right .btn-group .dropdown-menu {
|
159 | border: medium none; |
160 | min-width: 122px; |
161 | padding: 0; |
162 | } |
163 | .popup-head-right .btn-group .dropdown-menu li a {
|
164 | font-size: 12px; |
165 | padding: 3px 10px; |
166 | color: #303030; |
167 | } |
168 | |
169 | .popup-messages abbr.timestamp {
|
170 | background: #FADC00 none repeat scroll 0 0; |
171 | color: #000; |
172 | padding: 0 11px; |
173 | } |
174 | .popup-messages .chat-box-single-line {
|
175 | border-bottom: 1px solid #a4c6b5; |
176 | height: 12px; |
177 | margin: 7px 0 20px; |
178 | position: relative; |
179 | text-align: center; |
180 | } |
181 | .popup-messages .direct-chat-messages {
|
182 | height: auto; |
183 | } |
184 | .popup-messages .direct-chat-text {
|
185 | background: #dfece7 none repeat scroll 0 0; |
186 | border: 1px solid #dfece7; |
187 | border-radius: 2px; |
188 | color: #1f2121; |
189 | } |
190 | |
191 | .popup-messages .direct-chat-buttons {
|
192 | text-align: center; |
193 | background: #dfece7 none repeat scroll 0 0; |
194 | border: 1px solid #dfece7; |
195 | border-radius: 2px; |
196 | color: #1f2121; |
197 | } |
198 | |
199 | .popup-messages .direct-chat-timestamp {
|
200 | color: #000; |
201 | opacity: 0.6; |
202 | } |
203 | |
204 | .popup-messages .direct-chat-name {
|
205 | font-size: 15px; |
206 | font-weight: 600; |
207 | margin: 0 0 0 49px !important; |
208 | color: #fff; |
209 | opacity: 0.9; |
210 | } |
211 | .popup-messages .direct-chat-info {
|
212 | display: block; |
213 | font-size: 12px; |
214 | margin-bottom: 0; |
215 | } |
216 | .popup-messages .big-round {
|
217 | margin: -9px 0 0 !important; |
218 | } |
219 | .popup-messages .direct-chat-img {
|
220 | border: 1px solid #fff; |
221 | background: #FADC00 none repeat scroll 0 0; |
222 | border-radius: 50%; |
223 | float: left; |
224 | height: 40px; |
225 | margin: -21px 0 0; |
226 | width: 40px; |
227 | } |
228 | .direct-chat-reply-name {
|
229 | color: #fff; |
230 | font-size: 15px; |
231 | margin: 0 0 0 10px; |
232 | opacity: 0.9; |
233 | } |
234 | |
235 | .direct-chat-img-reply-small |
236 | {
|
237 | border: 1px solid #fff; |
238 | border-radius: 50%; |
239 | float: left; |
240 | height: 20px; |
241 | margin: 0 8px; |
242 | width: 20px; |
243 | background: #FADC00; |
244 | } |
245 | |
246 | .popup-messages .direct-chat-msg {
|
247 | margin-bottom: 10px; |
248 | position: relative; |
249 | } |
250 | |
251 | .popup-messages .doted-border::after {
|
252 | background: transparent none repeat scroll 0 0 !important; |
253 | border-right: 2px dotted #fff !important; |
254 | bottom: 0; |
255 | content: ""; |
256 | left: 17px; |
257 | margin: 0; |
258 | position: absolute; |
259 | top: 0; |
260 | width: 2px; |
261 | display: inline; |
262 | z-index: -2; |
263 | } |
264 | |
265 | .popup-messages .direct-chat-msg::after {
|
266 | background: #fff none repeat scroll 0 0; |
267 | border-right: medium none; |
268 | bottom: 0; |
269 | content: ""; |
270 | left: 17px; |
271 | margin: 0; |
272 | position: absolute; |
273 | top: 0; |
274 | width: 2px; |
275 | display: inline; |
276 | z-index: -2; |
277 | } |
278 | |
279 | .direct-chat-text::after, .direct-chat-text::before, .direct-chat-buttons::after, .direct-chat-buttons::before {
|
280 | border-color: transparent #dfece7 transparent transparent; |
281 | |
282 | -moz-border-bottom-colors: none; |
283 | -moz-border-left-colors: none; |
284 | -moz-border-right-colors: none; |
285 | -moz-border-top-colors: none; |
286 | border-color: transparent #d2d6de transparent transparent; |
287 | border-image: none; |
288 | border-style: solid; |
289 | border-width: medium; |
290 | content: " "; |
291 | height: 0; |
292 | pointer-events: none; |
293 | position: absolute; |
294 | right: 100%; |
295 | top: 15px; |
296 | width: 0; |
297 | } |
298 | .direct-chat-text::after, .direct-chat-buttons::after {
|
299 | border-width: 5px; |
300 | margin-top: -5px; |
301 | } |
302 | .popup-messages .direct-chat-text, .popup-messages .direct-chat-buttons {
|
303 | background: #dfece7 none repeat scroll 0 0; |
304 | border: 1px solid #dfece7; |
305 | border-radius: 2px; |
306 | color: #1f2121; |
307 | } |
308 | .direct-chat-text, .direct-chat-buttons {
|
309 | background: #d2d6de none repeat scroll 0 0; |
310 | border: 1px solid #d2d6de; |
311 | border-radius: 5px; |
312 | color: #444; |
313 | margin: 5px 0 0 50px; |
314 | padding: 5px 10px; |
315 | position: relative; |
316 | } |
317 | |
318 | #actionMsg {
|
319 | position: absolute; |
320 | z-index: 9999; |
321 | left: 0; |
322 | bottom: 0; |
323 | height: 20px; |
324 | /*width: 300px;*/ |
325 | width: auto; |
326 | |
327 | background-color: white; |
328 | display: none; |
329 | } |
330 | </style> |
331 | <script type='text/javascript' src='//code.jquery.com/jquery-1.10.2.min.js'></script> |
332 | <script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script> |
333 | <script type='text/javascript'> $(function(){
|
334 | $("#addClass").click(function () {
|
335 | $('#qnimate').addClass('popup-box-on');
|
336 | }); |
337 | |
338 | $("#removeClass").click(function () {
|
339 | $('#qnimate').removeClass('popup-box-on');
|
340 | }); |
341 | }); |
342 | |
343 | var showActions = false; |
344 | |
345 | function showAction(action) {
|
346 | if (showActions) {
|
347 | $("#actionMsg").html(action);
|
348 | $("#actionMsg").show();
|
349 | } |
350 | } |
351 | |
352 | function appendAction(action) {
|
353 | if (showActions) {
|
354 | $("#actionMsg").append(" | " + action);
|
355 | $("#actionMsg").show();
|
356 | } |
357 | } |
358 | |
359 | function hideAction() {
|
360 | $("#actionMsg").hide();
|
361 | $("#actionMsg").html("");
|
362 | } |
363 | |
364 | function scrollDown() {
|
365 | //document.body.scrollTop = document.body.scrollHeight; |
366 | $("#scrollme").scrollTop(1E10);
|
367 | } |
368 | |
369 | var n = #N#; |
370 | var interval = 1000; |
371 | nInitial = n; |
372 | |
373 | function start() {
|
374 | url = "#INCREMENTALURL#"; |
375 | if (url != '' && url != ("#INC" + "REMENTALURL#")) {
|
376 | showAction("Loading " + url + n);
|
377 | $.get(url + n, function(src) {
|
378 | showAction("Loaded");
|
379 | var match = src.match(/\d+/); |
380 | if (match != null) {
|
381 | n = parseInt(match[0]); |
382 | $(".direct-chat-messages").append(src);
|
383 | scrollDown(); |
384 | showAction("Appended " + src.length);
|
385 | } else |
386 | showAction("n=" + n + " (initial=" + nInitial + ")");
|
387 | appendAction("Rescheduling");
|
388 | setTimeout(start, interval); |
389 | appendAction("Rescheduled");
|
390 | }, 'text') |
391 | .fail(function() {
|
392 | showAction("Rescheduling after fail");
|
393 | setTimeout(start, interval); |
394 | }); |
395 | } |
396 | } |
397 | </script> |
398 | </head> |
399 | <body onLoad='scrollDown(); start();'> |
400 | <div id="actionMsg"></div> |
401 | |
402 | <form> |
403 | |
404 | <div class="popup-box popup-box-on chat-popup" id="qnimate"> |
405 | <div class="popup-head"> |
406 | <div class="popup-head-left pull-left"><img src="http://eyeocr.sourceforge.net/filestore/filestore.php?cmd=serve&file=blob_1008323&contentType=image/png" alt="Bot Image"> $HEADING | <a href="http://ai1.lol/wiki/" target="_blank">More</a></div> |
407 | <div class="popup-head-right pull-right"> |
408 | <!-- |
409 | <div class="btn-group"> |
410 | <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> |
411 | <i class="glyphicon glyphicon-cog"></i> </button> |
412 | <ul role="menu" class="dropdown-menu pull-right"> |
413 | <li><a href="#">Media</a></li> |
414 | <li><a href="#">Block</a></li> |
415 | <li><a href="#">Clear Chat</a></li> |
416 | <li><a href="#">Email Chat</a></li> |
417 | </ul> |
418 | </div> |
419 | |
420 | <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button> |
421 | --> |
422 | </div> |
423 | </div> |
424 | |
425 | <div id="scrollme" class="popup-messages"> |
426 | |
427 | <div class="direct-chat-messages"> |
428 | <!-- MSGS HERE --> |
429 | </div> |
430 | <div class="popup-messages-footer"> |
431 | <textarea autofocus id="status_message" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="if (event.keyCode == 13) { if (status_message.value.toUpperCase() == 'CLEAR') form.submit(); else { url = '#MSGURL#' + encodeURIComponent(status_message.value); showAction('Submitting ' + url); $.get(url); } this.select(); return false; }"></textarea>
|
432 | <div class="btn-footer"> |
433 | <!-- |
434 | <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button> |
435 | <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button> |
436 | <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button> |
437 | --> |
438 | <!-- |
439 | <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button> |
440 | --> |
441 | </div> |
442 | </div> |
443 | </div> |
444 | |
445 | </form> |
446 | </body></html> |
Began life as a copy of #1008787
download render html show line numbers
Travelled to 13 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, jtubtzbbkimh, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1009000 |
| Snippet name: | Stefan's Chat Template (center) |
| Eternal ID of this version: | #1009000/21 |
| Text MD5: | 750f836cd1ddb9d557316137a9ed6c8f |
| Author: | stefan |
| Category: | javax / web chat bots |
| Type: | HTML |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2017-11-26 18:17:03 |
| Source code size: | 11822 bytes / 446 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 412 / 1115 |
| Version history: | 20 change(s) |
| Referenced in: | [show references] |