-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
229 lines (205 loc) · 8.62 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
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
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<title>Movie WatchList</title>
</head>
<body>
<!--Navigation Bar-->
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand has-background-black px-3">
<h1 class="navbar-item has-background-black has-text-light is-size-3" id="nav-logo">
Team One
</h1>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-centered has-background-light" id="nav-pop-mov" href="./watchlist.html">
Watchlist
</a>
<a class="navbar-item has-text-centered has-background-light" id="nav-pop-mov" href="#popular-movies">
Popular Movies
</a>
<a class="navbar-item has-text-centered has-background-light" id="nav-pop-tv" href="#popular-tv">
Popular TV Shows
</a>
<a class="navbar-item has-text-centered has-background-light" id="nav-watchlist" href="#top-movies">
Top Rated Movies
</a>
<a class="navbar-item has-text-centered has-background-light" id="nav-watchlist" href="#top-tv">
Top Rated TV Shows
</a>
</div>
</div>
</nav>
<!--Hero Section-->
<section class="hero is-medium is-link">
<div class="hero-body">
<h2 class="title has-text-light is-size-1">
Welcome!
</h2>
<p class="subtitle has-text-light is-size-3">
"Tons of Movies and TV shows to build your WatchList! Enjoy!"
</p>
</div>
<form class="columns is-desktop" id="inner-search-form" action="/search" method="get" accept-charset="utf-8">
<label class="column">
<div class="control column is-full form-group">
<input class="input is-rounded" type="text" placeholder="Search for a movie or tv show" id="inputValue">
</div>
<div class="buttons column">
<button class="button is-black mb-1" type="submit" id="search">Search</button>
</div>
</label>
<div class="control column">
<p class="mb-2 ml-3 has-text-light is-size-4">Choose Category To Search</p>
<label class="radio mt-1 mr-5">
<input type="radio" name="answer" checked>
Movies
</label>
<label class="radio">
<input type="radio" name="answer">
TV Shows
</label>
</div>
</form>
</section>
<!--End of Hero Section-->
<!-- Card Template -->
<div class="is-hidden card-template">
<div class="column is-3-table is-3-desktop content-card">
<div class="card" data-content-type="0" data-content-id="0">
<div class="card-image has-text-centered card-info">
<img class="poster" src="" alt="">
</div>
<div class="card-content card-info">
<p class="content-title"></p>
<p class="title is-size-5 content-date"></p>
</div>
<div class="card-footer">
<p class="card-footer-item">Add to Watchlist</p>
</div>
</div>
</div>
</div>
<!-- Card Template End -->
<!--Search Results Cards-->
<section class="is-hidden mt-6" id="search-section">
<h3 class="title has-text-centered is-size-4 search-results">Search Results</h3>
<div class="content-row pb-6 pl-4">
<div class="container">
<div class="columns mt-5 is-8 is-variable card-container" id="search-results-container">
</div>
</div>
</div>
</section>
<!--End of Search Results Cards-->
<!--Popular Movies-->
<section class="mt-6" id="popular-movies">
<h3 class="title has-text-centered is-size-4">Popular Movies</h3>
<div class="content-row pb-6 pl-4">
<div class="container">
<div class="columns mt-5 is-8 is-variable card-container" id="pop-movies-container">
</div>
</div>
</div>
</section>
<!--End of Popular Movies-->
<!--Popular Tv Shows-->
<section class="mt-6" id="popular-tv">
<h3 class="title has-text-centered is-size-4">Popular TV</h3>
<div class="content-row pb-6 pl-4">
<div class="container">
<div class="columns mt-5 is-8 is-variable card-container" id="pop-tv-container">
</div>
</div>
</div>
</section>
<!--End of Popular Tv Shows-->
<!--Start of Top Rated Movies -->
<section class="mt-6" id="top-movies">
<h3 class="title has-text-centered is-size-4">Top Rated Movies</h3>
<div class="content-row pb-6 pl-4">
<div class="container">
<div class="columns mt-5 is-8 is-variable card-container" id="top-movies-container">
</div>
</div>
</div>
</section>
<!--End of Top Rated Movies -->
<!--Start of Top Rated TV -->
<section class="mt-6" id="top-tv">
<h3 class="title has-text-centered is-size-4">Top Rated TV Shows</h3>
<div class="content-row pb-6 pl-4">
<div class="container">
<div class="columns mt-5 is-8 is-variable card-container" id="top-tv-container">
</div>
</div>
</div>
</section>
<!--End of Top Rated TV-->
<!-- Footer Section -->
<footer class="has-background-black has-text-white has-text-centered p-5 mt-6 is-size-4">
<h2>Made by Kyle Tang, Stephon Treadwell, Chris Nohilly, and Daniel Wormald</h2>
<p class="pt-3">© 2022 Team One, Inc.</p>
</footer>
<!-- End of Footer -->
<!-- Modal -->
<!-- To display modal, add 'is-active' to modal class -->
<div id="movie-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card" data-content-id="" data-content-type="">
<header class="modal-card-head is-flex is-flex-direction-column is-flex-wrap-wrap has-background-info-dark">
<!-- Modal title -->
<h2 class="modal-card-title has-text-weight-bold has-text-white is-size-3"></h2>
</header>
<section class="modal-card-body has-background-dark has-text-white">
<div class="is-flex is-flex-direction-row">
<!-- Modal image -->
<img id="modal-poster-img" class="m-2" src="" alt="">
<ul class="m-2 is-flex is-flex-wrap-wrap is-flex-direction-column">
<!-- Modal content -->
<li id="modal-release">
<h3>Release:</h3>
<p></p>
</li>
<li id="modal-type">
<h3>Type:</h3>
<p></p>
</li>
<li id="modal-genre">
<h3>Genre:</h3>
<p></p>
</li>
<li id="modal-popularity">
<h3>Popularity:</h3>
<p></p>
</li>
</ul>
</div>
<!-- Modal description -->
<div id="modal-movie-description" class="m-2">
<h3>Description:</h3>
<p>
</p>
</div>
</section>
<footer class="modal-card-foot is-flex is-flex is-justify-content-space-between has-background-info-dark">
<button id="modal-watchlist-btn" class="button is-success">Add to Watchlist</button>
<button id="modal-cancel-btn" class="button is-danger">Cancel</button>
</footer>
</div>
</div>
<!-- Modal End -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/search-page.js"></script>
</body>
</html>