-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (160 loc) · 9.11 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
<!DOCTYPE html>
<html>
<head>
<title>Movie Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/style/style.css">
<link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
<link rel="icon" href="assets/photos/cinema (1).png">
</head>
<body>
<!-- Jumbotron header at top of page -->
<header>
<div class="borderJumo w-75 m-auto borderBlink">
<div class="jumbotron m-auto mainJumbo">
<p class="display-3">Movie Search</p>
</div>
</div>
</header>
<!-- main container for the site -->
<section class="container-fluid p-5 mainArticle">
<article class="row">
<!-- column which include the search and history function -->
<div class="col-xl-2 searchCol">
<!-- card where the form lives -->
<div class="card mb-4">
<div class="card-header">Search Movies</div>
<form class="p-2">
<div class="form-group">
<label for="movieTitle">Movie Title</label>
<input type="title" class="form-control" id="movieTitleInput">
</div>
<div class="form-group">
<label for="zipcode">Zipcode</label>
<input type="zipcode" class="form-control" id="zipcodeInput">
</div>
</form>
<button type="submit" class="btn btn-secondary mx-auto mb-2" id="search-button"><i class="fa fa-search" aria-hidden="true"></i> Submit</button>
</div>
<!-- card where the search history lives -->
<div class="card mb-4">
<div class="card-header">Search History</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-secondary mx-auto mb-2 mt-2" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-book" aria-hidden="true"></i> View
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Search History</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- list where the saved search history goes - js should make a li element with the class="list-group-item 'historyID'" -->
<ul class="list-group list-group-flush" id="historyList">
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- column that includes the retrieved data section - this section is broken into many rows and columns -->
<div class="col-xl-10">
<article class="row">
<div class="col-xl-12">
<div class="row">
<!-- section where the movie info and reviews go -->
<div class="col-xl-6">
<div class="row">
<div class="col-xl-12">
<div class="card mb-4">
<div class="card-body">
<!-- movie info section -->
<div class="row">
<!-- movie poster img -->
<div class="col-xl-5 mb-4" id="photoElm">
<img class="card-img rounded" id="poster" src="">
</div>
<!-- movie description -->
<div class="col-xl-7">
<h2 class="card-title" id="movieTitleHeader"></h2>
<p class="card-text" id="movieYear"></p>
<p class="card-text" id="movieDes"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- section for the movie reivews -->
<div class="row">
<div class="col-xl-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">See Review: <hr></h5>
<a id="reviewLink" href="" target="_blank">New York Times Review</a>
</div>
</div>
</div>
</div>
</div>
<!-- section for the location info -->
<div class="col-xl-6">
<div class="card">
<div class="card-header">Theaters Near You</div>
<div class="card-body">
<ul class="list-group list-group-flush" id="theaterList">
</ul>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</article>
</section>
<section class="container-fluid p-5 welcomePage">
<article class="row">
<div class="jumbotron m-auto welcomeJumbo">
<h1 class="display-4">Welcome!</h1>
<h2 class="display-5">Search Below:</h2>
<form class="p-2">
<div class="form-group">
<label for="movieTitle">Movie Title</label>
<input type="title" class="form-control" id="welcomeTitleInput">
</div>
<div class="form-group">
<label for="zipcode">Zipcode</label>
<input type="zipcode" class="form-control" id="welcomeZipcodeInput">
</div>
</form>
<button type="submit" class="btn btn-secondary mx-auto mb-2" id="welcome-search-button"><i class="fa fa-search" aria-hidden="true"></i> Submit</button>
</div>
</article>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/javascript/javascript.js"></script>
</body>
<!-- sticky footer -->
<footer class="footer">
<div class="container">
<span class="">
<span><a href="https://github.com/arodrigu1" target="_blank" id="gitLink">Arlene Rodriguez</a> - </span>
<span><a href="https://github.com/wilsoncollin7" target="_blank" id="gitLink">Collin Wilson</a> - </span>
<span><a href="https://github.com/hbrotherton" target="_blank" id="gitLink">Haynes Brotherton</a> - </span>
<span><a href="https://github.com/jesseodonoghue" target="_blank" id="gitLink">Jesse O'Donoghue</a></span>
</span>
</div>
</footer>
</html>