<!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>LiveTaskyell</title> <!--<link rel="stylesheet" href="./css/notosansjp.css">--> <link href="./fontawesome/css/all.css" rel="stylesheet"> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/chat.css"> <link rel="stylesheet" href="./css/chat_room_footer.css"> <link rel="stylesheet" href="./css/font-awesome.css"> </head> <body> <!-- ナビメニュー --> <nav> <div class="chat_room_src_form none"> <form class="d-flex flex-row h-100 align-items-center"> <input type="search" name="search" placeholder="ユーザー検索"> <span class="src_icon"></span> <a href="#" class="cancel">キャンセル</a> </form> </div> <div class="row nav_item_wrap h-100 align-items-center"> <div class="col-4 pr-0"> <div class="nav-item"> <div class="nav_prev"> <a href="chat.html"><span>チャット</span></a> </div> </div> </div> <div class="col-4 p-0"> <div class="nav-item p-0"> <h1 class="nav-ttl">ルーム名ルーム名ルーム名ルーム名</h1> </div> </div> <div class="col-4 pl-0"> <div class="nav-item text-right"> <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a> <a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png" alt="メニュー"></a> </div> </div><!-- .col --> </div><!-- .row --> </nav><!-- nav --> <!-- コンテンツ --> <main id="chat_room"> <div id="user_list" class="user_list d-flex flex-row"> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> <div class="user_item"> <a href="#" data-toggle="modal" data-target="#profileModal1"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </a> </div> </div> <!-- フィルター --> <div id="filter" class="user_list filter d-flex flex-row none"> <div class="user_item"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </div> <div class="user_item"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </div> <div class="user_item"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </div> <div class="user_item"> <div class="d-flex flex-column"> <div class="img_wrap"> <img src="img/noImage.png" alt="プロフィール画像"> </div> <span>名前名前名前名前名前名前名前名前</span> </div> </div> </div> <div class="chat_list"> <ul class="overlay_src_msg"> </ul> </div> <!-- チャット内容 --> <div class="room_container"> <div class="room_contents scroll"> <div class="sys_msg text-center"> チャット開始<br> 参加ユーザ<br> OOさん<br> OOさん<br> OOさん </div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="img/noImage.png" alt="プロフィール画像"></a> </figure> <div class="room_left-text"> <div class="name">名前名前名前名前</div> <div class="text"> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 </div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <div class="sys_msg text-center">2021/03/04</div> <!-- 自分の吹き出し --> <div class="room_right"> <div class="text"> ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <div class="sys_msg text-center">OOさんが参加しました</div> <div class="sys_msg text-center">OOさんがルームを非表示にしました</div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <img src="img/noImage.png" alt="プロフィール画像"> </figure> <div class="room_left-text"> <div class="name">名前名前名前名前</div> <div class="text">ここにテキストが入ります。</div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="unread d-flex align-items-end"><span>10</span></div> </div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <img src="img/noImage.png" alt="プロフィール画像"> </figure> <div class="room_left-text"> <div class="name">名前名前名前名前</div> <div class="text">ここにテキストが入ります。</div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <img src="img/noImage.png" alt="プロフィール画像"> </figure> <div class="room_left-text"> <div class="name">名前名前名前名前</div> <div class="img_wrap"> <img src="img/sample.jpg" alt="画像"> </div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <!-- 自分の吹き出し --> <div class="room_right"> <div class="text">ここにテキストが入ります。</div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="unread d-flex align-items-end"><span>999+</span></div> </div> <!-- 自分の吹き出し --> <div class="room_right"> <div class="img_wrap"> <img src="img/sample.jpg" alt="画像"> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <img src="img/noImage.png" alt="プロフィール画像"> </figure> <div class="room_left-text"> <div class="name">名前名前名前名前</div> <div class="text">ここにテキストが入ります。</div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <!-- 相手の吹き出し --> <div class="room_left"> <figure> <img src="img/noImage.png" alt="プロフィール画像"> </figure> <div class="room_left-text latest"> <div class="name">名前名前名前名前</div> <div class="text">ここにテキストが入ります。</div> </div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="read d-flex align-items-end"><span>既読</span></div> </div> <!-- 通話 --> <div class="collabo_area_container"> <!-- 時刻 --> <div class="collabo_date text-right"> <span>12:23 PM</span> </div> <div class="collabo_area"> <div class="collabo_desc"> <div class="collabo_room_name d-flex flex-row"> <span>ルーム名ルーム名ルーム名ルーム名</span> <span>の通話</span> </div> <div class="d-flex flex-row justify-content-between"> <div class="collabo_user_list d-flex flex-row"> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="num"><span>10</span></div> </div> <div class="collabo_time"> <span>1:10:20</span> </div> </div> <div class="collabo_btn"> <button type="button" name="button"> <img src="icon/icon_profile_phone.png" alt="通話"> <span>参加する</span> </button> </div> </div> </div> </div> <!-- 通話 --> <div class="collabo_area_container"> <!-- 時刻 --> <div class="collabo_date text-right"> <span>12:23 PM</span> </div> <div class="collabo_area disable"> <div class="collabo_desc"> <div class="collabo_room_name d-flex flex-row"> <span>ルーム名ルーム名</span> <span>の通話</span> </div> <div class="d-flex flex-row justify-content-between"> <div class="collabo_user_list d-flex flex-row"> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div> <div class="num"><span>10</span></div> </div> <div class="collabo_time"> <span>1:10:20</span> </div> </div> <div class="collabo_btn"> <button type="button" name="button"> <img src="icon/icon_profile_phone.png" alt="通話"> <span>終了しました</span> </button> </div> </div> </div> </div> </div> </div> </main> <!-- フッター --> <footer class="chat_room_footer"> <!-- フッター上 --> <div class="footer-wrap d-flex flex-column"> <div class="footer_content_t"> <div class="d-flex flex-row h-100"> <div class="footer_item"> <a href="#"> <img src="icon/icon_camera.png" alt="写真アイコン"> </a> </div> <div class="footer_item"> <a href="#"> <img src="icon/icon_videocam.png" alt="動画アイコン"> </a> </div> <input type="text" name="message" placeholder="メッセージを入力してください"> </div> </div> <!-- フッター下 --> <div class="footer_content_b"> <div class="d-flex flex-row justify-content-around h-100"> <div class="footer_item"> <a href="collaboration_voice.html"> <img src="icon/icon_phone.png" alt="通話アイコン"> <p>通話</p> </a> </div> <div class="footer_item"> <a href="collaboration_documents.html"> <img src="icon/icon_paste.png" alt="文書アイコン"> <p>文書</p> </a> </div> <div class="footer_item"> <a href="collaboration_picture.html"> <img src="icon/icon_photo.png" alt="画像アイコン"> <p>画像</p> </a> </div> <div class="footer_item"> <a href="collaboration_video.html"> <img src="icon/icon_movie.png" alt="動画アイコン"> <p>動画</p> </a> </div> <div class="footer_item"> <a href="collaboration_whiteboard.html"> <img src="icon/icon_whiteboad_gray.png" alt="ホワイトボードアイコン"> <p>ボード</p> </a> </div> </div> </div> </div> </footer> <!-- メニューモーダル --> <!--#include virtual="modal_chat_menu.html" --> <!-- プロフィールモーダル --> <!--#include virtual="modal_chat_profile.html" --> <script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/moment.js"></script> <script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/chat.js"></script> <script src="./js/common.js"></script> </body> </html>