-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (160 loc) · 9.08 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">
<!-- materialize css for grid framework and mobile responsiveness -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- font-family: 'Proza Libre', sans-serif; -->
<link href="https://fonts.googleapis.com/css2?family=Proza+Libre&display=swap" rel="stylesheet">
<!-- romance header font-->
<link href='https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap' rel='stylesheet'>
<!--sciFi header font-->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
<!-- horror header font -->
<link href="https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap" rel="stylesheet">
<!-- kids header font -->
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<!-- action header font -->
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<!-- comedy header font -->
<link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap" rel="stylesheet">
<!-- Fontawesome Kit -->
<script src="https://kit.fontawesome.com/43242b94b9.js" crossorigin="anonymous"></script>
<!-- Base css file with cross-theme styling -->
<link rel="stylesheet" href="./assets/fanpagr.css" />
<!-- theme css pages - dynamically changed based on theme chosen by user-->
<link rel="stylesheet" id="csstheme" href="./assets/default.css" />
<title>fanPagR</title>
<link rel="icon" href="./images/fav-icon.png">
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- Dropdown Structure -->
<!-- Theme chooser on desktop -->
<ul id="dropdown1" class="dropdown-content">
<li id="sciFi" class="cssClass"><a href="#!">Sci-Fi</a></li>
<li id="romance" class="cssClass"><a href="#!">Romance</a></li>
<li id="noir" class="cssClass"><a href="#!">Noir</a></li>
<li id="action" class="cssClass"><a href="#!">Action</a></li>
<li id="horror" class="cssClass"><a href="#!">Horror</a></li>
<li id="kids" class="cssClass"><a href="#!">Kids</a></li>
<li id="comedy" class="cssClass"><a href="#!">Comedy</a></li>
<li id="default" class="cssClass"><a href="#!">Default</a></li>
</ul>
<!-- saved titles dropdown for desktop -->
<ul id="dropdown2" class="dropdown-content">
</ul>
<!-- Theme chooser for Mobile -->
<ul id="dropdown3" class="dropdown-content">
<li id="sciFi" class="cssClass"><a href="#!">Sci-Fi</a></li>
<li id="romance" class="cssClass"><a href="#!">Romance</a></li>
<li id="noir" class="cssClass"><a href="#!">Noir</a></li>
<li id="action" class="cssClass"><a href="#!">Action</a></li>
<li id="horror" class="cssClass"><a href="#!">Horror</a></li>
<li id="kids" class="cssClass"><a href="#!">Kids</a></li>
<li id="comedy" class="cssClass"><a href="#!">Comedy</a></li>
<li id="default" class="cssClass"><a href="#!">Default</a></li>
</ul>
<!-- saved titles dropdown for Mobile -->
<ul id="dropdown4" class="dropdown-content">
</ul>
<!-- error message if API return is invalid -->
<div id="modal" class="modal">
<div class="modal-content">
<h4>Whoops!</h4>
<p>It looks like that movie or TV show didn't return any content. Try again!</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">OK</a>
</div>
</div>
<!-- desktop navbar -->
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo newSearch">fanPagR</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#" class="newSearch">New Search</a></li>
<li><a class="dropdown-trigger saved-titles" href="#!" data-target="dropdown2">Saved Titles<i
class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger themes" href="#!" data-target="dropdown1">Themes<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
<!-- mobile navbar-->
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a href="#" class="newSearch">New Search</a></li>
<li><a class="dropdown-trigger saved-titles" href="#!" data-target="dropdown4">Saved Titles<i
class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger themes" href="#!" data-target="dropdown3">Themes<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<!-- landing page / search area - shows initially, is hidden once results are returned and the fan page is generated -->
<div id="landing-page" class="container landing-box" style="display: block;">
<h1 id="fanpagr-text">fanPagR</h1>
<form id="media-form">
<label for="media-input" id="search-text">Search for your favorite movie or TV show!</label>
<input type="text" id="media-input">
<br>
<input id="add-media" type="submit" value="Search!">
</form>
<p class="hint">(Hint: Want to change the look of your fan page? Try our "Themes" in the top corner!)</p>
</div>
<!-- Customized Fan Page - Hidden initially, only shows once search button is pressed -->
<div id="searched" style="display: none;">
<div class="container">
<div class="row">
<!-- header with custom text depending on the theme -->
<header class="center"><span class="media-title"></span><span class="media-year"></span>
</header>
</div>
<div class="row">
<div class="col s12 m8 media-stuff">
<section class="row">
<!-- plot synopsis of searched title -->
<div class="media synopsis"></div>
</section>
<section class="row">
<!--- Actors with dynamically generated links to their profiles -->
<h4>Actors</h4>
<div class="media actors"></div>
</section>
<section class="row">
<!-- YouTube videos of related content -->
<h4>Related Content</h4>
<div class="media related"></div>
</section>
</div>
<!-- movie/show poster & gifs from the searched title -->
<aside class="col s12 m3 offset-m1 media center-align" id="sidebar"></aside>
</div>
</div>
<div class="fixed-action-btn">
<!-- save button to store selected titles/themes in local storage -->
<a class="btn-floating btn-large red">
save
</a>
<ul>
<li><a class="btn-floating green" id="saveButton" title="Save this fan page!"><i
class="far fa-save"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- this is us! -->
<footer id="footer">
Made by Ian, Liz, and Christina<br>
<a href="https://github.com/cmoss703/fanPagR" title="Go to the github repo of this site"
target="_blank">Click here to visit the Github Repo</a>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./assets/script.js"></script>
</body>
</html>