<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>WEB IM</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <script src="../../static/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="main">
    <div class="main_inner clearfix">
        <div class="toolbar pull-left">
            <div class="bar LeftNav">
                <div class="LeftNav-item">
                    <div class="user"><img class="userPic Avatar--22"
                                           src="https://dn-linedesigner.qbox.me/images/w1.png?imageView2/1/w/72/h/72">
                        <i class="Presence Presence--stacked Presence--toolbar"></i>
                    </div>
                </div>
                <div class="LeftNav-item iconfont-single"><a href="javascript:void 0">single chat</a></div>
                <div class="LeftNav-item iconfont-group"><a href="javascript:void 0">group chat</a></div>
                <div class="LeftNav-item iconfont-add"><a href="javascript:void 0">add</a></div>
            </div>
        </div>
        <div class="mainBox pull-left">
            <form class="searchArea">
                <div class="form-group">
                    <input type="text" class="form-control" id="search" placeholder="搜索">
                    <i class=""></i>
                </div>
            </form>
            <div class="chatArea">
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item online slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="chatList">
                    <div class="chat_item offline slide-left">
                        <div class="ext">
                            <p class="attr">14:25</p>

                            <p class="attr">
                                <i class="no-remind"></i>
                            </p>
                        </div>
                        <div class="photo">
                            <img class="img" src="../../static/images/barBg.png" alt="">
                            <i class="Presence Presence--stacked Presence--mainBox"></i>
                        </div>
                        <div class="info">
                            <h3 class="nickname">
                                <span class="nickname_text">超聊</span>
                            </h3>

                            <p class="msg ng-scope" ng-if="chatContact.MMDigest">
                                <span ng-if="chatContact.NoticeCount>1 &amp;&amp; chatContact.isMuted()"
                                      class="ng-binding ng-scope">[16条]</span>
                                <span ng-bind-html="chatContact.MMDigest" class="ng-binding">收到红包，请在手机上查看</span>
                            </p>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <div class="chatBox">
            <!--header-->
            <div class="box_hd">
                <div class="title_wrap">
                    <a class="phone_return">back</a>

                    <div class="title">
                        <a class="title_name">超聊</a>
                        <span class="title_count ">(16)</span>
                        <i class="Presence Presence--stacked Presence--chatBox"></i>
                    </div>
                </div>
            </div>
            <!-- content -->
            <div id="Messages">
                <div class="Message-wrapper">
                    <div class="Messages-date"><b class="">2015 年 8 月 6日</b></div>
                    <div class="Message">
                        <div class="Messages-unreadLine"></div>
                        <div>
                            <div class="Message-header "><img class="img u-isActionable Message-avatar avatar"
                                                              src="../../static/images/barBg.png" alt="">

                                <div class="Message-author clearfix"><a class="author u-isActionable">超聊</a>
                                    <span class="time " title="2015 年 8 月 6 日">15:55</span>
                                </div>
                            </div>
                        </div>
                        <div class="Message-body">
                            <div class="">
                                <div class="Message-text"><span class="Message-entry">开心麻花本周日的话剧票还有嘛？<br></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="Message">
                        <div class="Messages-unreadLine"></div>
                        <div>
                            <div class="Message-header "><img class="img u-isActionable Message-avatar avatar"
                                                              src="../../static/images/barBg.png" alt="">

                                <div class="Message-author clearfix">
                                    <a class="author u-isActionable">超聊</a>
                                    <span class="time " title="2015 年 8 月 6 日">15:56</span>
                                </div>
                            </div>
                        </div>
                        <div class="Message-body">
                            <div class="">
                                <div class="Message-text"><span class="Message-entry">开心麻花本周日的话剧票还有嘛？<br></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Message-wrapper">
                    <div class="Messages-date"><b class="">2015 年 8 月 21日</b></div>
                    <div class="Message">
                        <div class="Messages-unreadLine"></div>
                        <div>
                            <div class="Message-header"><img class="img u-isActionable Message-avatar avatar"
                                                             src="../../static/images/barBg.png" alt="">

                                <div class="Message-author clearfix">
                                    <a class="author u-isActionable">超聊</a>
                                    <span class="time" title="2015 年 8 月 21 日">13:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="Message-body">
                            <div class="">
                                <div class="Message-text">
                                    <span class="Message-entry" style="">维护中 由于我们的服务商出现故障，超聊官网及相关服务也受到影响，给各位用户带来的不便，还请谅解。  您可以通过 <a
                                            href="#">【官方微博】</a>了解</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="Message">
                        <div class="Messages-unreadLine"></div>
                        <div>
                            <div class="Message-header"><img class="img u-isActionable Message-avatar avatar"
                                                             src="../../static/images/barBg.png" alt="">

                                <div class="Message-author clearfix">
                                    <a class="author u-isActionable">超聊</a>
                                    <span class="time" title="2015 年 8 月 21 日">13:01</span>
                                </div>
                            </div>
                        </div>
                        <div class="Message-body">
                            <div class="">
                                <div class="Message-img">
                                    <span class="Message-entry" style="">
                                        <p>发给您一张示意图</p>
                                        <img src="../../static/images/barBg.png" alt=""/>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- inputBox -->
            <div class="inputBox">
                <div id="MessageForm" class="">
                    <div id="MessageForm-header">
                        <div class="MessageForm-tool"><i class="iconfont-smile"></i></div>
                        <div class="MessageForm-tool"><i class="iconfont-upload" id="upload-file"
                                                         style="position: relative; z-index: 1;"></i>

                            <div class="moxie-shim moxie-shim-html5"
                                 style="position: absolute; top: 5px; left: 0px; width: 20px; height: 15px; overflow: hidden; z-index: 0;">
                                <input type="file"
                                       style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
                                       multiple="" accept="">
                            </div>
                        </div>
                    </div>
                    <!--<div class="progress-wrapper ng-isolate-scope ng-hide"><span class="progress-text ng-binding">正在上传: 0 % (0.0 B)</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 0%;"></div>
                        </div>
                        <a class="progress-cancel">取消</a>
                    </div>-->
                    <!--<span class="MessageForm-status ng-binding ng-scope ng-hide" style="">正在输入……</span>-->
                    <!--<span class="MessageForm-status ng-hide">正在重新连接……</span>-->
                </div>
                <div class="MessageForm-appearance">
                    <textarea id="messageInput" placeholder="请输入文字..."> </textarea>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
</body>
<script>
    $(function () {
        $('.searchArea').on('focus', 'input', function () {
            $('.searchArea div').addClass('isfocus');
        });
        $('.searchArea').on('blur', 'input', function () {
            $('#search').val().trim() ? void 0 : $('.searchArea div').removeClass('isfocus');
        });
        $('.chatArea').css("height", document.documentElement.clientHeight - 54);
        $('#Messages').css("height", document.documentElement.clientHeight - $('.inputBox').height() - $('.box_hd').height())

        $(window).resize(function () {
            $('.chatArea').css("height", document.documentElement.clientHeight - 54);
            $('#Messages').css("height", document.documentElement.clientHeight - $('.inputBox').height() - $('.box_hd').height())
        });
        $(document.body).on('click', '.phone_return', function () {
            $('.chatBox').hide();
            $('.toolbar').show();
            $('.mainBox').show().css('width', document.documentElement.clientWidth - $('.toolbar').width());

        })
    })
</script>
</html>