<!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/collaboration.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
  <!-- ナビメニュー -->
  <header id="collabo_header">
    <div class="d-flex align-items-center h-100">
      <div class="collabo_nav_l text-left w-100">
        通話中
        <span>15:20</span>
      </div>
      <div class="collabo_nav_r">
        <div class="text-right d-flex align-items-center">
          <button type="button" name="button" class="btn user_btn"></button>
          <button type="button" name="button" class="btn add_user_btn"></button>
          <button type="button" name="button" class="btn menu_btn"></button>
        </div>
      </div>
    </div>
  </header><!-- header -->

  <!-- 拡大縮小機能 -->
  <!--#include virtual="zoom.html" -->

  <!-- コンテンツ -->
  <main id="collabo_main">
    <div class="whiteboard_wrap">
    </div>
  </main>

  <!-- ユーザー追加オーバーレイ -->
  <div id="overlay_add_user_list" class="none">
    <nav>
      <div class="row h-100 align-items-center">
        <div class="col-4 pr-0">
          <div class="nav-item">
            <a href="#" class="close_btn">閉じる</a>
          </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="inv_btn">招待</a>
          </div>
        </div><!-- .col -->
      </div><!-- .row -->
    </nav><!-- nav -->
    <!-- ユーザー検索 -->
    <div class="search_form">
      <form>
        <input type="search" name="search" placeholder="ユーザー検索">
        <span class="src_icon"></span>
        <a href="#" class="cancel none">キャンセル</a>
      </form>
    </div>
    <!-- ユーザーリスト -->
    <div id="add_user_list"></div>
  </div>

  <!-- オーバーレイ メニュー -->
  <!--#include virtual="collaboration_video_overlay_menu.html" -->

  <!-- オーバーレイ ユーザーリスト -->
  <div id="overlay_user_list" class="overlay noscroll">
    <!--#include virtual="collabotarion_overlay_user_list.html" -->
  </div>

  <!-- キャプチャ モーダル -->
  <!--#include virtual="modal_collabo_capture.html" -->

  <!-- プロフィールモーダル -->
  <!--#include virtual="modal_collabo_profile.html" -->
  <!--#include virtual="modal_collabo_profile2.html" -->

  <!-- ホスト変更モーダル -->
  <!--#include virtual="modal_collabo_change_host.html" -->

  <!-- ホストリクエストモーダル -->
  <!--#include virtual="modal_collabo_host_request.html" -->

  <!-- フッター -->
  <footer id="collabo_footer_menu" class="active">
    <button type="button" name="button" class="footer_menu_btn"></button>
    <div class="footer_menu-wrap d-flex justify-content-around h-100">
      <div class="d-flex align-items-center h-100">
        <div class="footer_menu_item">
          <a href="#">
            <div class="img_wrap bg_blue">
              <img src="icon/icon_collabo_pen_white.png" alt="ペン">
            </div>
          </a>
        </div>
        <div class="footer_menu_item">
          <a href="#">
            <div class="img_wrap bg_blue">
              <img src="icon/icon_collabo_place_white.png" alt="場所">
            </div>
          </a>
        </div>
        <div class="footer_menu_item">
          <a href="#">
            <div class="img_wrap bg_blue">
              <img src="icon/icon_collabo_delete_white.png" alt="削除">
            </div>
          </a>
        </div>
      </div>
      <div class="d-flex align-items-center h-100">
        <div class="footer_menu_item">
        </div>
        <div class="footer_menu_item">
        </div>
      </div>
    </div>
  </footer>
  <!-- フッター -->
  <!--#include virtual="footer_collabo.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>
<script src="./js/collaboration.js"></script>
</body>
</html>