-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (119 loc) · 6.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BoolFlix</title>
<!-- Link file CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Fontawesome CDN -->
<script src="https://kit.fontawesome.com/8d58ee31c8.js" crossorigin="anonymous"></script>
</head>
<body>
<div id='root'>
<!-- Logo, searchbar and button -->
<header>
<nav class="navbar shadow">
<a class="navbar-brand"><img src="assets/img/boolflix.png" alt="logo"></a>
<form class="form-inline" @submit.prevent='sendRequest'>
<input v-model='search' @keyup.enter='sendRequest' class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn btn-outline-light">Search</button>
</form>
</nav>
</header>
<!-- Films container -->
<main>
<!-- Movies section -->
<section class="movies">
<h2 v-if="moviesList && moviesList != 0" class="my-5 mx-4">Movies</h2>
<!-- Searching no found -->
<div v-if="moviesList == 0 && tvShowsList == 0" class="mt-5 container_search_no_found d-flex justify-content-around align-items-center text-white">
<div class="search_no_found">
<p>Nessun risultato per la tua ricerca di "{{search}}"</p>
<p>Suggerimenti:</p>
<ul>
<li>Prova con parole chiave diverse</li>
<li>Cerchi un film o un programma Tv?</li>
<li>Prova a usare il titolo di un film o programma TV</li>
</ul>
</div>
</div>
<div class="movies_container d-flex flex-wrap justify-content-start">
<div v-for='movie in moviesList' class="card mx-2 mb-5 shadow" style="width: 18rem;">
<!-- Loop to cycle API movies to have title, img, flag, vote -->
<!-- Cover movies -->
<img :src=`https://image.tmdb.org/t/p/w342${movie.poster_path}` v-if='movie.poster_path' class="card-img-top" alt="covers of movies">
<!-- No Cover Tv Show -->
<div class="no_cover_movie d-flex justify-content-center align-items-center" v-else>
<img src="assets/img/no_cover.png" alt="Cover yellow when no cover">
<h3 class="text-center">{{movie.title}}</h3>
</div>
<div class="card-body">
<h5 class="card-title">{{movie.title}}</h5>
<p class="card-text overflow-auto pr-2">{{movie.overview}}</p>
</div>
<ul class="list-group list-group-flush">
<li v-if="movie.original_title != movie.title" class="list-group-item text-center">Original title: {{movie.original_title}}</li>
<li class="list-group-item d-flex justify-content-around">
<!-- Star to vote -->
<div class="stars_icons">
<span>Vote:</span>
<span v-for='item in movie.vote'><i class="fas fa-star text-warning"></i></span>
<span v-for='item in (5 - movie.vote)'><i class="far fa-star text-warning"></i></span>
<!-- Flags languages -->
<img :src=`https://www.countryflags.io/${movie.original_language}/flat/32.png` alt="flags of languages">
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Tv Shows section -->
<section class="tv_shows">
<h2 v-if="tvShowsList && tvShowsList != 0" class="my-5 mx-4">Tv Shows</h2>
<div class="tv_shows_container d-flex flex-wrap justify-content-start">
<div v-for='tvShow in tvShowsList' class="card mx-2 mb-5 shadow" style="width: 18rem;">
<!-- Loop to cycle API movies to have title, img, flag, vote -->
<!-- Cover Tv Show -->
<img :src=`https://image.tmdb.org/t/p/w342${tvShow.poster_path}` v-if='tvShow.poster_path' class="card-img-top" alt="covers of tv shows">
<!-- No Cover Tv Show -->
<div class="no_cover_tv d-flex justify-content-center align-items-center" v-else>
<img src="assets/img/no_cover.png" alt="Cover yellow when no cover">
<h3 class="text-center">{{tvShow.name}}</h3>
</div>
<div class="card-body">
<h5 class="card-title">{{tvShow.name}}</h5>
<p class="card-text overflow-auto pr-2">{{tvShow.overview}}</p>
</div>
<ul class="list-group list-group-flush">
<li v-if="tvShow.original_name != tvShow.name" class="list-group-item text-center">Original title: {{tvShow.original_name}}</li>
<li class="list-group-item d-flex justify-content-around">
<!-- Flags languages -->
<img :src=`https://www.countryflags.io/${tvShow.original_language}/flat/32.png` alt="flags of languages">
<!-- Star to vote -->
<div class="stars_icons">
<span>Vote:</span>
<span v-for='item in tvShow.vote'><i class="fas fa-star text-warning"></i></span>
<span v-for='item in (5 - tvShow.vote)'><i class="far fa-star text-warning"></i></span>
</div>
</li>
</ul>
</div>
</div>
</section>
</main>
</div>
<!-- Axios CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script>
<!-- VueJs CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- Link file JS -->
<script src="assets/js/main.js" charset="utf-8"></script>
</body>
</html>