-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathview.html
250 lines (248 loc) · 12.9 KB
/
view.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="description" content="K-netflix 왓챠 클론 프로젝트입니다.">
<meta name="keywords" content="GOTCHA,gotcha,갓챠,갓쨔,OTT,랜덤재생">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<title>Gotcha</title>
<link rel="stylesheet" href="dist/css/style.css">
<script src="dist/js/main.bundle.js" type="text/javascript" defer></script>
</head>
<body>
<header-component></header-component>
<main class="main">
<div class="viewContainer">
<!-- 탭 리스트 -->
<div class="viewTab">
<ul class="viewTab__list" role="tablist">
<li class="viewTab__list--item btn-left" role="tab" tabindex="0" aria-selected="true" aria-controls="basicInfo" data-tab="basicInfo">
<button class="viewTab-btnMove is-active" id="tab-basic">기본정보</button>
</li>
<li class="viewTab__list--item btn-center" role="tab" tabindex="-1" aria-selected="false" aria-controls="contentDetail" data-tab="contentDetail">
<button class="viewTab-btnMove" id="tab-detail">상세정보</button>
</li>
<li class="viewTab__list--item btn-right" role="tab" tabindex="-1" aria-selected="false" aria-controls="similarContent" data-tab="similarContent">
<button class="viewTab-btnMove" id="tab-similar" >비슷한 작품</button>
</li>
</ul>
<div class="viewTab__tabPanel current">
<!-- 기본 정보 탭 -->
<div class="viewRating">
<h2 class="viewRating__title">먹스터디</h2>
<div class="viewRating__generalInfo">
<div class="viewRating__expect is-primary">
<span>예상 별점</span>
<span class="viewRating__expect--ratio">4.8</span>
</div>
<div class="viewRating__avg">
<span>평균 별점</span>
<span class="viewRating__avg--ratio">4.6</span>
</div>
<p class="viewRating--pg">15세, 2시간 45분</p>
</div>
</div>
<div class="viewTab__tabPanel--item basic-info is-active" id="basicInfo" tabindex="0" role="tabpanel"
aria-labelledby="tab-basic">
<div class="otherFunc">
<button class="otherFunc__play">재생</button>
<div class="otherFunc__custom">
<button class="otherFunc__wantList">보고싶어요</button>
<div class="otherFunc__survey">평가하기
<div class="otherFunc__survey--starWrap">
<span class="otherFunc__survey--star is-empty">☆☆☆☆☆</span>
<span class="otherFunc__survey--star is-full">★★★★★</span>
</div>
</div>
</div>
</div>
<div class="summary">
<strong class="summary__trending">왓챠피디아 회원들이 가장 보고싶어하는 상위 1% 작품</strong>
<p class="summary__desc">8월 28일, 그날이 왔다. 명목상 프로젝트때문에 모였지만, 정작 만나서 온갖 종류의 산해진미를 먹기 시작한다.
그들이 먹은 음식만 나열해도 수십가지, 그 중 그들이 꼽은 최고의 음식을 소개한다.
</p>
</div>
<dl class="contentInfo">
<div class="contentInfo__director">
<dt class="contentInfo__general">감독</dt>
<dd>
<a href="#">박태준</a>
</dd>
</div>
<div class="contentInfo__cast">
<dt class="contentInfo__general">출연</dt>
<dd>
<a href="#">김정호</a>
<a href="#">박바름</a>
<a href="#">박지영</a>
</dd>
</div>
<div class="contentInfo__abstract">
<dt class="contentInfo__general">개요</dt>
<dd>
<a href="#">스릴러 /</a>
</dd>
<dd>
<a href="#">한국 /</a>
</dd>
<dd>
<a href="#">2021년</a>
</dd>
</div>
</dl>
</div>
<!-- 상세정보 탭 -->
<div class="viewTab__tabPanel--item content-detail" id="contentDetail" tabindex="0" role="tabpanel"
aria-labelledby="tab-detail">
<div class="content-detail__left">
<dl class="briefInfo">
<dt class="briefInfo__general">감독 : </dt>
<dd class="briefInfo__director">
<a href="#">박태준</a>
</dd>
<dt class="briefInfo__general">출연: </dt>
<dd class="briefInfo__cast">
<a href="#">김정호 </a>
<a href="#">박바름 </a>
<a href="#">박지영 </a>
<a href="#">박태준 </a>
<a href="#">육회초밥 </a>
<a href="#">빵 </a>
<a href="#">아이스크림 케이크 </a>
<a href="#">팝콘 </a>
<a href="#">견과류 </a>
</dd>
</dl>
</div>
<div class="content-detail__right">
<div class="avg-star">
<div class="otherFunc__survey">평균별점
<div class="otherFunc__survey--starWrap">
<span class="otherFunc__survey--star is-empty">☆☆☆☆☆</span>
<span class="otherFunc__survey--star is-full2">★★★★★</span>
</div>
</div>
<p class="is-strong">4.6</p>
<p>97654명</p>
</div>
<div class="comment">
<h3 class="comment__userIdea">갓챠 사용자 평</h3>
<div class="comment__firstGroup">
<p class="comment__id">호야와 쓰리박</p>
<p class="comment__opinion">이 영화를 보고 육회가 두려워졌다.</p>
<button class="comment__like">65</button>
<p class="comment__id">패캠</p>
<p class="comment__opinion">그저 경이롭다. 이렇게 직접 현장에 있듯 100% 실감나는 영화가 있었나싶고, 엄청난 퀘스트를 이루어야하는 상황에서 음식을
포기하지않는 그
열정을 너무도 잘 그려냈다. 영화의 발전이 정말 눈부시다 느꼈다. 배경도 음식도 마지막 씬까지 그저 정말 경이로울 뿐이다. 영화를 사랑할 수 밖에 없게 만드는 영화는 이런
영화겠지.</p>
<button class="comment__like">232</button>
</div>
<div class="comment__secondGroup">
<p class="comment__id">살려줘</p>
<p class="comment__opinion">육회초밥에 의한, 육회초밥을 위한</p>
<button class="comment__like">21</button>
<p class="comment__id">DTD</p>
<p class="comment__opinion">모든것을 앗아간 음식이 모든것을 되돌려줬다. 그리고 말한다.슬픔도 절망도 희망도 돌아보면 진주같은 음식이었다는것을.
망할 평론가들은 개나줘버리고 빵이나 먹으러 가자!</p>
<button class="comment__like">112</button>
</div>
</div>
</div>
</div>
<!-- 비슷한 작품 탭 -->
<div class="viewTab__tabPanel--item similar-content" id="similarContent" tabindex="0" role="tabpanel"
aria-labelledby="tab-similar">
<h3 class="similarContent__recommendation">비슷한 작품</h3>
<ul class="movieList__wrap">
<li class="movieList__item">
<a href="#" aria-label="POINT: MOVIE 재생하기">
<figure class="movieList__item--wrap">
<picture>
<source srcset="dist/assets/thumbnail/popcorn.webp" type="image/webp">
<img class="movieList__item--thumbnail" src="dist/assets/thumbnail/popcorn.png" alt="서프라이즈 팝콘">
</picture>
<figcaption class="movieList__wrap--desc">
<p class="movieList__item--title">서프라이즈 팝콘</p>
<div class="movieList__item--movieInfo">
<p>17세 . 11시간 37분</p>
<p class="movieList__item--moveiAbstract">
평화로운 토요일, 호야와 쓰리박은 수상한 팝콘을 사게된다.
놀랍게도 그들이 산 팝콘은 2등 상품을 가지고 있었는데...
이 쿠폰을 가지기 위해 치열한 경쟁을 시작하게 된다...!
</p>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="movieList__item">
<a href="#" aria-label="POINT: MOVIE 재생하기">
<figure class="movieList__item--wrap">
<picture>
<source srcset="dist/assets/thumbnail/lastfull.webp" type="image/webp">
<img class="movieList__item--thumbnail" src="dist/assets/thumbnail/lastfull.png" alt="라스트 풀 메져">
</picture>
<figcaption class="movieList__wrap--desc">
<p class="movieList__item--title">라스트 풀 메져</p>
<div class="movieList__item--movieInfo">
<p>15세 • 1시간 56분</p>
<p class="movieList__item--moveiAbstract">
대규모의 미군 사상자를 낸 애블린 전투에서 전우들을 위해 희생한 공군 항공대원 피츠. 32년 후, 피츠에게 명예 훈장을 수여하기 위해 조사하던 변호사 스콧 허프만은 국가의 은폐된 진실을 알게 된다.
</p>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="movieList__item">
<a href="#" aria-label="POINT: MOVIE 재생하기">
<figure class="movieList__item--wrap">
<picture>
<source srcset="dist/assets/thumbnail/lalaland.webp" type="image/webp">
<img class="movieList__item--thumbnail" src="dist/assets/thumbnail/lalaland.png" alt="라라랜드">
</picture>
<figcaption class="movieList__wrap--desc">
<p class="movieList__item--title">라라랜드</p>
<div class="movieList__item--movieInfo">
<p>12세 • 2시간 7분</p>
<p class="movieList__item--moveiAbstract">
재즈의 부활을 꿈꾸는 피아니스트 세바스찬과 성공을 꿈꾸는 배우 지망생 미아. 인생에서 가장 빛나는 순간 만난 두 사람은 미완성인 서로의 무대를 함께 만들어가기 시작한다.
</p>
</div>
</figcaption>
</figure>
</a>
</li>
<li class="movieList__item">
<a href="#" aria-label="POINT: MOVIE 재생하기">
<figure class="movieList__item--wrap">
<picture>
<source srcset="dist/assets/thumbnail/ama.webp" type="image/webp">
<img class="movieList__item--thumbnail"
src="dist/assets/thumbnail/ama.png" alt="아르마딜로">
</picture>
<figcaption class="movieList__wrap--desc">
<p class="movieList__item--title">아르마딜로</p>
<div class="movieList__item--movieInfo">
<p>15세 . 1시간 48분</p>
<p class="movieList__item--moveiAbstract">
아프가니스탄 최전선 아르마딜로 캠프에 파병된 덴마크 청년들은 설렘과 두려움으로 6개월간의 복무를 시작한다.
</p>
</div>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<footer-component></footer-component>
</body>
</html>