-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
319 lines (291 loc) · 15.2 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to the universe of movies, watch and share movies with everyone, anytime, anywhere and everything for free! ResiliaFlix is a website of movies that priorizes you. Be happy, be safe and watch a movie right now!">
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<title>ResiliaFlix | Welcome to the Universe of Movies!</title>
<!-- Google Fonts - Roboto 400 e Rubik 400 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Rubik&display=swap" rel="stylesheet">
<!-- Bootstrap CSS 5.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- Owl Carousel CSS 2.3.4 -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
crossorigin="anonymous">
<!-- CSS local. -->
<link rel="stylesheet" href="assets/style/main.css">
<link rel="stylesheet" href="assets/style/index.css">
<!-- jQuery 3.6 -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!-- Bootstrap JS 5.1 -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous">
</script>
<!-- Owl Carousel JS 2.3.4 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous">
</script>
<!-- JS local. -->
<script src="assets/js/utils.js"></script>
<script src="assets/js/models/Filme.js"></script>
<script src="assets/js/models/Usuario.js"></script>
<script src="assets/js/views/FilmeView.js"></script>
<script src="assets/js/views/UsuarioView.js"></script>
<script src="assets/js/controllers/FilmeController.js"></script>
<script src="assets/js/controllers/UsuarioController.js"></script>
<script src="assets/js/index.js" defer></script>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bgc-preto-neutro bd-bottom-r10">
<div class="container-fluid">
<a class="navbar-brand logo" href="./">
<span class="bi bi-film"></span> Resilia<span class="highlight">Flix</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar-content">
<ul class="navbar-nav align-items-md-center mb-2 mb-lg-0 ff-roboto">
<li class="nav-item">
<a class="nav-link active text-uppercase" aria-current="page" href="./">
<span class="bi bi-house"></span> Home
</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#movies">
<span class="bi bi-film"></span> Movies
</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="views/about-us/">
<span class="bi bi-people"></span> About us
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-3 clr-primaria" href="views/search/" title="Search for movies">
<span class="bi bi-search"></span>
</a>
</li>
<li class="nav-item dropdown" id="auth">
<a class="nav-link dropdown-toggle fs-3 tira-ml clr-primaria" href="#" id="navbar-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Authentication">
<span class="bi bi-person-circle"></span>
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow" aria-labelledby="navbar-dropdown">
<li>
<h6 class="dropdown-header">Authentication</h6>
</li>
<li>
<a class="dropdown-item" href="views/login/">
Sign In <span class="bi bi-person-fill"></span>
</a>
</li>
<li>
<a class="dropdown-item" href="views/register/">
Sign Up <span class="bi bi-person-plus-fill"></span>
</a>
</li>
</ul>
</li>
<li class="nav-item ms-md-2 ff-rubik" id="nome-usuario">
</li> <!-- O nome do usuário será dinâmico e mostrado aqui. -->
<li class="nav-item" id="auth-logout" title="Click to Sign Out">
<span class="nav-link fs-3 tira-ml clr-primaria bi bi-box-arrow-right"></span>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Modal para mostrar as informações do filme. -->
<div class="modal fade" id="info-filme-modal" tabindex="-1" aria-labelledby="info-filme-label" aria-hidden="true">
<div class="modal-dialog modal-lg modal-fullscreen-sm-down modal-dialog-centered" id="info-filme-interface">
</div>
</div>
<!-- Modal para mostrar o trailer do filme. -->
<div class="modal fade" id="trailer-filme-modal" tabindex="-1" aria-labelledby="trailer-filme-label" aria-hidden="true">
<div class="modal-dialog modal-lg modal-fullscreen-sm-down modal-dialog-centered" id="trailer-filme-interface">
</div>
</div>
<main class="mb-5">
<section>
<div class="carousel slide carousel-fade" id="carrossel-principal" data-bs-interval="4000" data-bs-ride="carousel">
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#carrossel-principal" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carrossel-principal" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carrossel-principal" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<figure class="carousel-item active">
<img class="d-block w-100 img-carrosel" src="assets/images/home/filme1-banner.jpg" alt="The Theory of Everything poster">
<figcaption class="carousel-caption d-none d-md-block ts-carrossel">
<h2 class="display-4 fw-bold ff-roboto clr-primaria">
The universe of movies
</h2>
<p class="lead ts-txt-carrossel">
Watch any movies that you want, <strong class="fw-bold clr-primaria">for free</strong>!
</p>
</figcaption>
</figure>
<figure class="carousel-item">
<img class="d-block w-100 img-carrosel" src="assets/images/home/filme2-banner.jpg" alt="The Avengers: Endgame poster">
<figcaption class="carousel-caption d-none d-md-block ts-carrossel">
<h2 class="display-4 fw-bold ff-roboto clr-primaria">
Watch movies anywhere, anytime!
</h2>
<p class="lead ts-txt-carrossel">
Mobile, tablet, desktop, anywhere. Our site is <strong class="fw-bold clr-primaria">full responsive</strong> and made for your confort.
</p>
</figcaption>
</figure>
<figure class="carousel-item">
<img class="d-block w-100 img-carrosel" src="assets/images/home/filme3-banner.jpg" alt="The Lord of the Rings: The Fellowship of the Ring">
<figcaption class="carousel-caption d-none d-md-block ts-carrossel">
<h2 class="display-4 fw-bold ff-roboto clr-primaria">
<q>One account to rule them all</q>
</h2>
<p class="lead ts-txt-carrossel">
<a class="text-decoration-underline clr-primaria efeito-link" href="views/register">Sign up</a> right now and enjoy your movie!
</p>
</figcaption>
</figure>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carrossel-principal" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carrossel-principal" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div> <!-- #carrosel-principal -->
<div class="mt-5 linha-h"></div>
<div class="d-flex align-items-center flex-column px-4 py-5 my-5 text-center text-white position-relative">
<div class="bg-img principal"></div>
<h1 class="display-5 fw-bold ff-roboto clr-primaria">
Welcome to ResiliaFlix!
</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
The universe of movies, watch and share movies with everyone, anytime, anywhere and everything for <strong class="fw-bold">free!</strong>
<span class="fw-bold clr-primaria">ResiliaFlix</span> is a website to you watch movies
on your way. Be happy, be safe, grabs popcorn and watch a movie right now!
</p>
<div class="d-grid gap-4 d-sm-flex justify-content-sm-center">
<a class="btn botao botao-lg" href="views/search/" role="button">
See our catalog <span class="bi bi-box-arrow-up-right"></span>
</a>
<button class="btn botao botao-lg" type="button" data-bs-toggle="collapse" data-bs-target="#pricing" aria-expanded="false" aria-controls="pricing">
See our pricing <span class="bi bi-eye"></span>
</button>
</div>
<div class="my-4 linha-h linha-h-menor"></div>
</div>
<div class="collapse container row justify-content-around row-cols-1 row-cols-sm-2 row-cols-lg-3 mb-3 text-center" id="pricing">
<div class="col">
<article class="card mb-4 bg-dark border-transparent rounded-3 shadow-sm">
<header class="card-header border-light py-3">
<h4 class="my-0 fw-bold">Free</h4>
</header>
<main class="card-body">
<h2 class="card-title w-bold clr-primaria">
$0<small class="text-muted fw-light">/mo</small>
</h2>
<ul class="list-unstyled mt-3 mb-4">
<li>3 users included</li>
<li>5 downloads/user</li>
<li>Watch any movie</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<a class="w-100 btn botao" href="views/register/">Sign up for free</a>
</main>
</article>
</div>
<div class="col">
<artcle class="card mb-3 bg-dark border-light rounded-3 shadow-sm">
<header class="card-header border-light py-3">
<h4 class="my-0 fw-bold">Pro (optional)</h4>
</header>
<main class="card-body">
<h2 class="card-title fw-bold clr-primaria">
$10<small class="text-muted fw-light">/mo</small>
</h2>
<ul class="list-unstyled mt-3 mb-4">
<li>5 users included</li>
<li>10 downloads/user</li>
<li>Watch any movie in <strong class="clr-primaria">HD</strong></li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<a class="btn w-100 botao" href="views/register">Get started</a>
</main>
</artcle>
</div>
</div>
</div>
<div class="mb-5 linha-h"></div>
</section>
<section class="container-md container-fluid" id="movies">
<div class="text-light mb-5">
<h2 class="h3 fw-bold mb-4 ff-roboto move-direita">
<span class="bi bi-bookmark-heart fs-2 clr-primaria"></span> <span>Top 12</span>
</h2>
<div class="owl-carousel owl-theme p-4 rounded bgc-preto-escuro" id="top12">
</div> <!-- #top12-carousel -->
</div>
<div class="text-light mb-5">
<h2 class="h3 fw-bold mb-4 ff-roboto move-direita">
<span class="bi bi-bookmark-star fs-2 clr-primaria"></span> <span>Recent movies</span>
</h2>
<div class="owl-carousel owl-theme p-4 rounded bgc-preto-escuro" id="filmes-recentes">
</div> <!-- #filmes-recentes -->
</div>
<div class="text-light mb-5">
<h2 class="h3 fw-bold mb-4 ff-roboto move-direita">
<span class="bi bi-bookmark-check fs-2 clr-primaria"></span> <span>Recommendations</span>
</h2>
<div class="owl-carousel owl-theme p-4 rounded bgc-preto-escuro" id="filmes-recomendados">
</div> <!-- #filmes-recomendados -->
</div>
<div class="linha-h linha-h-menor"></div>
</section>
</main>
<!-- O footer fica grudado no final da página e anda com o conteúdo. -->
<footer class="mt-auto bd-top-r10 bgc-preto-neutro">
<div class="p-3 text-light">
<p class="text-center m-0">
<a class="logo logo-sm" href="./">
<span class="bi bi-film"></span> Resilia<span class="highlight">Flix</span>
</a>
<br>
© 2021 - All rights reserved
</p>
</div>
</footer>
</body>
</html>