-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (103 loc) · 6.55 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustStreamIt</title>
<!-- Balises link pour inclure des feuilles de style CSS et des polices externes (Nova Square) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nova+Square&display=swap">
<link rel="stylesheet" href="css/main.css">
<!-- Balises script avec l'attribut defer pour charger des scripts JavaScript après le chargement du reste de la page. -->
<script defer src="js/api.js"></script>
<script defer src="js/main.js"></script>
</head>
<body>
<header>
<!-- Logo du site JustStreamIt -->
<img id="brand-logo" src="img/JustStreamIt_Logo.png" alt="Logo JustStreamIt">
<nav>
<!-- La balise nav est spécifiquement destinée à contenir des liens de navigation. "categories.html" n'est pas implémentée -->
<a href="index.html" class="active">Accueil</a>
<a href="categories.html">Catégories</a>
</nav>
</header>
<!-- La balise main représente le contenu principal du document. -->
<main>
<!-- Cette zone affiche la photo du film qui a la meilleur note Imdb toutes catégories confondues, ainsi que son titre, un bouton et le résumé du film sous le bouton. -->
<div class="titles-container">
<h2 class="section-header">Meilleur film</h2>
</div>
<!-- La balise section représente une section thématique du document, souvent avec un en-tête. -->
<section id="best-movie" class="gold-background">
<img src="img/placeholder.png" alt="Image du meilleur film" id="best-movie-img">
<div id="best-movie-content">
<h2 id="best-movie-title">Titre du meilleur film</h2>
<p id="best-movie-summary">Résumé du meilleur film...</p>
<button id="best-movie-btn">Play</button>
</div>
</section>
<!-- Cette zone affiche les 7 autres films les mieux notés toutes catégories confondues. On pourra les faire défiler avec une flèche à gauche et à droite pour tous les parcourir. -->
<section id="top-rated-movies" class="movie-carousel">
<h2 class="section-header">Films les mieux notés</h2>
<button class="carousel-btn prev-btn top-rated-prev">❮</button> <!-- Bouton précédent -->
<div class="carousel-track-container">
<ul class="carousel-track">
<!-- Les éléments des films seront injectés ici par JavaScript -->
</ul>
</div>
<button class="carousel-btn next-btn top-rated-next">❯</button> <!-- Bouton suivant -->
</section>
<!-- Montre les 7 films les mieux notés de la catégorie Action. -->
<section id="category1" class="movie-carousel">
<h2 class="section-header">Action</h2>
<button class="carousel-btn prev-btn action-prev">❮</button> <!-- Bouton précédent -->
<div class="carousel-track-container">
<ul class="carousel-action-track">
<!-- Les éléments des films seront injectés ici par JavaScript -->
</ul>
</div>
<button class="carousel-btn next-btn action-next">❯</button> <!-- Bouton suivant -->
</section>
<!-- Montre les 7 films les mieux notés de la catégorie Comédie. -->
<section id="category2" class="movie-carousel">
<h2 class="section-header">Comedy</h2>
<button class="carousel-btn prev-btn comedy-prev">❮</button> <!-- Bouton précédent -->
<div class="carousel-track-container">
<ul class="carousel-comedy-track">
<!-- Les éléments des films seront injectés ici par JavaScript -->
</ul>
</div>
<button class="carousel-btn next-btn comedy-next">❯</button> <!-- Bouton suivant -->
</section>
<!-- Montre les 7 films les mieux notés de la catégorie Drame. -->
<section id="category3" class="movie-carousel">
<h2 class="section-header">Drama</h2>
<button class="carousel-btn prev-btn drama-prev">❮</button> <!-- Bouton précédent -->
<div class="carousel-track-container">
<ul class="carousel-drama-track">
<!-- Les éléments des films seront injectés ici par JavaScript -->
</ul>
</div>
<button class="carousel-btn next-btn drama-next">❯</button> <!-- Bouton suivant -->
</section>
</main>
<!-- La balise div est aussi utilisée ici comme un conteneur pour une modal (fenêtre contextuelle). Lorsqu’on clique sur le bouton du film en vedette ou sur l’image d’un des films, la fenêtre modale s’ouvre contenant diverses informations. -->
<div id="movie-modal" class="modal">
<div class="modal-content">
<span class="close-modal">×</span>
<img class="modal-movie-img" src="img/placeholder.png" alt="Pochette du film">
<h3 class="modal-movie-title">Modal Movie Title</h3>
<p class="modal-info"><span class="modal-section-title">Genres:</span> <span class="modal-value modal-movie-genre"></span></p>
<p class="modal-info"><span class="modal-section-title">Date de sortie:</span> <span class="modal-value modal-movie-date"></span></p>
<p class="modal-info"><span class="modal-section-title">Classification:</span> <span class="modal-value modal-movie-rated"></span></p>
<p class="modal-info"><span class="modal-section-title">Score IMDb:</span> <span class="modal-value modal-movie-imdb"></span></p>
<p class="modal-info"><span class="modal-section-title">Réalisateur:</span> <span class="modal-value modal-movie-director"></span></p>
<p class="modal-info"><span class="modal-section-title">Acteurs:</span> <span class="modal-value modal-movie-actors"></span></p>
<p class="modal-info"><span class="modal-section-title">Durée:</span> <span class="modal-value modal-movie-duration"></span></p>
<p class="modal-info"><span class="modal-section-title">Pays d'origine:</span> <span class="modal-value modal-movie-country"></span></p>
<p class="modal-info"><span class="modal-section-title">Box Office:</span> <span class="modal-value modal-movie-boxoffice"></span></p>
<p class="modal-movie-description"></p>
</div>
</div>
</body>
</html>