<!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>