Skip to content

Commit 20e0021

Browse files
k2worksk2works
committed
feat(WIP): VideoRentalUI
1 parent 9b0d17b commit 20e0021

1 file changed

Lines changed: 301 additions & 2 deletions

File tree

‎src/page/index.html‎

Lines changed: 301 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,305 @@ <h1>練習プログラム集</h1>
3131
<!-- /ナビゲーションバー -->
3232
<!-- メイン -->
3333
<main>
34-
<section id="mocha"></section>
34+
<main>
35+
<div class="py-4">
36+
<div class="container">
37+
<div class="carousel slide" data-ride="carousel" id="main_visual">
38+
<ol class="carousel-indicators">
39+
<li
40+
class="active"
41+
data-slide-to="0"
42+
data-target="#main_visual"
43+
></li>
44+
<li data-slide-to="1" data-target="#main_visual"></li>
45+
<li data-slide-to="2" data-target="#main_visual"></li>
46+
</ol>
47+
<div class="carousel-inner">
48+
<div class="carousel-item active">
49+
<img
50+
alt="映画1"
51+
class="img-fluid"
52+
src="https://placehold.jp/1440x488.png"
53+
/>
54+
<div class="carousel-caption d-none d-md-block">
55+
<h2>映画1</h2>
56+
<p>
57+
1枚目のスライド画像とキャプションが入ります
58+
</p>
59+
</div>
60+
</div>
61+
<div class="carousel-item">
62+
<img
63+
alt="映画2"
64+
class="img-fluid"
65+
src="https://placehold.jp/1440x488.png"
66+
/>
67+
<div class="carousel-caption d-none d-md-block">
68+
<h2>映画2</h2>
69+
<p>
70+
2枚目のスライド画層とキャプションが入ります
71+
</p>
72+
</div>
73+
</div>
74+
<div class="carousel-item">
75+
<img
76+
alt="映画3"
77+
class="img-fluid"
78+
src="https://placehold.jp/1440x488.png"
79+
/>
80+
<div class="carousel-caption d-none d-md-block">
81+
<h2>映画3</h2>
82+
<p>
83+
3枚目のスライド画層とキャプションが入ります
84+
</p>
85+
</div>
86+
</div>
87+
</div>
88+
<a
89+
class="carousel-control-prev"
90+
data-slide="prev"
91+
href="#main_visual"
92+
role="button"
93+
>
94+
<span
95+
aria-hidden="true"
96+
class="carousel-control-prev-icon"
97+
></span>
98+
<span class="sr-only">前に戻る</span>
99+
</a>
100+
<a
101+
class="carousel-control-next"
102+
data-slide="next"
103+
href="#main_visual"
104+
role="button"
105+
>
106+
<span
107+
aria-hidden="true"
108+
class="carousel-control-next-icon"
109+
></span>
110+
<span class="sr-only">次に進む</span>
111+
</a>
112+
</div>
113+
</div>
114+
</div>
115+
116+
<div class="py-4">
117+
<section id="news">
118+
<div class="container">
119+
<div class="row">
120+
<div class="col-md-2">
121+
<h3>News</h3>
122+
</div>
123+
<div class="col-md-10">
124+
<dl class="row">
125+
<dt class="col-md-3">2019年○月○日</dt>
126+
<dd class="col-md-9">お知らせが入る</dd>
127+
</dl>
128+
</div>
129+
</div>
130+
</div>
131+
</section>
132+
</div>
133+
134+
<div class="py-4 bg-light">
135+
<section id="about">
136+
<div class="container">
137+
<div class="row mb-4">
138+
<div class="col-md-8 mb-3">
139+
<h3 class="mb-3">今月のおすすめ</h3>
140+
<p>
141+
今月のおすすめ内容が入る
142+
</p>
143+
</div>
144+
<div class="col-md-4">
145+
<img
146+
alt="今月のおすすめ"
147+
class="img-fluid"
148+
src="https://placehold.jp/400x400.png"
149+
/>
150+
</div>
151+
</div>
152+
153+
<div class="row">
154+
<div class="col-md-4">
155+
<div class="card mb-3">
156+
<img
157+
alt=""
158+
class="img-fluid"
159+
src="https://placehold.jp/380x160.png"
160+
/>
161+
<div class="card-body d-flex justify-content-between">
162+
<h4 class="card-title">映画1</h4>
163+
<button
164+
class="btn btn-secondary"
165+
data-target="#modal01"
166+
data-toggle="modal"
167+
>
168+
詳しく見る
169+
</button>
170+
</div>
171+
</div>
172+
</div>
173+
<div class="col-md-4">
174+
<div class="card mb-3">
175+
<img
176+
alt=""
177+
class="img-fluid"
178+
src="https://placehold.jp/380x160.png"
179+
/>
180+
<div class="card-body d-flex justify-content-between">
181+
<h4 class="card-title">映画2</h4>
182+
<button
183+
class="btn btn-secondary"
184+
data-target="#modal02"
185+
data-toggle="modal"
186+
>
187+
詳しく見る
188+
</button>
189+
</div>
190+
</div>
191+
</div>
192+
<div class="col-md-4">
193+
<div class="card mb-3">
194+
<img
195+
alt=""
196+
class="img-fluid"
197+
src="https://placehold.jp/380x160.png"
198+
/>
199+
<div class="card-body d-flex justify-content-between">
200+
<h4 class="card-title">映画3</h4>
201+
<button
202+
class="btn btn-secondary"
203+
data-target="#modal03"
204+
data-toggle="modal"
205+
>
206+
詳しく見る
207+
</button>
208+
</div>
209+
</div>
210+
</div>
211+
<div class="col-md-4">
212+
<div class="card mb-3">
213+
<img
214+
alt=""
215+
class="img-fluid"
216+
src="https://placehold.jp/380x160.png"
217+
/>
218+
<div class="card-body d-flex justify-content-between">
219+
<h4 class="card-title">映画4</h4>
220+
<button
221+
class="btn btn-secondary"
222+
data-target="#modal04"
223+
data-toggle="modal"
224+
>
225+
詳しく見る
226+
</butto>
227+
</div>
228+
</div>
229+
</div>
230+
<div class="col-md-4">
231+
<div class="card mb-3">
232+
<img
233+
alt=""
234+
class="img-fluid"
235+
src="https://placehold.jp/380x160.png"
236+
/>
237+
<div class="card-body d-flex justify-content-between">
238+
<h4 class="card-title">映画5</h4>
239+
<button
240+
class="btn btn-secondary"
241+
data-target="#modal05"
242+
data-toggle="modal"
243+
>
244+
詳しく見る
245+
</button>
246+
</div>
247+
</div>
248+
</div>
249+
<div class="col-md-4">
250+
<div class="card mb-3">
251+
<img
252+
alt=""
253+
class="img-fluid"
254+
src="https://placehold.jp/380x160.png"
255+
/>
256+
<div class="card-body d-flex justify-content-between">
257+
<h4 class="card-title">映画6</h4>
258+
<button
259+
class="btn btn-secondary"
260+
data-target="#modal06"
261+
data-toggle="modal"
262+
>
263+
詳しく見る
264+
</button>
265+
</div>
266+
</div>
267+
</div>
268+
</div>
269+
<div
270+
aria-hidden="true"
271+
aria-labelledby="modal01-label"
272+
class="modal fade"
273+
id="modal01"
274+
role="dialog"
275+
tabindex="-1"
276+
>
277+
<div class="modal-dialog modal-dialog-centered" role="document">
278+
<div class="modal-content">
279+
<div class="modal-header">
280+
<h5 class="modal-title" id="modal01-label">映画1</h5>
281+
<button
282+
aria-label="Close"
283+
class="close"
284+
data-dismiss="modal"
285+
type="button"
286+
>
287+
<span aria-hidden="true">&times;</span>
288+
</button>
289+
</div>
290+
<div class="modal-body">
291+
<p class="text-center">
292+
<img
293+
alt="#"
294+
class="img-fluid"
295+
src="https://placehold.jp/380x300.png"
296+
/>
297+
</p>
298+
<p>
299+
映画1の説明
300+
</p>
301+
</div>
302+
<div class="modal-footer">
303+
<button
304+
class="btn btn-secondary"
305+
data-dismiss="modal"
306+
type="button"
307+
>
308+
Close
309+
</button>
310+
</div>
311+
</div>
312+
</div>
313+
</div>
314+
</div>
315+
</section>
316+
</div>
317+
318+
<div class="py-4">
319+
<section id="statement">
320+
<div class="container">
321+
<div class="row">
322+
<div id="statement-detail"></div>
323+
</div>
324+
<div class="row">
325+
<a class="btn btn-info" href="#">印刷</a>
326+
</div>
327+
</div>
328+
</section>
329+
</div>
330+
331+
</main>
332+
35333
<!-- コンテンツ01 -->
36334
<div id="app-dev"></div>
37335
<!-- /コンテンツ01 -->
@@ -41,6 +339,7 @@ <h1>練習プログラム集</h1>
41339
<div id="footer"></div>
42340
<!-- /フッター -->
43341
<div id="dev">
342+
<section id="mocha"></section>
44343
<!-- Optional JavaScript -->
45344
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
46345
<script
@@ -780,7 +1079,7 @@ <h2>アプリケーション</h2>
7801079
customer.addRental(rental);
7811080

7821081
document.querySelector(
783-
"#video-rental-app"
1082+
"#statement-detail"
7841083
).innerHTML = customer.htmlStatement();
7851084
</script>
7861085
<script src="./lib/markdown.js"></script>

0 commit comments

Comments
 (0)