<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <title>Prototype</title> <link href="./fontawesome/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/lightbox.min.css"> <link rel="stylesheet" href="./css/chat.css"> <link rel="stylesheet" href="./css/font-awesome.css"> <script> String.prototype.replaceAll = function(org, dest) { return this.split(org).join(dest); } let CHAT_SERVER_URL = ''; let CMS_SERVER_URL = ''; let ASSET_PATH = './'; let PLATFORM = ''; let IS_MOBILE = true; let IS_ONLINE = false; </script> </head> <body> <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow"> <ul class="navbar-nav col-3" id="navbarLeft"> <button class="btn btn-primary" type="button" id="backButton"> <i class="fa fa-arrow-left"></i> </button> <button class="btn btn-primary" type="button" id="homeButton"> <i class="fa fa-home" style="font-size: 1.6rem;"></i> </button> </ul> <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Chat</a> <ul class="navbar-nav col-3" id="navbarRight"> <!-- Chat Room Icons --> <li class="nav-item"> <button type="button" id="sidebarCollapse" class="btn btn-primary chatRoomIcon"> <i class="fas fa-bars"></i> </button> </li> <li class="nav-item"> <button type="button" id="userSelectionDeleteBtn" class="btn btn-primary"> <i class="fa fa-trash"></i> </button> </li> <li class="nav-item"> <button type="button" id="userSelectionConfirmBtn" class="btn btn-primary chatRoomIcon"> <span id="userSelectionLength" class="badge badge-light"></span> <i class="fas fa-check"></i> </button> <!-- Alert Dialog --> <div id="confirm" class="modal fade"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body" id="userSelectionTitle"> Are you sure? </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn" id="yesTitle">OK</button> </div> </div> </div> </div> </li> </ul> </nav> <!-- Sidebar --> <nav id="sidebar"> <div id="dismiss"> <i class="fas fa-arrow-right"></i> </div> <div class="sidebar-header"> <h4 id="participants">Participants</h4> </div> <div id="users"> </div> <footer class="sidebar-footer text-right"> <a class="btn text-light" role="button" id="exitRoom"> Exit <i class="fas fa-door-open"></i> </a> <!-- Confirm Dialog --> <div id="exitRoomConfirm" class="modal fade"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body" id="exitRoomTitle"> Are you sure? </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" id="exitRoomOk">Ok</button> <button type="button" data-dismiss="modal" class="btn" id="noExit">Cancel</button> </div> </div> </div> </div> </footer> </nav> <!-- Dark Overlay element --> <div class="overlay active"></div> <!-- loadingIndicator --> <div id="loadingIndicator"> <div class="spinner-border text-primary loader" role="status"> <span class="sr-only">Loading...</span> </div> </div> <!-- Error Alert Dialog --> <div id="customAlert" class="modal fade"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body" id="customAlertTitle"> Are you sure? </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" id="customAlertOk">Ok</button> </div> </div> </div> </div> <!-- Confirm Dialog --> <div id="customConfirm" class="modal fade"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body" id="customConfirmTitle"> Are you sure? </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" id="customConfirmOk">Ok</button> <button type="button" data-dismiss="modal" class="btn" id="customAlertCancel">Cancel</button> </div> </div> </div> </div> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab"> <div class="search-group"> <div class="input-group search-bar-fixed"> <input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="" autocomplete="off"> </div> </div> <div class="text-center"> <button type="button" class="btn btn-primary chat-list-type-btn" id="dmBtn"></button> <button type="button" class="btn btn-primary chat-list-type-btn" id="groupBtn"></button> </div> <div class="inbox_people"> <div id="room_list" class="inbox_chat row"> </div> <a id="createChatRoom" href="#" class="floating_plus_btn"> <i class="fa fa-plus my-float"></i> </a> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> ... </div> <div class="tab-pane fade" id="pills-communication" role="tabpanel" aria-labelledby="pills-communication-tab"> ... </div> <div class="tab-pane fade" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab"> ... </div> <!-- invisible tabs --> <div class="tab-pane fade" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab"> <div class="input-group search-bar-fixed"> <input style="font-family:Arial, FontAwesome" id="message-search" type="text" class="write_msg form-control" placeholder="" name="message" autocomplete="off"> <div class="input-group-append"> <button type="button" class="btn input-group-text dropdown-toggle-split" id="pre-search" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-arrow-up"></i> </button> </div> </div> <div class="mesgs"> <div class="msg_history" id="messages"> </div> <div class="type_msg fixed-bottom"> <div class="row"> <div class="msg_notification" id="messageNotification"> </div> </div> <div class="input_msg_write"> <div class="input-group"> <div class="input-group-prepend"> <button class="btn input-group-text dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-camera"></i></button> <!-- Video Upload --> <div class="dropdown-menu"> <a class="dropdown-item" id="fileUploadButton" href="#">Photo <a href="#"> <form id="image-form"> <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg"> </form> </a> </a> <a class="dropdown-item" id="fileUploadButton2" href="#">Video <a href="#"> <form id="image-form2"> <input class="d-none" type="file" name="image" id="imageInputTag2" accept="video/mp4"> </form> </a> </a> </div> </div> <input id="message-form" type="text" class="write_msg form-control" name="message" placeholder="Type a message" autocomplete="off"> <div class="input-group-append"> <button id="message-send-btn" class="btn input-group-text" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="inbox_people" > <div class="heading_srch"> <div class="srch_bar"> <div class="stylish-input-group"> <input id="contactListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="input-group-addon"> <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </span> </div> </div> </div> <div id="groupButtonArea" class="text-center border-bottom-gray"> <button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button> <button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button> </div> <div id="myGroupArea"> <div id="my_info" class="inbox_user row"> </div> <label class="contact-seperator" id="favorite-seperator">Favorite</label> <div id="favorite_list" class="inbox_user row"> </div> <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label> <div id="my_group_list" class="inbox_user row"> </div> </div> <div id="allGroupArea"> <label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label> <div id="groupPathArea" style="float:left;"> </div> <label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label> <div id="groupBtnArea"> <div class="user_list col-12" id="rootGroupBtn"> <div class="user_people"> <div class="user_ib"> <h5>MOVE TO ROOT GROUP</h5> </div> </div> </div> <div class="user_list col-12" id="parentGroupBtn"> <div class="user_people"> <div class="user_ib"> <h5>MOVE TO PARENTS GROUP</h5> </div> </div> </div> </div> <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label> <div id="childGroupList" class="inbox_user row group-search-list"> </div> <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label> <div id="userInGroupList" class="inbox_user row group-search-list"> </div> </div> </div> </div> <div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab"> <div class="inbox_archive"> <div class="heading_srch"> <div class="srch_bar"> <div class="stylish-input-group"> <input id="contactListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="input-group-addon"> <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </span> </div> </div> </div> <div id="archive_list" class="inbox_archive row"> </div> </div> </div> <div id="archive_detail" class="archive_detail" > </div> <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab"> <div class="inbox_people"> <div class="heading_srch"> <div class="srch_bar"> <div class="stylish-input-group"> <input id="groupListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="input-group-addon"> <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </span> </div> </div> </div> <div id="group_list" class="inbox_user row"> </div> </div> </div> <div class="tab-pane fade" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab"> <div class="inbox_people"> <div class="heading_srch"> <div class="recent_heading"> <h4 id="groupName"></h4> </div> </div> <div class="heading_srch"> <div class="srch_bar"> <div class="stylish-input-group"> <input id="userListKeyword" type="text" class="search-bar" placeholder="Search"> <span class="input-group-addon"> <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </span> </div> </div> </div> <div id="user_list" class="inbox_user row"> </div> </div> </div> <div class="tab-pane fade" id="pills-confirm" role="tabpanel" aria-labelledby="pills-confirm-tab"> <div class="inbox_people"> <div class="heading_srch"> <div class="recent_heading"> <h3 id="inviteStatus"></h3> <div class="srch_bar"> <div class="stylish-input-group"> <input id="newRoomName" type="text" class="search-bar" placeholder="Room name" aria-label="Search"> </div> </div> </div> </div> <div class="data_srch"> <h3 id="invitedUsers"></h3> <div id="select_user_list" class="inbox_user row"> </div> </div> </div> </div> </div> <ul class="icon-bar fixed-bottom nav nav-pills mb-0" id="pills-tab" role="tablist"> <!-- Display None (d-none) chatList --> <li class="nav-item d-flex justify-content-center"> <a class="nav-link active" id="pills-chatlist-tab" data-toggle="pill" href="#pills-chatlist" role="tab" aria-controls="pills-chatlist" aria-selected="true"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) chat --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-chat-tab" data-toggle="pill" href="#pills-chat" role="tab" aria-controls="pills-chat" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) contact --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) archive --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-archive-tab" data-toggle="pill" href="#pills-archive" role="tab" aria-controls="pills-archive" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) chatList --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) chatList --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab" aria-controls="pills-user" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <!-- Display None (d-none) chatList --> <li class="nav-item d-none justify-content-center"> <a class="nav-link" id="pills-confirm-tab" data-toggle="pill" href="#pills-confirm" role="tab" aria-controls="pills-confirm" aria-selected="false"> <i class="fa fa-comments fa-6" aria-hidden="true"></i> </a> </li> <li class="nav-item d-flex justify-content-center"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false"> <i class="fa fa-file-alt fa-6" aria-hidden="true"></i> </a> </li> <li class="nav-item d-flex justify-content-center"> <a class="nav-link" id="pills-communication-tab" data-toggle="pill" href="#pills-communication" role="tab" aria-controls="pills-communication" aria-selected="false"> <i class="fa fa-users fa-6" aria-hidden="true"></i> </a> </li> <li class="nav-item d-flex justify-content-center"> <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#pills-setting" role="tab" aria-controls="pills-setting" aria-selected="false"> <i class="fa fa-cog fa-6" aria-hidden="true"></i> </a> </li> </ul> </div> <div class="popup" id="myNamecard"></div> <div class="popup" id="userNamecard"></div> <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav"> <div class="col-4"> <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton"> </div> <div class="col-4"> <img src="./icon/ic_communication_menu.png" style="width: 35%;" id="chatButton"> </div> <div class="col-4"> <img src="./icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton"> </div> </nav> <script id="my-namecard-template" type="text/template"> <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div> <div class="namecard_img"> <img src="./images/user-profile.png" alt> <div class="namedard-img-upload" >Upload</div> <div class="namecard-login-id" >{{name}}</div> </div> <div id="myGroupNameList"> {{#groupPathList}} <li><b>{{.}}</b></li> {{/groupPathList}} </div> </script> <script id="namecard-template" type="text/template"> <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div> <div class="namecard_img"> <img src="./images/user-profile.png" alt> <div class="namecard-login-id">{{name}}</div> </div> <div id="groupNameList"> {{#groupPathList}} <li><b>{{.}}</b></li> {{/groupPathList}} </div> <div class="text-center"> <button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button> <button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button> {{#isFavorite}} <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button> {{/isFavorite}} {{^isFavotire}} <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button> {{/isFavorite}} </div> </script> <script id="message-template" type="text/template"> <div class="incoming_msg"> <div class="incoming_msg_img"> <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" > </div> <div class="received_msg"> <div class="received_withd_msg"> <p class="message_content">{{text}}</p> <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span> </div> </div> </div> </script> <script id="message-template-me" type="text/template"> <div class="outgoing_msg"> <div class="sent_msg"> <p class="message_content">{{text}}</p> <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span> </div> </div> </script> <script id="room-template" type="text/template"> <div class="chat_list {{active}} col-12" data-roomName="{{roomName}}" data-room-id="{{roomId}}"> <div class="chat_people"> <div class="chat_img"> <img src={{{profileImage}}} alt=""> </div> <div class="chat_ib"> <div class="row"> <div class="col-8"> <h5 class=""> <div class="room-list-title"> <span class="text-truncate room-name-font">{{roomName}}</span> <span class="text-muted room-member-count">{{userCnt}}</span> </div> </h5> </div> <div class="col-4"> <span class="chat_date">{{time}}</span> </div> </div> <p class="text-truncate float-left">{{lastMessage}}</p><span class="badge badge-pill badge-danger float-right unreadMsgCnt">{{unreadMsgCnt}}</span> </div> <div class="squareBox deleteBox" data-room-id="{{roomId}}" data-active-room="{{active}}"> <div class="squareBoxContent"> <div> <span> <i class="fa fa-trash"></i> </span> </div> </div> </div> </div> </div> </script> <script id="group-template" type="text/template"> <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}"> <div class="group_people"> <div class="group_img"> <img src="./images/group-image.png" alt=""> </div> <div class="group_ib"> <h5>{{name}}</h5> <p>{{info}}</p> </div> </div> </div> </script> <script id="user-template" type="text/template"> <div class="user_list col-12" data-name="{{name}}"> <div class="user_people"> <div class="user_img"> <img src="{{profileImage}}" alt=""> </div> <div class="user_ib"> <h5>{{name}}</h5> <p>{{info}}</p> </div> <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}"> <div class="squareBoxContent"> <div> <span> <i class="fas fa-check"></i> </span> </div> </div> </div> </div> </div> </script> <script id="group-navigater-template" type="text/template"> <label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label> </script> <script id="favorite-user-template" type="text/template"> <div class="user_list col-12" data-name="{{name}}"> <div class="user_people"> <div class="user_img"> <img src="{{profileImage}}" alt=""> </div> <div class="user_ib"> <h5>{{name}}</h5> <p>{{info}}</p> </div> <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}"> <div class="squareBoxContent"> <div> <span> <i class="fas fa-check"></i> </span> </div> </div> </div> </div> </div> </script> <script id="archive-template" type="text/template"> <div class="archive_list col-12"> <div class="archive_data"> <div class="archive_img"> <img src={{thumbnailImage}} alt=""> </div> <div class="archive_ib"> <div class="row"> <div class="archive_date_font col-10"> <span class="archive_date">{{insertDate}}</span> </div> <div class="archive_type"> <span class="text-truncate col-2 {{type}}">{{archiveType}}</span> </div> </div> <p class="archive_file_name text-truncate">{{fileName}}</p> </div> </div> </div> </script> <script id="archive-detail-template" type="text/template"> <div id="archive_player" class="player"> </div> <ul class="archive_info"> <li class="fileName"> <h5>{{fileNameTitle}}</h5> <p class="text-truncate">{{fileName}}</p> </li> <li class="insertDate"> <h5>{{saveDateTitle}}</h5> <p class="text-truncate">{{insertDate}}</p> </li> <li class="chatRoomName"> <h5>{{roomNameTitle}}</h5> <p class="text-truncate">{{chatRoomName}} <input type="button" value=">" id="joinChatRoom"> </p> </li> <li class="saveUser"> <h5>{{saveUserTitle}}</h5> <ul class="save_user_list" id="save_user"> </ul> </li> <li class="joinUser"> <h5>{{attendUserTitle}}</h5> <ul class="join_user_list" id="join_user"> </ul> </li> </ul> </script> <script id="archive-user-template" type="text/template"> <li class="archive_user"> <img src="{{profileImage}}" alt=""> <p>{{userName}}</p> </li> </script> <script src="./socket.io/dist/socket.io.js"></script> <script src="./js/libs/socket.io.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/popper.min.js"></script> <script src="./js/libs/moment.js"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script> <script src="./js/libs/mustache.min.js"></script> <script src="./js/libs/deparam.js"></script> <script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/lightbox.js"></script> <script src="./js/language.js"></script> <script src="./js/language_ko.js" charset="UTF-8"></script> <script src="./js/language_ja.js" charset="UTF-8"></script> <script src="./js/language_en.js" charset="UTF-8"></script> <script src="./js/constant.js"></script> <script src="./js/chat.js"></script> <script src="./js/chat-ui.js"></script> <script src="./js/chat-util.js"></script> <script src="./js/chat-db.js"></script> <script src="./js/chat-websocket.js"></script> </body> <script> jQuery('#homeButton').on('click', function() { if (CHAT_UTIL.isIOS()) { webkit.messageHandlers.goHome.postMessage({}); } else if (CHAT_UTIL.isAndroid()) { android.goHome(); } }); </script> </html>