forked from burtk33/CineFile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (94 loc) · 5.44 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineFile</title>
<!--link css files-->
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="./assets/css/homepg.css">
</head>
<body>
<header class="w3-black w3-center">
<section class="w3-display-container">
<img src="./assets/images/CineFile-header.png" alt="headerimage" class="w3-image" style="width:100%">
</section>
<section class="w3-bar w3-black">
<a href="./index.html" class="w3-bar-item w3-button">Home</a>
<a href="./watchlist.html" class="w3-bar-item w3-button">Watch List</a>
</section>
</header>
<main class="w3-row-padding w3-margin-top">
<section class="w3-col m4">
<section class="w3-card myColors w3-padding-small">
<form class="w3-container w3-margin-top" id="searchForm">
<label class="w3-text-white"><b>Search by Movie Name</b></label>
<input class="w3-input w3-border w3-light-grey w3-margin-bottom" id="searchMovie" type="text">
<section class="w3-bar w3-center w3-margin-bottom">
<button class="w3-button w3-hover-black w3-round-xxlarge submitButton"
id="movieSubmit">Submit</button>
</section>
<label class="w3-text-white" w3-center><b>Search by Actor Name</b></label>
<input class="w3-input w3-border w3-light-grey w3-margin-bottom" id="searchActor" type="text">
<section class="w3-bar w3-center w3-margin-bottom">
<button class="w3-button w3-hover-black w3-round-xxlarge submitButton"
id="actorSubmit">Submit</button>
</section>
<label class="w3-text-white"><b>Search by Genre and Year</b></label>
<select class="w3-select w3-margin-bottom" name="option" id="genreDropDown">
<option value="" disabled selected>Choose Genre</option>
<option value="28">Action</option>
<option value="35">Comedy</option>
<option value="18">Drama</option>
<option value="27">Horror</option>
<option value="9648">Mystery</option>
<option value="10749">Romance</option>
<option value="878">Science Fiction</option>
<option value="14">Fantasy</option>
<option value="99">Documentary</option>
</select>
<label class="w3-text-white"><b>Search by Year(Optional)</b></label>
<input class="w3-input w3-border w3-light-grey w3-margin-bottom" id="searchYear" type="text"
maxlength="4">
</form>
<section class="w3-bar w3-center w3-margin-bottom genreYearBtn">
<button class="w3-button w3-hover-black w3-round-xxlarge submitButton"
id="genreSubmit">Submit</button>
<button class="w3-button w3-hover-black w3-round-xxlarge submitButton"
id="resetButton">Reset</button>
</section>
<section class="w3-card w3-padding w3-center w3-white w3-margin hidden" id="extendedAboutus">
<h2>About Us</h2>
<p>
CineFile provides the perfect place to find the movies you love, discover new ones, and create
your own personal watchlist!
</p>
<p>Above you will find 4 ways to search for the movies you want:
if you know which movie you’re looking for, simply use the movie search feature. If you’re
looking to discover new movies, you can search either by actor or by genre, with the added
option to narrow the genre search by year. Click on the movies in the results for more details
and to add them to your own personal watch list.
</p>
<p>
This product uses the TMDb API but is not endorsed or certified by TMDb.
</p>
<img class="w3-margin-bottom" src="./assets/images/the-movie-database-logo.png" alt="TMDB-logo"
width="100" height="100">
</section>
</section>
</section>
<section class="w3-col m8">
<section class="w3-card myColors w3-padding-small">
<h1 class="w3-center w3-text-white" id="myResults">Results</h1>
<!--the following section will hold dynamically generated error messages when needed-->
<p class="w3-center w3-text-red" id="errorMessage"></p>
<!--the following section will hold the dynamically created movie results-->
<section id="generatedResults" class="w3-row"></section>
</section>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>