-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (177 loc) · 9.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Just making a change -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CDN for Tailwind -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<!-- CDN for FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="./Assets/style.css">
<title>Quarantine Accomplishments</title>
</head>
<body>
<div class="main-container flex flex-col h-screen md:w-10/12 mx-auto rounded">
<!-- Nav container -->
<div class="flex flex-row header-row justify-end rounded-t-lg">
<div class="text-left w-2/3 self-center px-2 m-0">
<h1><span data-destination="homecard" class="destination"> Quar'N'Titles</span></h1>
</div>
<div class="destination text-center" data-destination="moviecard"><i class="fas fa-ticket-alt"></i></div>
<div class="destination text-center" data-destination="tvcard"><i class="fas fa-tv"></i></div>
<div class="destination text-center" data-destination="bookcard"><i class="fas fa-book"></i></div>
</div>
<div class="card-holder">
<!-- **** Card holder top **** -->
<!-- ** ** Place all cards within card holder ** ** -->
<!-- *** START Home Card *** -->
<div class="all-cards" id="homecard">
<div class="hero-holder">
<img src="./Assets/home-hero.jpg" />
</div>
<div class="intro-box p-3 bg-white">
<br />
<h3 class="text-center pb-2">Track & Rank your Quar'N'Titles</h3>
<p class="intro">Let's face it, throughout this global pandemic, we've all had plenty of time on our hands
to finally watch the movies on our watch list, binge the latest Netflix, Amazon Prime, and Hulu shows, and
read some of the books on the best-sellers list. Keep track of all of the movies, tv shows, and books you
completed during quarantine so that the next time friends or family ask for a suggestion, you'll have your
lists to reference!</p>
</div>
<div class="butt-box px-3 flex flex-wrap flex-row justify-between">
<!-- <div class="destination text-center mt-3 w-full home-butt rounded-lg flex flex-row items-center text-xl" data-destination="top-rated-card">
<div class="w-1/4"></div><i class="fas fa-heart"></i> <span class="text-white font-bold pl-3"> Top
Rated</span>
</div> -->
<div
class="destination text-center mt-3 w-full md:w-1/4 home-butt rounded-lg flex flex-row items-center text-xl"
data-destination="moviecard">
<div class="w-1/4"></div><i class="fas fa-ticket-alt"></i><span class="text-white font-bold pl-3">
Movies</span>
</div>
<div
class="destination text-center mt-3 w-full md:w-1/4 home-butt rounded-lg flex flex-row items-center text-xl"
data-destination="tvcard">
<div class="w-1/4"></div><i class="fas fa-tv"></i><span class="text-white font-bold pl-3"> T.V.
Shows</span>
</div>
<div
class="destination text-center mt-3 w-full md:w-1/4 home-butt rounded-lg flex flex-row items-center text-xl"
data-destination="bookcard">
<div class="w-1/4"></div><i class="fas fa-book"></i><span class="text-white font-bold pl-3"> Books</span>
</div>
</div>
</div>
<!-- *** END Home Card *** -->
<!-- -->
<!-- *** START Movie Card *** -->
<div class="all-cards hide-card" id="moviecard">
<div class="hero-holder mb-12">
<img class="mb-6" src="./Assets/movie-hero.jpg" />
<h3>List of Quarantine Movies</h3>
<p class="intro">Keep track of all of the movies you watched during quarantine! That way if friends or
family ask you for a movie recommendation, you can quickly pull up your list of most recently watched
movies. Enter the title of the movie in the search bar to add it to a list below.</p>
<form class="mt-6 title-search">
<input id="movieAPI" type="text" placeholder="Search for a Title" name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="movie-title-box-holder">
<!-- Movie Titles saved will populate here with the <template> from below -->
</div>
</div>
<!-- *** END Movie Card *** -->
<!-- -->
<!-- *** START Book Card *** -->
<div class="all-cards hide-card" id="bookcard">
<div class="hero-holder mb-12">
<img class="mb-6" src="./Assets/book-hero.jpg" />
<h3>List of Quarantine Books</h3>
<p class="intro">Keep track of all of the books you read during quarantine! That way if friends or
family ask you for a book recommendation, you can quickly pull up your list of most recently read
books. Enter the title of the book in the search bar to add it to a list below.</p>
<form class="mt-6 title-search">
<input id="bookAPI" type="text" placeholder="Search for a Title" name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="book-title-box-holder">
<!-- Book Titles saved will populate here with the <template> from below -->
</div>
</div>
<!-- *** END Book Card *** -->
<!-- -->
<!-- *** START TV Card *** -->
<div class="all-cards hide-card" id="tvcard">
<div class="hero-holder mb-12">
<img class="mb-6" src="./Assets/tv-hero.jpg" />
<h3>List of Quarantine TV Shows</h3>
<p class="intro">Keep track of all of the TV shows you watched during quarantine! That way if friends or
family ask you for a TV show recommendation, you can quickly pull up your list of most recently watched
shows. Enter the title of the show in the search bar to add it to a list below.</p>
<form class="mt-6 title-search">
<input id="tvAPI" type="text" placeholder="Search for a Title" name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</form>
</div>
<div class="tv-title-box-holder">
<!-- TV Titles saved will populate here with the <template> from below -->
</div>
<!-- *** END TV Card *** -->
<!-- ** ** All cards above here ** ** -->
<!-- **** Card Holder Bottom -->
</div>
<!-- **** START Title Box Template **** -->
<template class="title-box">
<div class="w-full flex mt-3 individual-title">
<div class="h-auto w-48 flex-none bg-cover rounded-l text-center overflow-hidden title-img">
</div>
<div
class="w-full description bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8 template-box">
<div class="memory-buttons"><button class="add-butt">+</button><button class="sub-butt">x</button>
</div>
<div class="text-gray-900 font-bold text-xl mb-2 title-title">Title</div>
<div class="text-gray-700 text-base"><b>Genre:</b> <span class="title-genre"></span></div>
<div class="text-gray-700 text-base"><b>Rating:</b> <span class="title-rating"></span></div>
<div class="text-gray-700 text-base"><b>Public Reviews:</b> <span class="title-review"></span></div>
<div class="hidden md:block text-gray-700 text-base"><b>Plot:</b> <span class="title-plot"></span></div>
</div>
</div>
</div>
</template>
<!-- **** END Title Box Template **** -->
<!-- Begin Title already exists modal -->
<div class="title-exists bg-opacity-50 bg-orange-400 flex items-center justify-center">
<div class="modal-box bg-white rounded border-solid border-2 border-red-600 p-12">
<button class="close-butt">X</button>
<p class="modal-alert">That title already exists in your library!</p>
</div>
</div>
<!-- Begin No Results modal -->
<div class="no-results-exists bg-opacity-50 bg-orange-400 flex items-center justify-center">
<div class="modal-box bg-white rounded border-solid border-2 border-red-600 p-12">
<button class="close-butt">X</button>
<p class="modal-alert">Sorry, no results were found.</p>
</div>
</div>
<!-- **** Footer -->
<footer class="mt-12">
<div>
UNH Bootcamp - Group 6
</div>
</footer>
</div>
</div>
<!-- All JavaScript links below here -->
<!-- Compiled and minified JavaScript for Materialize -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="Assets/script.js"></script> -->
<script src="Assets/fe-script.js"></script>
</body>
</html>