-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (192 loc) · 7.74 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="./search/search.css" />
<link rel="stylesheet" href="./recommendation/slide-feature.css" />
<link rel="stylesheet" href="./globalStyle.css"/>
<title>NINE MOVIE</title>
</head>
<body>
<section class="header">
<nav class="navbar">
<a href="index.html" class="logo"> NINE MOVIE </a>
<div class="menus">
<button>영화</button>
<button>인기</button>
<button>최신</button>
</div>
<div class="navbar_right">
<button
class="fas fa-search icon-button search-icon"
onclick="openNav()"
></button>
<a href="/wishlist/wishlist.html">
<button
class="fa fa-heart icon-button favorite-icon"
onclick="favoriteIcon()"
></button
></a>
</div>
</nav>
<!-- Search Input 검색 기능 -->
<div class="top-menu" id="topnav">
<div class="search-box">
<div class="inner">
<div class="inner-search">
<input
type="text"
id="search-input"
placeholder="제목, 인물명을 입력하세요"
/>
<button
onclick="getMoviesByKeyword()"
class="fas fa-search icon-button search-open-icon"
id="myBtn"
></button>
</div>
<button class="closeBtn" onclick="closeNav()">×</button>
</div>
<!-- 20240720 수정 -->
<!-- Search 내부의 영화리스트 슬라이더 기능 -->
<div id="movie-search-board" class="swiper-container movies-container">
<div class="swiper-wrapper">
<!-- 영화 리스트 -->
</div>
<!-- 슬라이드를 nav-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
<!-- 20240720 수정 -->
<main>
<div id="initial-movie-board" class="movie-container container">
<div class="row">
<div class="col"></div>
</div>
</div>
</div>
</main>
<!-- 슬라이드쇼 및 추천 콘텐츠 기능 -->
<section id="second-section">
<div id="popular-img-carousel" class="carousel-window">
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<!-- JavaScript에서 인디케이터가 여기에 추가될 것입니다. -->
</div>
<div class="carousel-inner">
<!-- 여기서 JavaScript를 통해 동적으로 이미지가 추가될 것입니다. -->
</div>
</div>
</div>
<div class="card-castom">
<!-- card 커스텀 슬라이더 기능 구현하기 구역 -->
<div class="container movie-list-container">
<div>
<h1 class="movie-list-title">인기 영화</h1>
<div class="movie-list-wrapper">
<span id="left-arrow-popular" class="arrow-left"><</span>
<div class="popular-movie-list">
<!-- card 커스텀 JavaScript을 통해 동적으로 이미지 및 슬라이드 실행 영역 -->
</div>
<span id="right-arrow-popular" class="arrow-right">></span>
</div>
</div>
<div>
<h1 class="movie-list-title">지금 상영 영화</h1>
<div class="movie-list-wrapper">
<span id="left-arrow-now-playing" class="arrow-left"><</span>
<div class="now-playing-movie-list">
<!-- card 커스텀 JavaScript을 통해 동적으로 이미지 및 슬라이드 실행 영역 -->
</div>
<span id="right-arrow-now-playing" class="arrow-right">></span>
</div>
</div>
<div>
<h1 class="movie-list-title">최신 영화</h1>
<div class="movie-list-wrapper">
<span id="left-arrow-trending" class="arrow-left"><</span>
<div class="trending-movie-list">
<!-- card 커스텀 JavaScript을 통해 동적으로 이미지 및 슬라이드 실행 영역 -->
</div>
<span id="right-arrow-trending" class="arrow-right">></span>
</div>
</div>
<div>
<h1 class="movie-list-title">개봉예정 영화</h1>
<div class="movie-list-wrapper">
<span id="left-arrow-upcoming" class="arrow-left"><</span>
<div class="upcoming-movie-list">
<!-- card 커스텀 JavaScript을 통해 동적으로 이미지 및 슬라이드 실행 영역 -->
</div>
<span id="right-arrow-upcoming" class="arrow-right">></span>
</div>
</div>
<div>
<h1 class="movie-list-title">높은평점 영화</h1>
<div class="movie-list-wrapper">
<span id="left-arrow-topRated" class="arrow-left"><</span>
<div class="topRated-movie-list">
<!-- card 커스텀 JavaScript을 통해 동적으로 이미지 및 슬라이드 실행 영역 -->
</div>
<span id="right-arrow-topRated" class="arrow-right">></span>
</div>
</div>
</div>
</div>
</section>
<footer class="container">
<div class="footer-top">
<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>
</div>
<div class="footer-middle">
<p>
고객센터 (평일 09시 ~ 17시/점심시간 13시 ~ 14시) | 1:1 게시판 문의 |
대표메일:nuna@jc.net | 전화번호:1111-1111<br />
NINEMOVIE 시청자 상담실(편성 문의 및 시청자 의견):123-123-1234 | ninenet
고객센터(방송편성문의):3333-3333
</p>
</div>
<div class="footer-bottom">
<div class="social-icons">
<a href="#"><img src="../img/instagram.png" alt="Instagram" /></a>
<a href="#"><img src="../img/youtube.png" alt="YouTube" /></a>
<a href="#"><img src="../img/twitter.png" alt="Twitter" /></a>
</div>
<p>© 주식회사 누나 All rights reserved</p>
</div>
</footer>
</section>
<!-- End of 슬라이드쇼 및 추천 콘텐츠 기능 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"
defer></script>
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script> -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./search/search.js" defer></script>
<script src="./recommendation/recommendation.js" defer></script>
<script>
function navigateToDetail(movieId) {
window.location.href = `/detail/detail.html?id=${movieId}`;
}
</script>
</body>
</html>