-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (104 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BoolFlix</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<header>
<div id="container_header">
<!-- blocco di ricerca momentaneo -->
<div class="searchbar">
<input v-model="inputSearch" v-on:keyup.enter="search()" type="text" name="" value="">
</div>
<!-- logo neon -->
<a @click="home()" id="neon">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fas fa-ghost"></i> BoolFlix <i class="fas fa-ghost"></i>
</a>
</div>
</header>
<!-- contenitore di films e serie tv -->
<div id="container_locandine">
<!-- film -->
<div v-for="(film, index) in listaFilm" class="locandina" :style="poster(index)">
<!-- <img :src="poster(index)" alt=""> ALTERNATIVA SE VOGLIO IMG IN HTML-->
<span class="whichkind">Film</span>
<!-- blocco che compare all'hover FILM!! -->
<div class="rollHover">
<!-- titoli film -->
<div class="titolo">
<h5>Titolo:</h5>{{listaFilm[index].title}}
</div>
<!-- titoli originali film -->
<div class="titolo_originale">
<h5>Titolo originale:</h5>{{listaFilm[index].original_title}}
</div>
<!-- lingua originale dei film -->
<div class="lingua">
<h5>Lingua originale:</h5>
<!-- {{listaFilm[index].original_language}} -->
<img :src="bandiera(index)" alt="">
</div>
<!-- voti dei film -->
<div class="voto">
<i v-if="vote(listaFilm[index].vote_average).length > 1" :class="stella"
v-for="item in vote(listaFilm[index].vote_average)">
</i>
<i v-if="vote(listaFilm[index].vote_average).length < 1" :class="votoBasso"></i>
<!-- {{ vote(listaFilm[index].vote_average) }} -->
</div>
<div class="overview">
<p>{{listaFilm[index].overview}}</p>
</div>
</div>
</div>
<!-- serie Tv -->
<div v-for="(serie, index) in listaSerieTv" class="locandina tv" :style="posterTv(index)">
<span class="whichkind">SerieTv</span>
<!-- blocco che compare all'hover SERIETV!! -->
<div class="rollHover">
<!-- titoli SerieTv -->
<div class="titolo">
<h5>Titolo:</h5>
{{listaSerieTv[index].name}}
</div>
<!-- titoli originali SerieTv -->
<div class="titolo_originale">
<h5>Titolo originale:</h5>
{{listaSerieTv[index].original_name}}
</div>
<!-- lingua originale delle serieTv -->
<div class="lingua">
<h5>Lingua originale:</h5>
<!-- {{listaSerieTv[index].original_language}} -->
<img :src="bandieraTv(index)" alt="">
</div>
<!-- voti serieTv -->
<div class="voto">
<i v-if="vote(listaSerieTv[index].vote_average).length > 1" :class="stella"
v-for="item in vote(listaSerieTv[index].vote_average)">
</i>
<i v-if="vote(listaSerieTv[index].vote_average).length < 1" :class="votoBasso"></i>
<!-- {{vote(listaSerieTv[index].vote_average)}} -->
</div>
<div class="overview">
<p>{{listaSerieTv[index].overview}}</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>