Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

461
LINES

< > BotCompany Repo | #1025912 // Template Nootrobox before segmenting

HTML

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  
<p align="center">This is a demo chat bot by <a style="color: black" target="_blank" href="http://BotHouse.de/">BotHouse.de</a> (not authorized by Nootrobox)</p>
396  
<div id="actionMsg"></div>
397  
<style>
398  
.thumb1 { 
399  
background: url(http://eyeocr.sourceforge.net/filestore/filestore.php?cmd=serve&file=blob_1008786&contentType=image/jpeg) no-repeat;
400  
width: 1275px;
401  
height:7765px;
402  
}
403  
</style>
404  
<div class="thumb1"></div>
405  
<!--
406  
<div class="container text-center">
407  
  <div class="row">
408  
        <div class="round hollow text-center">
409  
        <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open chat </a>
410  
        </div>
411  
  </div>
412  
</div>
413  
-->
414  
415  
<form>
416  
417  
<div class="popup-box popup-box-on chat-popup" id="qnimate">
418  
          <div class="popup-head">
419  
        <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>
420  
            <div class="popup-head-right pull-right">
421  
            <!--
422  
            <div class="btn-group">
423  
                      <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
424  
                     <i class="glyphicon glyphicon-cog"></i> </button>
425  
                    <ul role="menu" class="dropdown-menu pull-right">
426  
                    <li><a href="#">Media</a></li>
427  
                    <li><a href="#">Block</a></li>
428  
                    <li><a href="#">Clear Chat</a></li>
429  
                    <li><a href="#">Email Chat</a></li>
430  
                    </ul>
431  
            </div>
432  
            
433  
            <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
434  
            -->
435  
                      </div>
436  
        </div>
437  
      <div id="scrollme" class="popup-messages">
438  
        
439  
      
440  
      
441  
      
442  
      <div class="direct-chat-messages">
443  
      <!-- MSGS HERE -->
444  
      </div>
445  
      <div class="popup-messages-footer">
446  
      <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>
447  
      <div class="btn-footer">
448  
      <!--
449  
      <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
450  
      <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
451  
            <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
452  
      -->
453  
      <!--
454  
      <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
455  
      -->
456  
      </div>
457  
      </div>
458  
    </div>
459  
    
460  
</form>
461  
</body></html>

Author comment

Began life as a copy of #1008787

download  render html  show line numbers   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt

No comments. add comment

Snippet ID: #1025912
Snippet name: Template Nootrobox before segmenting
Eternal ID of this version: #1025912/1
Text MD5: a55806004368c4d87b75ab9cac850988
Author: stefan
Category: javax / web chat bots
Type: HTML
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2019-10-30 12:58:51
Source code size: 12464 bytes / 461 lines
Pitched / IR pitched: No / No
Views / Downloads: 112 / 203
Referenced in: [show references]