From 7c660447eb0b01efccaf2bc16c31548fd7c87257 Mon Sep 17 00:00:00 2001
From: yann <yann@needsome.coffee>
Date: Tue, 11 Mar 2025 18:08:03 +0100
Subject: [PATCH] fixed semantic : structure, img alt, titles

---
 index.html | 100 ++++++++++++++++++++++++++++-------------------------
 script.js  |  12 +++----
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index 5b94d8a..24c2b22 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
 			<div class="container text-bg-secondary shadow rounded-4  p-3 mt-4">
 				<div class="row">
 					<div class="col-md-2">
-						<img alt="logo" title="logo" src="logo.png" class="img-fluid">
+						<img alt="JustStreamIt Logo" title="logo" src="logo.png" class="img-fluid">
 					</div>
 					<div class="col align-self-center d-none d-sm-block ms-5">
 						<h1 style="color: white; text-align: left"> Vidéos à la demande </h1>
@@ -51,61 +51,65 @@
 			</div>
 		</header>
 	<!-- best film -->
-	<section>
-		<div class="container mt-5">
-			<h2> Meilleur film </h2></div>
-				<div class="container border border-black border-5 mt-1">
-					<div class="row" id="bestFilm" >
+	<main>
+		<section>
+			<div class="container mt-5">
+				<h2> Meilleur film </h2></div>
+					<div class="container border border-black border-5 mt-1">
+						<div class="row" id="bestFilm" >
+						</div>
 					</div>
+		</section>
+
+		<!-- best note -->
+		<section class="py-5">
+			<div class="container">
+				<h2>Films les mieux notés</h2>
+				<div class="row" id="bestRated">
+					<!-- square block model-->
 				</div>
-	</section>
-
-	<!-- best note -->
-	<section class="py-5">
-		<div class="container">
-			<h2>Films les mieux notés</h2>
-    		<div class="row" id="bestRated">
-        		<!-- square block model-->
-    		</div>
-		</div>
-	</section>
-
-	<!-- mystery -->
-	<section class="py-5">
-		<div class="container">
-			<h2>Mystery</h2>
-    		<div class="row" id="mystery">
-			<!-- square block model-->
 			</div>
-		</div>
-	</section>
+		</section>
 
-	<!-- animation -->
-	<section class="py-5">
-		<div class="container">
-			<h2>Animation</h2>
-    		<div class="row" id="animation">
-			<!-- square block model-->
+		<!-- mystery -->
+		<section class="py-5">
+			<div class="container">
+				<h2>Mystery</h2>
+				<div class="row" id="mystery">
+				<!-- square block model-->
+				</div>
 			</div>
-		</div>
-	</section>
+		</section>
 
-	<!-- other -->
-	<section class="py-5">
-		<div class="container">
-			<div id="menu">
-				<label for="category-select" class="fs-2">Autres : </label>
-				<select name="category" id="category-select">
-					<option selected id="selected">Category</option>
-					<!-- getCategory() to fill the options -->
-				</select>
+		<!-- animation -->
+		<section class="py-5">
+			<div class="container">
+				<h2>Animation</h2>
+				<div class="row" id="animation">
+				<!-- square block model-->
+				</div>
 			</div>
-    		<div class="row" id="other">
-        		<!-- square block model-->
-    		</div>
-		</div>
-	</section>
+		</section>
 
+		<!-- other -->
+		<section class="py-5">
+			<div class="container">
+				<div id="menu">
+					<span>
+					<label for="category-select"><h2>Autres :</h2></label>
+						<select name="category" id="category-select">
+							<option selected id="selected">Category</option>
+							<!-- getCategory() to fill the options -->
+						</select>
+					</span>
+				</div>
+				<div class="row" id="other">
+					<!-- square block model-->
+				</div>
+			</div>
+		</section>
+	</main>
+	<footer></footer>
 	 	<script src="script.js" defer></script>
 		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
diff --git a/script.js b/script.js
index 848e309..6c21e00 100644
--- a/script.js
+++ b/script.js
@@ -11,7 +11,7 @@ async function bestFilm(filmId) {
 
         let detail = `
                     <div class="col d-flex justify-content-center my-2">
-                        <img class="img-fluid  d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
+                        <img class="img-fluid  d-none d-md-block" src="${bfilm.image_url}" alt="${bfilm.title}">
                     </div>
                     <div class="col-12 d-flex items- d-block d-md-none">
                         <div class="bfilm" style="background-image: url(${bfilm.image_url}); background-size: cover; "></div>
@@ -49,7 +49,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
         <div class="modal-dialog modal-lg">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="${modalId}">Détail du film</h5>
+                    <div class="modal-title" id="${modalId}">Détail du film</div>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                     <span aria-hidden="true">&times;</span>
                     </button>
@@ -59,7 +59,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
                     <div class="row">
                         <div class="col-12-auto col-lg-6 ">
                             <div class="p-2">
-                                <div class="py-2 fw-bolder"><h1>${film.title}</h1></div>
+                                <div class="fs-2 py-2 fw-bolder">${film.title}</div>
                                 <div class="fs-4">${film.year} - ${genre}</div>
                                 <div class="fs-4">${film.duration} minutes (${film.countries})</div>
                                 <div class="fs-4">IMDB score: ${film.imdb_score}/10</div>
@@ -70,7 +70,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
                             </div>
                         </div>
                         <div class="col-12-auto col-lg-6 d-flex justify-content-center">
-                            <img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="Film Cover">
+                            <img src="${film.image_url}" class="img-fluid my-3 d-none d-lg-block" alt="${film.title}">
                         </div>
                     </div>
                     <!-- second part -->
@@ -79,7 +79,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
                             <div class="p-3 border bg-light">${film.long_description}
                             </div>
                             <div class="col-12 d-flex justify-content-center">
-                                <img src="${film.image_url}" class=" my-3 d-lg-none" alt="Film Cover">
+                                <img src="${film.image_url}" class=" my-3 d-lg-none" alt="${film.title}">
                             </div>
                         <div class="p-3 border order-md-3 bg-light mt-3">
                             <strong>Avec: </strong>
@@ -131,7 +131,7 @@ function createBlock(filmList, id, count) {
                 </div>
                 <div class="overlay row">
                     <div class="col-12">
-                        <h4 style="color: white">${film.title}</h4>
+                        <h3 class="fs-4 text-white">${film.title}</h3>
                     </div>
                     <div class="col d-flex justify-content-end">
                         <button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>