From 678082cd9926b9e7986215105daf32aee51ec43b Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 19 Nov 2018 17:25:35 +0100 Subject: [PATCH] chat template and styling added --- public_html/css/style.css | 214 ++++++++++++++++++++++++++++++++++++++ public_html/index.html | 168 +++++++++++++++++++++++++++++- 2 files changed, 381 insertions(+), 1 deletion(-) diff --git a/public_html/css/style.css b/public_html/css/style.css index e69de29..a276f58 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -0,0 +1,214 @@ +img { + max-width: 100%; +} + +.container { + margin: auto; + max-width: 1170px; +} + +.messaging { + padding: 0 0 50px 0; +} + +.inbox_people { + background: #f8f8f8 none repeat scroll 0 0; + border-left: 1px solid #c4c4c4; + float: right; + overflow: hidden; + width: 40%; +} + +.inbox_msg { + border: 1px solid #c4c4c4; + clear: both; + overflow: hidden; +} + +.recent_heading { + float: left; + width: 40%; +} + +.recent_heading h4 { + color: #05728f; + font-size: 21px; + margin: auto; +} + +/*Search*/ +.heading_search { + padding: 10px 29px 10px 20px; + overflow: hidden; + border-bottom: 1px solid #c4c4c4; +} + +.search_bar { + display: inline-block; + text-align: right; + width: 60%; +} + +.search_bar input { + background:none; + border-bottom: 1px solid #cdcdcd; + width: 80%; + padding: 2px 0 4px 6px; +} + +.search_bar .input-group-addon { + margin: 0 0 0 -30px; +} + +.search_bar .input-group-addon button { + background: rgba(0, 0, 0, 0) none repeat scroll 0 0; + border: medium none; + color: #707070; + font-size: 18px; + padding: 0; +} + +.chat_ib h5 { + color: #464646; + font-size: 15px; + margin: 0 0 8px 0; +} + +.chat_ib h5 span { + float: right; + font-size: 13px; +} + +.chat_ib p { + font-size: 14px; + color: #989898; + margin: auto; +} + +.chat_img { + float: left; + width: 11%; +} + +.chat_ib { + float: left; + padding: 0 0 0 15px; + width: 88%; +} + +.chat_people { + overflow:hidden; + clear:both; +} + +.chat_list { + border-bottom: 1px solid #c4c4c4; + margin: 0; + padding: 18px 16px 10px; +} + +.inbox_chat { + height: 550px; + overflow-y: scroll; +} + +.active_chat { + background:#ebebeb; +} + +.incoming_msg_img { + display: inline-block; + width: 6%; +} + +.received_msg { + display: inline-block; + padding: 0 0 0 10px; + vertical-align: top; + width: 92%; +} + +.received_withd_msg { + width: 57%; +} + +.received_withd_msg p { + background: #ebebeb none repeat scroll 0 0; + border-radius: 3px; + color: #646464; + font-size: 14px; + margin: 0; + padding: 5px 10px 5px 12px; + width: 100%; +} + +.messages { + float: left; + padding: 30px 15px 0 25px; + width: 60%; +} + +.time_date { + color: #747474; + display: block; + font-size: 12px; + margin: 8px 0 0; +} + +.sent_msg { + float: right; + width: 46%; +} + +.sent_msg p { + background: #05728f none repeat scroll 0 0; + border-radius: 3px; + font-size: 14px; + margin: 0; color:#fff; + padding: 5px 10px 5px 12px; + width:100%; +} + +.outgoing_msg { + overflow: hidden; + margin: 26px 0 26px; +} + + +.input_msg_write input { + background: rgba(0, 0, 0, 0) none repeat scroll 0 0; + border: medium none; + color: #4c4c4c; + font-size: 15px; + min-height: 48px; + width: 100%; +} + +.type_msg { + border-top: 1px solid #c4c4c4; + position: relative; +} + +.msg_send_btn { + background: #05728f none repeat scroll 0 0; + border: medium none; + border-radius: 50%; + color: #fff; + cursor: pointer; + font-size: 17px; + height: 33px; + position: absolute; + right: 0; + top: 11px; + width: 33px; +} + + +.msg_history { + height: 516px; + overflow-y: auto; +} + +.top_spac { + margin: 20px 0 0; +} \ No newline at end of file diff --git a/public_html/index.html b/public_html/index.html index e3b8927..cf37f79 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -11,7 +11,173 @@ -

InstantChat

+

InstantChat

+

- just add users

+ +
+
+
+
+
+
+

Recent

+
+
+
+ + + + +
+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
+
+
+
sunil
+
+
+

Test which is a new approach to have all + solutions

+ 11:01 AM | June 9
+
+
+
+
+

Test which is a new approach to have all + solutions

+ 11:01 AM | June 9
+
+
+
sunil
+
+
+

Test, which is a new approach to have

+ 11:01 AM | Yesterday
+
+
+
+
+

Apollo University, Delhi, India Test

+ 11:01 AM | Today
+
+
+
sunil
+
+
+

We work directly with our designers and suppliers, + and sell direct to you, which means quality, exclusive + products, at a price anyone can afford.

+ 11:01 AM | Today
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
+ + + + +