archive_detail.html 5.23 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
<!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/archive.css">
  <link rel="stylesheet" href="./css/footer.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="archive.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">
        </div>
      </div><!-- .col -->
    </div><!-- .row -->
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="archive">
    <!-- アーカイブ詳細 -->
    <div class="archive_detail">
      <div class="archive_detail_hero text-center">
        <div class="img_wrap">
          <img src="img/capture.png" alt="サンプル画像">
        </div>
        <div class="img_wrap">
        <img src="img/controller.png" alt="サンプル画像">
        </div>
      </div>
      <div class="archive_detail_desc">
        <div class="archive_detail_fl_nm item">
          <h2 class="ttl">ファイル名</h2>
          <span>filename.mp4</span>
        </div>
        <div class="archive_detail_sv_date item">
          <h2 class="ttl">保存日</h2>
          <span>2021/02/24 16:14</span>
        </div>
        <div class="archive_detail_room_nm item">
          <h2 class="ttl">チャットルーム名</h2>
          <span>チャットルーム名チャットルーム名チャットルーム名チャットルーム名</span>
        </div>
        <div class="archive_detail_sv_user item">
          <h2 class="ttl">保存ユーザー</h2>
          <div class="d-flex flex-row">
            <div class="d-flex flex-column">
              <img src="img/noImage.png" alt="プロフィール画像">
              <span>名前名前名前名前名前名前</span>
            </div>
          </div>
        </div>
        <div class="archive_detail_user_list item">
          <h2 class="ttl">参加ユーザー</h2>
          <ul class="d-flex flex-row">
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前名前名前名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前名前名前名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前名前名前名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
            <li>
              <div class="d-flex flex-column">
                <img src="img/noImage.png" alt="プロフィール画像">
                <span>名前名前</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </main>

<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/archive.js"></script>
<script src="./js/common.js"></script>
</body>
</html>