<!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/footer.css">
<link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="#"><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="chat_make_room.html">
<img src="icon/icon_make_room.png" alt="ルーム開設">
</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="chat">
<!-- ユーザー検索 -->
<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 class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">グループ</label>
<input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">DM</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<ul>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail4 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail3 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail2 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="tab_content" id="tab2_content">
<div class="chat_list">
<ul>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- オーバーレイ -->
<div class="chat_list">
<ul class="overlay_src_msg">
</ul>
</div>
</main>
<!-- フッター -->
<footer>
<div class="footer-wrap">
<div class="d-flex justify-content-around h-100">
<div class="footer_item">
<a href="contact.html">
<img src="icon/icon_contact_gray.png" alt="コンタクト">
<p>コンタクト</p>
</a>
</div>
<div class="footer_item">
<a href="chat.html">
<img src="icon/icon_chat.png" alt="チャット">
<p class="active">チャット</p>
<span class="unread_num">999+</span>
</a>
</div>
<div class="footer_item">
<a href="archive.html">
<img src="icon/icon_archive_gray.png" alt="アーカイブ">
<p>アーカイブ</p>
</a>
</div>
</div>
</div>
</footer>
<!-- ローディング -->
<!--#include virtual="loading.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>