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 | background-color: white; |
11 | } |
12 | .popup-box { |
13 | background-color: #ffffff; |
14 | border: 1px solid #b0b0b0; |
15 | bottom: 0; |
16 | /*display: none;*/ |
17 | height: 415px; |
18 | position: fixed; |
19 | right: 70px; |
20 | width: 300px; |
21 | /*margin: auto;*/ |
22 | font-family: 'Open Sans', sans-serif; |
23 | } |
24 | .round.hollow { |
25 | margin: 40px 0 0; |
26 | } |
27 | .round.hollow a { |
28 | border: 2px solid #ff6701; |
29 | border-radius: 35px; |
30 | color: red; |
31 | color: #ff6701; |
32 | font-size: 23px; |
33 | padding: 10px 21px; |
34 | text-decoration: none; |
35 | font-family: 'Open Sans', sans-serif; |
36 | } |
37 | .round.hollow a:hover { |
38 | border: 2px solid #000; |
39 | border-radius: 35px; |
40 | color: red; |
41 | color: #000; |
42 | font-size: 23px; |
43 | padding: 10px 21px; |
44 | text-decoration: none; |
45 | } |
46 | .popup-box-on { |
47 | display: block !important; |
48 | } |
49 | .popup-box .popup-head { |
50 | background-color: #fff; |
51 | clear: both; |
52 | color: #7b7b7b; |
53 | display: inline-table; |
54 | font-size: 21px; |
55 | padding: 7px 10px; |
56 | width: 100%; |
57 | font-family: Oswald; |
58 | } |
59 | .bg_none i { |
60 | border: 1px solid #ff6701; |
61 | border-radius: 25px; |
62 | color: #ff6701; |
63 | font-size: 17px; |
64 | height: 33px; |
65 | line-height: 30px; |
66 | width: 33px; |
67 | } |
68 | .bg_none:hover i { |
69 | border: 1px solid #000; |
70 | border-radius: 25px; |
71 | color: #000; |
72 | font-size: 17px; |
73 | height: 33px; |
74 | line-height: 30px; |
75 | width: 33px; |
76 | } |
77 | .bg_none { |
78 | /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/ |
79 | background: #FADC00 none repeat scroll 0 0; |
80 | border: medium none; |
81 | } |
82 | .popup-box .popup-head .popup-head-right { |
83 | margin: 11px 7px 0; |
84 | } |
85 | .popup-box .popup-messages { |
86 | } |
87 | .popup-head-left img { |
88 | border: 1px solid #7b7b7b; |
89 | border-radius: 50%; |
90 | width: 44px; |
91 | } |
92 | .popup-messages-footer > textarea { |
93 | border-bottom: 1px solid #b2b2b2 !important; |
94 | height: 34px !important; |
95 | margin: 7px; |
96 | padding: 5px !important; |
97 | border: medium none; |
98 | width: 95% !important; |
99 | } |
100 | .popup-messages-footer { |
101 | background: #fff none repeat scroll 0 0; |
102 | bottom: 0; |
103 | position: absolute; |
104 | width: 100%; |
105 | } |
106 | .popup-messages-footer .btn-footer { |
107 | overflow: hidden; |
108 | padding: 2px 5px 10px 6px; |
109 | width: 100%; |
110 | } |
111 | .simple_round { |
112 | background: #d1d1d1 none repeat scroll 0 0; |
113 | border-radius: 50%; |
114 | color: #4b4b4b !important; |
115 | height: 21px; |
116 | padding: 0 0 0 1px; |
117 | width: 21px; |
118 | } |
119 | |
120 | .popup-box .popup-messages { |
121 | background: #FADC00 none repeat scroll 0 0; |
122 | /*background: #3f9684 none repeat scroll 0 0;*/ |
123 | height: 275px; |
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: #fff; |
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: #fff; |
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: #fff; |
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 | var n = #N#; |
365 | var interval = 1000; |
366 | nInitial = n; |
367 | |
368 | function start() { |
369 | url = "#INCREMENTALURL#"; |
370 | if (url != '' && url != ("#INC" + "REMENTALURL#")) { |
371 | showAction("Loading " + url + n); |
372 | $.get(url + n, function(src) { |
373 | showAction("Loaded"); |
374 | var match = src.match(/\d+/); |
375 | if (match != null) { |
376 | n = parseInt(match[0]); |
377 | $(".direct-chat-messages").append(src); |
378 | $("#scrollme").scrollTop(1E10); |
379 | showAction("Appended " + src.length); |
380 | } else |
381 | showAction("n=" + n + " (initial=" + nInitial + ")"); |
382 | appendAction("Rescheduling"); |
383 | setTimeout(start, interval); |
384 | appendAction("Rescheduled"); |
385 | }, 'text') |
386 | .fail(function() { |
387 | showAction("Rescheduling after fail"); |
388 | setTimeout(start, interval); |
389 | }); |
390 | } |
391 | } |
392 | </script> |
393 | </head> |
394 | <body onLoad='$("#scrollme").scrollTop(1E10); start();'> |
395 | <div id="actionMsg"></div> |
396 | </style> |
397 | |
398 | <form> |
399 | |
400 | <div class="popup-box popup-box-on chat-popup" id="qnimate"> |
401 | <div class="popup-head"> |
402 | <a href="?message=CLEAR"><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</div></a> |
403 | <div class="popup-head-right pull-right"> |
404 | <!-- |
405 | <div class="btn-group"> |
406 | <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> |
407 | <i class="glyphicon glyphicon-cog"></i> </button> |
408 | <ul role="menu" class="dropdown-menu pull-right"> |
409 | <li><a href="#">Media</a></li> |
410 | <li><a href="#">Block</a></li> |
411 | <li><a href="#">Clear Chat</a></li> |
412 | <li><a href="#">Email Chat</a></li> |
413 | </ul> |
414 | </div> |
415 | |
416 | <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button> |
417 | --> |
418 | </div> |
419 | </div> |
420 | <div id="scrollme" class="popup-messages"> |
421 | |
422 | |
423 | |
424 | |
425 | <div class="direct-chat-messages"> |
426 | <!-- MSGS HERE --> |
427 | </div> |
428 | <div class="popup-messages-footer"> |
429 | <textarea autofocus id="status_message" placeholder="Type a message..." rows="10" cols="30" name="message" onkeydown="if (event.keyCode == 13) { if (status_message.value == 'clear') form.submit(); else { url = '#MSGURL#' + encodeURIComponent(status_message.value); showAction('Submitting ' + url); $.get(url); } return false; }"></textarea> |
430 | <div class="btn-footer"> |
431 | <!-- |
432 | <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button> |
433 | <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button> |
434 | <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button> |
435 | --> |
436 | <!-- |
437 | <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button> |
438 | --> |
439 | </div> |
440 | </div> |
441 | </div> |
442 | |
443 | </form> |
444 | </body></html> |
Began life as a copy of #1008787
download render html show line numbers
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
Snippet ID: | #1013899 |
Snippet name: | Template Google Bot |
Eternal ID of this version: | #1013899/1 |
Text MD5: | 993f7497a17e7de92648d5aa2e5088c1 |
Author: | stefan |
Category: | javax / web chat bots |
Type: | HTML |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2018-03-14 14:58:57 |
Source code size: | 11636 bytes / 444 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 391 / 519 |
Referenced in: | [show references] |