group.html

<!DOCTYPE html>
<html>

<head>
    <title>Let's chat!</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/group.css" />
</head>

<body>

    <script src="node_modules/jquery/dist/jquery.js"></script>

    <div class="login_style" id="login_interface" style=" background-color: aliceblue;">
        <!-- 登录页面 -->
        <h2>Username</h2>
        <!-- <button id="ID_AA" value="AA" onclick="getUserID(this.value)">AA</button>
        <button id="ID_BB" value="BB" onclick="getUserID(this.value)">BB</button>
        <button id="ID_CC" value="CC" onclick="getUserID(this.value)">CC</button>
        <button id="ID_A" class="Username" value="A" onclick="getUserID(this.value)">A</button>
        <button id="ID_B" class="Username" value="B" onclick="getUserID(this.value)">B</button>
        <button id="ID_C" class="Username" value="C" onclick="getUserID(this.value)">C</button> -->
        <!-- <input type="text" value="Please input your logon id!" id="UserName_Input"> -->
        <input type="text" id="UserName_Input" style="color:#999;width: 40%; float:left " value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}" />
        <button id="loginButton" value="Login" onclick="checkID('UserName_Input','friend_btn','group_btn')">Login</button>
    </div>

    <div class="choose_list" id="chooselist">
        <button type="button" id="friend_btn" onclick="showFriends('friend_btn','group_btn')">Friend</button>
        <button type="button" id="group_btn" onclick="showGroup('friend_btn','group_btn')">Group</button>
    </div>
    <div class="friend_list" id="friendlist">
        <!-- 好友列表 -->
        <!-- <div class="choose_list" id="chooselist">
            <button type="button" id="friend_btn" onclick="showFriends('friend_btn','group_btn')">Friend</button>
            <button type="button" id="group_btn" onclick="showGroup('friend_btn','group_btn')">Group</button>
        </div> -->
        <div class='fri_list' id="my_friend" style="display: none;">
            <div class='image'>
                <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
            </div>
            <div class='message'>This is our friend list</div>
            <button class="newmesbtn" style="padding: 0; display: none;">n</button>
        </div>

        <div class='fri_list' id="my_group" style="display: none;">
            <div class='image'>
                <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
            </div>
            <div class='message'>This is our group list</div>
            <button class="newmesbtn" style="padding: 0; display: none;">n</button>
        </div>




        <!--/*fri_list*/ -->

    </div>
    <div class="chat_systerm" id="chatsysterm">
        <!-- 整个聊天消息的格式 -->
        <div class='showname-box' id='showname_box'>
            <div class='showname' id='show_name'>Welcome!!</div>
        </div>
        <button id="groupnum" onclick="showGroupMembers()">...</button>
        <div class="chat_con" id="chat_content" style="display: block;">
            <div class='send-box' id='send_box' style="display: none;">
                <!-- 所有的本人发送的消息 -->
                <div class='image'>
                    <img src='images/kefu2.jpg' width='640' height='640' alt='picture'>
                </div>
                <div class='message'>这里是客服</div>
            </div>
            <div class='gromsg' id='gromsg_box' style="display: none;">
                <!-- 刚加的用来显示群组所接收的消息-->
                <div class='image'>
                    <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
                </div>
                <div class='message'>group message</div>
                <div class='name'>name</div>
            </div>
            <div class='msg-box' id='message_box' style=" display: none;">
                <!-- 所有双人聊天所接收的消息-->
                <div class='image'>
                    <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
                </div>
                <div class='message'>这里是用户</div>

            </div>
            <!-- <button id="groupnum">...</button> -->
        </div>


        <!-- chat_con -->
        <div class="backgro">
            <div class="button_list" id="buttonlist">

                <a href="javascript:;" class="video" id="video_btn" onclick="openVideoWindow(true,true)">video</a>
                <button type="button" id="picture_btn">Picture</button>
                <input type="file" id="findpicture" onchange="picture_send()" style="display: none;">
                <button type="button" id="file_btn">File</button>
                <input type="file" id="findFile" onchange="read_and_sendfile()" style="display: none;">
                <button id='emoji_btn'>emoji</button>
            </div>
            <!-- button_list -->
        </div>
        <textarea rows="3" cols="20" id="data_input"></textarea>
        <button class="btn-send" type="button" id='send-btn' onclick="sendMessage()">SEND</button>
    </div>
    <div class="hiddenarea" id="hiddenarea">
        <button id="hiddenact">Calling</button>
    </div>
    <div class="freceive" id="freceive" style=" background-color: aliceblue;">
        <!-- 接收文件页面 -->
        <div>
            <div class='uname' id="uname">这里是用户名</div>
            <h1>正在向你发送文件</h1>
            <div class='fname' id="fname">这里是文件名</div>
            <button id="recbtn">Receive</button>
            <button id="rejbtn">cancel</button>
        </div>
    </div>
    <div class='mydialog' id='mydialog'>
        <!-- 视频页面 -->
        <video id="localVideo" autoplay playsinline></video>
        <video id="remoteVideo" autoplay playsinline></video>
        <div>
            <button id="hangupButton">Hang Up</button>
        </div>
        <button id="hidebutton">x</button>
    </div>
    <div class='option_box' id='optionbox' style="display: none;">
        <!-- 点击好友菜单栏 -->
        <button id='video_btn' onclick="openVideoWindow(true,true)">Video Call</button>
        <button id='audio_btn' onclick="openVideoWindow(true,false)">Audio Call</button>
        <button id='picture_btn'>Send Message</button>
        <button id='file_btn'>Send File</button>
        <button id='delete_btn'>Delete</button>
    </div>
    <div class='group_member' id='groupmember' style="display: none;">
        <!-- 群成员列表，修改了id -->
        <div class='frelist' id='frelist' style="display: none;">
            <div class='image'>
                <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
            </div>
            <div class='message'>This is our friend</div>
            <button id='addbtn' value="name" onclick="addFriend(this.value)">+</button>
        </div>
    </div>

    <div class='add_number' id='addnumber'>
        <!-- "新添加"左下方搜索块 -->
        <input type="text" name="username" id="inputFriendorGroupName" style="color:#999;width: 40%; float:left " value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"
        />
        <button id="serbtn" onclick="findFriendorGroup('inputFriendorGroupName','ser_interface')">搜索</button>
        <button id="adbtn" onclick="openFrame('add_interface')">+</button>
        <button id="adddbtn" onclick="checkInviteMessage()">
            <img src = 'images/message.jpg' alt="picture" id="inviteMessageTips">
        </button>
    </div>

    <div class="add_style" id="add_interface" style=" background-color: aliceblue;">
        <!-- "新添加"加号添加好友 -->
        <button id="hidebtn" onclick="closeFrame('add_interface')">x</button>
        <p>
            <input type="text" name="username" id='inputName' style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}" />
            <button id='serbtn' onclick="searchUser('inputName')">找好友</button>
            <button id='adbtn'>找群</button>
        </p>
        <div class='frelist' id='frelist' style="display: none;">
            <div class='image'>
                <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
            </div>
            <div class='message'>Name</div>
            <button id='addbtn' value="value" onclick="func(this.value)">+</button>
        </div>

    </div>
    <div class="ser_style" id="ser_interface" style=" background-color: aliceblue;">
        <!-- "新添加"搜索圈内好友 -->
        <div class='frelist' id='frelist' style="display: none;">
            <div class='image'>
                <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
            </div>
            <div class='message'>Name</div>
        </div>
    </div>

    <div class="beadd_style" id="beadd_interface" style=" background-color: aliceblue; display: none">
        <!-- "新添加"添加好友被请求界面 -->
        <button id="hidebtn" onclick="closeFrame('beadd_interface')">x</button>
        <h2>
            好友请求
        </h2>
        <div class='reqlist' id='reqlist'>
            <div class='frelist' id='frelist' style="display: none;">
                <div class='image'>
                    <img src='images/arrow.jpg' width='640' height='640' alt='picture'>
                </div>
                <div class='message'>Name</div>
                <button id='agreebtn'>接受</button>
                <button id='rejebtn'>拒绝</button>
            </div>
        </div>
    </div>
    <div class="video_interface" id="video_interface" style=" background-color: aliceblue; display: none">
        <!-- "新添加"视频请求页面 -->
        <div>
            <div class='uname' id="calleename">这里是用户名</div>
            <h1>等待对方接受邀请</h1>
            <button id="hangbtn">cancel</button>
        </div>
    </div>
    <div class="vidrec_interface" id="vidrec_interface" style=" background-color: aliceblue; display: none;">
        <!-- "新添加"视频请求接收页面 -->
        <div>
            <div class='uname' id="callername">这里是用户名</div>
            <h1>正在向你请求视频通话</h1>
            <button id="recebtn" onclick="answerVideoChat(true)">PICK UP</button>
            <button id="rejecbtn" onclick="answerVideoChat(false)">CANCLE</button>
        </div>
    </div>

    <!-- <script src="js/Chat_system.js"></script> -->
    <script src="js/GroupChat.js"></script>
    <!-- <script src="js/GroupChat.js"></script> -->

</body>

</html>