Skip to content

Commit

Permalink
feat(WIP): VideoRentalUI
Browse files Browse the repository at this point in the history
  • Loading branch information
@k2works
k2works committed Dec 14, 2019
1 parent 9b0d17b commit 20e0021
Showing 1 changed file with 301 additions and 2 deletions.
303 changes: 301 additions & 2 deletions src/page/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,305 @@ <h1>練習プログラム集</h1>
<!-- /ナビゲーションバー -->
<!-- メイン -->
<main>
<section id="mocha"></section>
<main>
<div class="py-4">
<div class="container">
<div class="carousel slide" data-ride="carousel" id="main_visual">
<ol class="carousel-indicators">
<li
class="active"
data-slide-to="0"
data-target="#main_visual"
></li>
<li data-slide-to="1" data-target="#main_visual"></li>
<li data-slide-to="2" data-target="#main_visual"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
alt="映画1"
class="img-fluid"
src="https://placehold.jp/1440x488.png"
/>
<div class="carousel-caption d-none d-md-block">
<h2>映画1</h2>
<p>
1枚目のスライド画像とキャプションが入ります
</p>
</div>
</div>
<div class="carousel-item">
<img
alt="映画2"
class="img-fluid"
src="https://placehold.jp/1440x488.png"
/>
<div class="carousel-caption d-none d-md-block">
<h2>映画2</h2>
<p>
2枚目のスライド画層とキャプションが入ります
</p>
</div>
</div>
<div class="carousel-item">
<img
alt="映画3"
class="img-fluid"
src="https://placehold.jp/1440x488.png"
/>
<div class="carousel-caption d-none d-md-block">
<h2>映画3</h2>
<p>
3枚目のスライド画層とキャプションが入ります
</p>
</div>
</div>
</div>
<a
class="carousel-control-prev"
data-slide="prev"
href="#main_visual"
role="button"
>
<span
aria-hidden="true"
class="carousel-control-prev-icon"
></span>
<span class="sr-only">前に戻る</span>
</a>
<a
class="carousel-control-next"
data-slide="next"
href="#main_visual"
role="button"
>
<span
aria-hidden="true"
class="carousel-control-next-icon"
></span>
<span class="sr-only">次に進む</span>
</a>
</div>
</div>
</div>

<div class="py-4">
<section id="news">
<div class="container">
<div class="row">
<div class="col-md-2">
<h3>News</h3>
</div>
<div class="col-md-10">
<dl class="row">
<dt class="col-md-3">2019年○月○日</dt>
<dd class="col-md-9">お知らせが入る</dd>
</dl>
</div>
</div>
</div>
</section>
</div>

<div class="py-4 bg-light">
<section id="about">
<div class="container">
<div class="row mb-4">
<div class="col-md-8 mb-3">
<h3 class="mb-3">今月のおすすめ</h3>
<p>
今月のおすすめ内容が入る
</p>
</div>
<div class="col-md-4">
<img
alt="今月のおすすめ"
class="img-fluid"
src="https://placehold.jp/400x400.png"
/>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画1</h4>
<button
class="btn btn-secondary"
data-target="#modal01"
data-toggle="modal"
>
詳しく見る
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画2</h4>
<button
class="btn btn-secondary"
data-target="#modal02"
data-toggle="modal"
>
詳しく見る
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画3</h4>
<button
class="btn btn-secondary"
data-target="#modal03"
data-toggle="modal"
>
詳しく見る
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画4</h4>
<button
class="btn btn-secondary"
data-target="#modal04"
data-toggle="modal"
>
詳しく見る
</butto>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画5</h4>
<button
class="btn btn-secondary"
data-target="#modal05"
data-toggle="modal"
>
詳しく見る
</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img
alt=""
class="img-fluid"
src="https://placehold.jp/380x160.png"
/>
<div class="card-body d-flex justify-content-between">
<h4 class="card-title">映画6</h4>
<button
class="btn btn-secondary"
data-target="#modal06"
data-toggle="modal"
>
詳しく見る
</button>
</div>
</div>
</div>
</div>
<div
aria-hidden="true"
aria-labelledby="modal01-label"
class="modal fade"
id="modal01"
role="dialog"
tabindex="-1"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal01-label">映画1</h5>
<button
aria-label="Close"
class="close"
data-dismiss="modal"
type="button"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p class="text-center">
<img
alt="#"
class="img-fluid"
src="https://placehold.jp/380x300.png"
/>
</p>
<p>
映画1の説明
</p>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
data-dismiss="modal"
type="button"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

<div class="py-4">
<section id="statement">
<div class="container">
<div class="row">
<div id="statement-detail"></div>
</div>
<div class="row">
<a class="btn btn-info" href="#">印刷</a>
</div>
</div>
</section>
</div>

</main>

<!-- コンテンツ01 -->
<div id="app-dev"></div>
<!-- /コンテンツ01 -->
Expand All @@ -41,6 +339,7 @@ <h1>練習プログラム集</h1>
<div id="footer"></div>
<!-- /フッター -->
<div id="dev">
<section id="mocha"></section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
Expand Down Expand Up @@ -780,7 +1079,7 @@ <h2>アプリケーション</h2>
customer.addRental(rental);

document.querySelector(
"#video-rental-app"
"#statement-detail"
).innerHTML = customer.htmlStatement();
</script>
<script src="./lib/markdown.js"></script>
Expand Down

0 comments on commit 20e0021

Please sign in to comment.