Chat Popup Test [1008310]

<html>
<head>
<title>Chat Popup Test</title>
 <link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'>
                                <style>@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
    font-family: 'Open Sans', sans-serif;
    }
.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popup-box-on {
    display: block !important;
}
.popup-box .popup-head {
    background-color: #fff;
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
     font-family: Oswald;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    border: 1px solid #7b7b7b;
    border-radius: 50%;
    width: 44px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 34px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}





.popup-box .popup-messages {
    background: #3f9684 none repeat scroll 0 0;
    height: 275px;
    overflow: auto;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);
    
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
	margin: 0 8px 0 0;
	vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
	padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
	color: #303030;
}

.popup-messages abbr.timestamp {
    background: #3f9684  none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 0 49px !important;
	color: #fff;
	opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    border: 1px solid #fff;
	background: #3f9684  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
	background:#3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
	background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
	bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
	 display: inline;
	  z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    background: #fff none repeat scroll 0 0;
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
	 display: inline;
	  z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {
   
    border-color: transparent #dfece7 transparent transparent;
    
}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.2.min.js'></script>
                                <script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
                                <script type='text/javascript'>  $(function(){
$("#addClass").click(function () {
          $('#qnimate').addClass('popup-box-on');
            });
          
            $("#removeClass").click(function () {
          $('#qnimate').removeClass('popup-box-on');
            });
  })</script>
</head>
<body>
<div class="container text-center">
	<div class="row">
		<h2>Open in chat (popup-box chat-popup)</h2>
        <h4>Click Here</h4>
        <div class="round hollow text-center">
        <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
        </div>
        
        <hr>
        
        MORE :
        <a target="_blank" href="http://bootsnipp.com/snippets/33ejn">Whatsapp Chat Box POPUP</a>,
         <a target="_blank" href="http://bootsnipp.com/snippets/z4P39"> Creative User Profile  </a>
         
	</div>
</div>


<div class="popup-box chat-popup" id="qnimate">
    		  <div class="popup-head">
				<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan</div>
					  <div class="popup-head-right pull-right">
						<div class="btn-group">
    								  <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
									   <i class="glyphicon glyphicon-cog"></i> </button>
									  <ul role="menu" class="dropdown-menu pull-right">
										<li><a href="#">Media</a></li>
										<li><a href="#">Block</a></li>
										<li><a href="#">Clear Chat</a></li>
										<li><a href="#">Email Chat</a></li>
									  </ul>
						</div>
						
						<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
                      </div>
			  </div>
			<div class="popup-messages">
    		
			
			
			
			<div class="direct-chat-messages">
                    
					
					<div class="chat-box-single-line">
								<abbr class="timestamp">October 8th, 2015</abbr>
					</div>
					
					
					<!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        Line 1?
                      </div>
					  <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                      </div>
						<div class="direct-chat-info clearfix">
						<span class="direct-chat-img-reply-small pull-left">
							
						</span>
						<span class="direct-chat-reply-name">Singh</span>
						</div>
						<!-- XXX -->
                      <div class="direct-chat-text">
                        Yo yo
                      </div>
						<!-- XXX -->
                      <!-- /.direct-chat-text -->
                    </div>
                    <!-- /.direct-chat-msg -->
					
					
					<div class="chat-box-single-line">
						<abbr class="timestamp">October 9th, 2015</abbr>
					</div>
			
					
					
					<!-- Message. Default to the left -->
                    <div class="direct-chat-msg doted-border">
                      <div class="direct-chat-info clearfix">
                        <span class="direct-chat-name pull-left">Osahan</span>
                      </div>
                      <!-- /.direct-chat-info -->
                      <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
                      <div class="direct-chat-text">
                        Line 2!
                      </div>
					  <div class="direct-chat-info clearfix">
                        <span class="direct-chat-timestamp pull-right">3.36 PM</span>
                      </div>
						<div class="direct-chat-info clearfix">
						  <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
						<span class="direct-chat-reply-name">Singh</span>
						<!-- XXX -->
                      <div class="direct-chat-text">
                        Yo
                      </div>
						<!-- XXX -->
						</div>
                    </div>
                    <!-- /.direct-chat-msg -->
					
					
                    

                    

                  </div>
			
			
			
			
			
			
			
			
			
			</div>
			<div class="popup-messages-footer">
			<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
			<div class="btn-footer">
			<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
			<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
            <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
			<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
			</div>
			</div>
	  </div>
</body></html>

Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt

Snippet ID:	#1008310
Snippet name:	Chat Popup Test
Eternal ID of this version:	#1008310/11
Text MD5:	a49f2e659c671e303f6945620983a1cc
Author:	stefan
Category:	javax / web chat bots
Type:	HTML
Public (visible to everyone):	Yes
Archived (hidden from active list):	No
Created/modified:	2017-05-07 03:31:27
Source code size:	12872 bytes / 460 lines
Pitched / IR pitched:	No / No
Views / Downloads:	824 / 320
Version history:	10 change(s)
Referenced in:	[show references]

< > BotCompany Repo | #1008310 // Chat Popup Test

HTML

Comments [hide]

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: 300px;
20	font-family: 'Open Sans', sans-serif;
21	}
22	.round.hollow {
23	margin: 40px 0 0;
24	}
25	.round.hollow a {
26	border: 2px solid #ff6701;
27	border-radius: 35px;
28	color: red;
29	color: #ff6701;
30	font-size: 23px;
31	padding: 10px 21px;
32	text-decoration: none;
33	font-family: 'Open Sans', sans-serif;
34	}
35	.round.hollow a:hover {
36	border: 2px solid #000;
37	border-radius: 35px;
38	color: red;
39	color: #000;
40	font-size: 23px;
41	padding: 10px 21px;
42	text-decoration: none;
43	}
44	.popup-box-on {
45	display: block !important;
46	}
47	.popup-box .popup-head {
48	background-color: #fff;
49	clear: both;
50	color: #7b7b7b;
51	display: inline-table;
52	font-size: 21px;
53	padding: 7px 10px;
54	width: 100%;
55	font-family: Oswald;
56	}
57	.bg_none i {
58	border: 1px solid #ff6701;
59	border-radius: 25px;
60	color: #ff6701;
61	font-size: 17px;
62	height: 33px;
63	line-height: 30px;
64	width: 33px;
65	}
66	.bg_none:hover i {
67	border: 1px solid #000;
68	border-radius: 25px;
69	color: #000;
70	font-size: 17px;
71	height: 33px;
72	line-height: 30px;
73	width: 33px;
74	}
75	.bg_none {
76	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
77	border: medium none;
78	}
79	.popup-box .popup-head .popup-head-right {
80	margin: 11px 7px 0;
81	}
82	.popup-box .popup-messages {
83	}
84	.popup-head-left img {
85	border: 1px solid #7b7b7b;
86	border-radius: 50%;
87	width: 44px;
88	}
89	.popup-messages-footer > textarea {
90	border-bottom: 1px solid #b2b2b2 !important;
91	height: 34px !important;
92	margin: 7px;
93	padding: 5px !important;
94	border: medium none;
95	width: 95% !important;
96	}
97	.popup-messages-footer {
98	background: #fff none repeat scroll 0 0;
99	bottom: 0;
100	position: absolute;
101	width: 100%;
102	}
103	.popup-messages-footer .btn-footer {
104	overflow: hidden;
105	padding: 2px 5px 10px 6px;
106	width: 100%;
107	}
108	.simple_round {
109	background: #d1d1d1 none repeat scroll 0 0;
110	border-radius: 50%;
111	color: #4b4b4b !important;
112	height: 21px;
113	padding: 0 0 0 1px;
114	width: 21px;
115	}
116
117
118
119
120
121	.popup-box .popup-messages {
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: #3f9684 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: #3f9684 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-timestamp {
192	color: #fff;
193	opacity: 0.6;
194	}
195
196	.popup-messages .direct-chat-name {
197	font-size: 15px;
198	font-weight: 600;
199	margin: 0 0 0 49px !important;
200	color: #fff;
201	opacity: 0.9;
202	}
203	.popup-messages .direct-chat-info {
204	display: block;
205	font-size: 12px;
206	margin-bottom: 0;
207	}
208	.popup-messages .big-round {
209	margin: -9px 0 0 !important;
210	}
211	.popup-messages .direct-chat-img {
212	border: 1px solid #fff;
213	background: #3f9684 none repeat scroll 0 0;
214	border-radius: 50%;
215	float: left;
216	height: 40px;
217	margin: -21px 0 0;
218	width: 40px;
219	}
220	.direct-chat-reply-name {
221	color: #fff;
222	font-size: 15px;
223	margin: 0 0 0 10px;
224	opacity: 0.9;
225	}
226
227	.direct-chat-img-reply-small
228	{
229	border: 1px solid #fff;
230	border-radius: 50%;
231	float: left;
232	height: 20px;
233	margin: 0 8px;
234	width: 20px;
235	background:#3f9684;
236	}
237
238	.popup-messages .direct-chat-msg {
239	margin-bottom: 10px;
240	position: relative;
241	}
242
243	.popup-messages .doted-border::after {
244	background: transparent none repeat scroll 0 0 !important;
245	border-right: 2px dotted #fff !important;
246	bottom: 0;
247	content: "";
248	left: 17px;
249	margin: 0;
250	position: absolute;
251	top: 0;
252	width: 2px;
253	display: inline;
254	z-index: -2;
255	}
256
257	.popup-messages .direct-chat-msg::after {
258	background: #fff none repeat scroll 0 0;
259	border-right: medium none;
260	bottom: 0;
261	content: "";
262	left: 17px;
263	margin: 0;
264	position: absolute;
265	top: 0;
266	width: 2px;
267	display: inline;
268	z-index: -2;
269	}
270	.direct-chat-text::after, .direct-chat-text::before {
271
272	border-color: transparent #dfece7 transparent transparent;
273
274	}
275	.direct-chat-text::after, .direct-chat-text::before {
276	-moz-border-bottom-colors: none;
277	-moz-border-left-colors: none;
278	-moz-border-right-colors: none;
279	-moz-border-top-colors: none;
280	border-color: transparent #d2d6de transparent transparent;
281	border-image: none;
282	border-style: solid;
283	border-width: medium;
284	content: " ";
285	height: 0;
286	pointer-events: none;
287	position: absolute;
288	right: 100%;
289	top: 15px;
290	width: 0;
291	}
292	.direct-chat-text::after {
293	border-width: 5px;
294	margin-top: -5px;
295	}
296	.popup-messages .direct-chat-text {
297	background: #dfece7 none repeat scroll 0 0;
298	border: 1px solid #dfece7;
299	border-radius: 2px;
300	color: #1f2121;
301	}
302	.direct-chat-text {
303	background: #d2d6de none repeat scroll 0 0;
304	border: 1px solid #d2d6de;
305	border-radius: 5px;
306	color: #444;
307	margin: 5px 0 0 50px;
308	padding: 5px 10px;
309	position: relative;
310	}
311	</style>
312	<script type='text/javascript' src='//code.jquery.com/jquery-1.10.2.min.js'></script>
313	<script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
314	<script type='text/javascript'> $(function(){
315	$("#addClass").click(function () {
316	$('#qnimate').addClass('popup-box-on');
317	});
318
319	$("#removeClass").click(function () {
320	$('#qnimate').removeClass('popup-box-on');
321	});
322	})</script>
323	</head>
324	<body>
325	<div class="container text-center">
326	<div class="row">
327	<h2>Open in chat (popup-box chat-popup)</h2>
328	<h4>Click Here</h4>
329	<div class="round hollow text-center">
330	<a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
331	</div>
332
333	<hr>
334
335	MORE :
336	<a target="_blank" href="http://bootsnipp.com/snippets/33ejn">Whatsapp Chat Box POPUP</a>,
337	<a target="_blank" href="http://bootsnipp.com/snippets/z4P39"> Creative User Profile </a>
338
339	</div>
340	</div>
341
342
343	<div class="popup-box chat-popup" id="qnimate">
344	<div class="popup-head">
345	<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan</div>
346	<div class="popup-head-right pull-right">
347	<div class="btn-group">
348	<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
349	<i class="glyphicon glyphicon-cog"></i> </button>
350	<ul role="menu" class="dropdown-menu pull-right">
351	<li><a href="#">Media</a></li>
352	<li><a href="#">Block</a></li>
353	<li><a href="#">Clear Chat</a></li>
354	<li><a href="#">Email Chat</a></li>
355	</ul>
356	</div>
357
358	<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
359	</div>
360	</div>
361	<div class="popup-messages">
362
363
364
365
366	<div class="direct-chat-messages">
367
368
369	<div class="chat-box-single-line">
370	<abbr class="timestamp">October 8th, 2015</abbr>
371	</div>
372
373
374	<!-- Message. Default to the left -->
375	<div class="direct-chat-msg doted-border">
376	<div class="direct-chat-info clearfix">
377	<span class="direct-chat-name pull-left">Osahan</span>
378	</div>
379	<!-- /.direct-chat-info -->
380	<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
381	<div class="direct-chat-text">
382	Line 1?
383	</div>
384	<div class="direct-chat-info clearfix">
385	<span class="direct-chat-timestamp pull-right">3.36 PM</span>
386	</div>
387	<div class="direct-chat-info clearfix">
388	<span class="direct-chat-img-reply-small pull-left">
389
390	</span>
391	<span class="direct-chat-reply-name">Singh</span>
392	</div>
393	<!-- XXX -->
394	<div class="direct-chat-text">
395	Yo yo
396	</div>
397	<!-- XXX -->
398	<!-- /.direct-chat-text -->
399	</div>
400	<!-- /.direct-chat-msg -->
401
402
403	<div class="chat-box-single-line">
404	<abbr class="timestamp">October 9th, 2015</abbr>
405	</div>
406
407
408
409	<!-- Message. Default to the left -->
410	<div class="direct-chat-msg doted-border">
411	<div class="direct-chat-info clearfix">
412	<span class="direct-chat-name pull-left">Osahan</span>
413	</div>
414	<!-- /.direct-chat-info -->
415	<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
416	<div class="direct-chat-text">
417	Line 2!
418	</div>
419	<div class="direct-chat-info clearfix">
420	<span class="direct-chat-timestamp pull-right">3.36 PM</span>
421	</div>
422	<div class="direct-chat-info clearfix">
423	<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
424	<span class="direct-chat-reply-name">Singh</span>
425	<!-- XXX -->
426	<div class="direct-chat-text">
427	Yo
428	</div>
429	<!-- XXX -->
430	</div>
431	</div>
432	<!-- /.direct-chat-msg -->
433
434
435
436
437
438
439	</div>
440
441
442
443
444
445
446
447
448
449	</div>
450	<div class="popup-messages-footer">
451	<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
452	<div class="btn-footer">
453	<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
454	<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
455	<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
456	<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
457	</div>
458	</div>
459	</div>
460	</body></html>