diff --git a/public_html/css/style.css b/public_html/css/style.css index e69de29..b72ebbb 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -0,0 +1,256 @@ +img { + max-width: 100%; +} + +.container { + margin: auto; + max-width: 1170px; +} + +.messaging { + overflow: hidden; + padding: 0 0 50px 0; + position: relative; +} + +.messaging_heading { + border: 1px solid #c4c4c4; + border-bottom: 0; + padding: 10px 29px 10px 20px; + overflow: hidden; +} + +.inbox_msg { + border: 1px solid #c4c4c4; + clear: both; + overflow: hidden; +} + +/* mobile */ +#sidebar { + align-items: stretch; + border: 1px solid #c4c4c4; + background: #f8f8f8 none repeat scroll 0 0; + display: flex; + flex-direction: column; + position: absolute; + top: 0; + transform: translateX(100%); + transition-duration: 0.7s; + width: 100%; + z-index: 1; +} + +/* desktop */ +@media (min-width: 768px) { + #sidebar { + border-left: 1px solid #c4c4c4; + /*float: right;*/ + /*position: relative;*/ + overflow: hidden; + /*width: 40%;*/ + } +} + +#sidebar.active { + left: 0; + transform: none; + transition-duration: 0.7s; +} + +@media (min-width: 768px) { + #sidebar.active { + right: 0; + position: relative; + transform: none; + transition-duration: 0.7s; + width: 40%; + } +} + +.sidebar_heading { + float: left; + width: 40%; +} + +/*Search*/ +.heading_search { + border-bottom: 1px solid #c4c4c4; + padding: 10px 29px 10px 20px; + overflow: hidden; +} + +.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 { + float: left; + padding: 0 0 0 15px; + width: 88%; +} + +.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_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 { + padding: 30px 15px 0 25px; + width: 100%; +} + +@media (min-width: 768px) { + .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_send_btn svg { + fill: #ffffff; +} + +.msg_history { + height: 516px; + overflow-y: auto; +} \ No newline at end of file diff --git a/public_html/index.html b/public_html/index.html index 743795d..acbd0bd 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -5,16 +5,184 @@ InstantChat - -

InstantChat

+

InstantChat

+

- just add users

+ +
+
+
+ +
+ +
+ + +
+
+
+
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 +
+
+
+
+
+
+ + +
+
+
+
+ +
+
+ diff --git a/public_html/js/sidebar.js b/public_html/js/sidebar.js new file mode 100644 index 0000000..25e46f0 --- /dev/null +++ b/public_html/js/sidebar.js @@ -0,0 +1,12 @@ +// https://bootstrapious.com/p/bootstrap-sidebar +$(document).ready(function () { + + $('#sidebarCollapse').on('click touch', function () { + $('#sidebar').removeClass('active'); + }); + + $('#sidebarShow').on('click touch', function () { + $('#sidebar').addClass('active'); + }); + +}); \ No newline at end of file