Project1/index.html at master · kmbecker/Project1 · GitHub

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
<!DOCTYPE html>
<html lang="en-us">
<html>
<head>
	<title>Movies and Television Information</title>

	<!-- Initilize CSS/Bootstrap files -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Initilize firebase -->
	<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
	<!-- Begin Wrapper -->
	<div id = "wrapper" class = "container">

		<!-- Insert Header/Jumbotron -->
		<div class="jumbotron header">
			<h1>Mystery Sinus Theatre 3000</h1>
		</div>
			<!-- User account selection -->
			<div id="userSelection">
				Please select the active user:
					<select id = "item1" name = "Item1">
						<option value="1">Cole</option>
						<option value="2">Kyle</option>
						<option value="3">Seth</option>
						<option value="4">Guest</option>
					</select>
			</div>

		<!-- Description Section information -->
		<div class="container-fluid description">
			<h4>Type the name of a movie or tv show in the search field below and you will be provided with a trailer for the show or movie. If available, you will also be provided with a relevant marketing poster as well as animated GIFs that you can view at your leisure. If you find something that you love, click to add to favorites button and it will be added to your favorites available at the bottom of the page. If you'd also like to suggest what you've found to other users, select add to suggestions and it will be recommended to other users.
			<h3></h3>
		</div>

		<!-- Search Bar for Website that will be used to trigger AJAX requests -->
		<form id="searchForm" class="col-md-12 col-lg-12 search-bar">
			<input id="searchInput" type="text" name="search" placeholder="Search Movie/TV Show.."><button type="submit" class="btn btn-info submit" id="submitId">Search</button>
		</form>
		<!-- Error Div -->
		<div id = "error" class="centered col-lg-12 col-md-12"></div>
		<!-- Searched Title From OMDB -->
		<div id="htmlTitle" class="col-lg-12 col-md-12"></div>

		<!-- Button Containers -->
		<div class="col-md-12 col-lg-12 buttonsButtons">
			<!-- Add to favorites -->
			<div class ="col-md-2" id = "favbtnDiv"></div>

			<!-- Add to suggestions -->
			<div class = "col-md-2" id = "sugDiv"></div>
			<div class = "col-md-8"></div>
		</div>

		<!-- Movie Trailer and poster container -->
		<div class="col-md-12 col-lg-12 trailerPoster">
			<!-- Trailer Player -->
			<div class="col-md-8" id="playDiv"></div>

			<!-- Movie Poster -->
			<div class="col-md-4 container-fluid poster"></div>
		</div>

		<!-- Rating and Plot Information -->
		<div id="plotFormatting" class="col-md-12 col-sm-12 trailer"></div>

		<!-- Actor Images Actor Images Actor Images Actor Images Actor Images -->
		<div class="col-md-12 actor-image actor">
			<h3>Actors</h3>
			<div id = "actorDiv"></div>
		</div>

		<!-- Top 3 Giphy Images -->
		<div class="col-md-12">
			<div clas="col-md-12">
				<h3>Giphy</h3>
			</div>
			<div class="col-md-12">
				<div class="btn btn-info" id="giphyButton">Giphy Shuffle</div>
			</div>
			<!-- <h3>Giphys</h3> -->
			<!-- <div class="btn btn-info" id="giphyButton">Giphy Shuffle</div> -->
			<div id="giphyDiv"></div>
		</div>

		<!-- Suggestions from users!! Updated via Firebase -->
		<div class="container-fluid suggestions">
			<h3>Suggestions from other users</h3>
			<div class="container-fluid" id = "suglocDiv">
			</div>
		</div>


		<!-- Favorites saved to firebase as indicated by user -->
		<div class="container-fluid favorites">
			<h3>Favorites</h3>
			<div class = "container-fluid favorites" id = "favoritesDiv"></div>
		</div>

		<!-- Footer -->
		<footer class="modal-footer">
			<div class="Container centered">
				<h6>&copy;Copyright 2017 by Seth Walton, Kyle Becker, and Cole Mertz</h6>
				<span class="text-muted">Powered by YouTube, GIPHY, and OMDB API.</span>
				<span class="text-muted">Built Utilizing Firebase.</span>
			</div>
		</footer>


	<!-- End Wrapper -->
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="assets/javascript/data.js"></script>
	<script src="assets/javascript/main.js"></script>


</body>
</html>