1+ < div class ="chat-panel panel panel-default ">
2+ < div class ="panel-heading ">
3+ < i class ="fa fa-comments fa-fw "> </ i >
4+ Chat
5+ < div class ="btn-group pull-right ">
6+ < button type ="button " class ="btn btn-default btn-xs dropdown-toggle " data-toggle ="dropdown ">
7+ < i class ="fa fa-chevron-down "> </ i >
8+ </ button >
9+ < ul class ="dropdown-menu slidedown ">
10+ < li >
11+ < a href ="# ">
12+ < i class ="fa fa-refresh fa-fw "> </ i > Refresh
13+ </ a >
14+ </ li >
15+ < li >
16+ < a href ="# ">
17+ < i class ="fa fa-check-circle fa-fw "> </ i > Available
18+ </ a >
19+ </ li >
20+ < li >
21+ < a href ="# ">
22+ < i class ="fa fa-times fa-fw "> </ i > Busy
23+ </ a >
24+ </ li >
25+ < li >
26+ < a href ="# ">
27+ < i class ="fa fa-clock-o fa-fw "> </ i > Away
28+ </ a >
29+ </ li >
30+ < li class ="divider "> </ li >
31+ < li >
32+ < a href ="# ">
33+ < i class ="fa fa-sign-out fa-fw "> </ i > Sign Out
34+ </ a >
35+ </ li >
36+ </ ul >
37+ </ div >
38+ </ div >
39+ <!-- /.panel-heading -->
40+ < div class ="panel-body ">
41+ < ul class ="chat ">
42+ < li class ="left clearfix ">
43+ < span class ="chat-img pull-left ">
44+ < img src ="http://placehold.it/50/55C1E7/fff " alt ="User Avatar " class ="img-circle ">
45+ </ span >
46+ < div class ="chat-body clearfix ">
47+ < div class ="header ">
48+ < strong class ="primary-font "> Jack Sparrow</ strong >
49+ < small class ="pull-right text-muted ">
50+ < i class ="fa fa-clock-o fa-fw "> </ i > 12 mins ago
51+ </ small >
52+ </ div >
53+ < p >
54+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
55+ </ p >
56+ </ div >
57+ </ li >
58+ < li class ="right clearfix ">
59+ < span class ="chat-img pull-right ">
60+ < img src ="http://placehold.it/50/FA6F57/fff " alt ="User Avatar " class ="img-circle ">
61+ </ span >
62+ < div class ="chat-body clearfix ">
63+ < div class ="header ">
64+ < small class =" text-muted ">
65+ < i class ="fa fa-clock-o fa-fw "> </ i > 13 mins ago</ small >
66+ < strong class ="pull-right primary-font "> Bhaumik Patel</ strong >
67+ </ div >
68+ < p >
69+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
70+ </ p >
71+ </ div >
72+ </ li >
73+ < li class ="left clearfix ">
74+ < span class ="chat-img pull-left ">
75+ < img src ="http://placehold.it/50/55C1E7/fff " alt ="User Avatar " class ="img-circle ">
76+ </ span >
77+ < div class ="chat-body clearfix ">
78+ < div class ="header ">
79+ < strong class ="primary-font "> Jack Sparrow</ strong >
80+ < small class ="pull-right text-muted ">
81+ < i class ="fa fa-clock-o fa-fw "> </ i > 14 mins ago</ small >
82+ </ div >
83+ < p >
84+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
85+ </ p >
86+ </ div >
87+ </ li >
88+ < li class ="right clearfix ">
89+ < span class ="chat-img pull-right ">
90+ < img src ="http://placehold.it/50/FA6F57/fff " alt ="User Avatar " class ="img-circle ">
91+ </ span >
92+ < div class ="chat-body clearfix ">
93+ < div class ="header ">
94+ < small class =" text-muted ">
95+ < i class ="fa fa-clock-o fa-fw "> </ i > 15 mins ago</ small >
96+ < strong class ="pull-right primary-font "> Bhaumik Patel</ strong >
97+ </ div >
98+ < p >
99+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
100+ </ p >
101+ </ div >
102+ </ li >
103+ </ ul >
104+ </ div >
105+ <!-- /.panel-body -->
106+ < div class ="panel-footer ">
107+ < div class ="input-group ">
108+ < input id ="btn-input " type ="text " class ="form-control input-sm " placeholder ="Type your message here... ">
109+ < span class ="input-group-btn ">
110+ < button class ="btn btn-warning btn-sm " id ="btn-chat ">
111+ Send
112+ </ button >
113+ </ span >
114+ </ div >
115+ </ div >
116+ <!-- /.panel-footer -->
117+ </ div >
0 commit comments