<!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; function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { CHAT_SERVER_URL = chatServerUrl; CMS_SERVER_URL = cmsServerUrl; PLATFORM = platform; IS_MOBILE = isMobile; IS_ONLINE = isOnline; }; android.getGlobalParameter(); </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="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="my_info" class="inbox_user row"> </div> <div id="favorite_list" class="inbox_user row"> </div> <div id="my_group_list" class="inbox_user row"> </div> </div> </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) 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> <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav"> <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="message-template" type="text/template"> <div class="incoming_msg"> <div class="incoming_msg_img"> <img src={{{profileImage}}} alt=""> </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}}"> <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 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>