Yann/Projet6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed semantic : structure, img alt, titles

Browse Source
This commit is contained in:
yann 2025-03-11 18:08:03 +01:00
parent a3519dcba9
commit 7c660447eb
2 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -42,7 +42,7 @@
<div class="container text-bg-secondary shadow rounded-4 p-3 mt-4"> <div class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
<div class="row"> <div class="row">
<div class="col-md-2"> <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>
<div class="col align-self-center d-none d-sm-block ms-5"> <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> <h1 style="color: white; text-align: left"> Vidéos à la demande </h1>
@ -51,6 +51,7 @@
</div> </div>
</header> </header>
<!-- best film --> <!-- best film -->
<main>
<section> <section>
<div class="container mt-5"> <div class="container mt-5">
<h2> Meilleur film </h2></div> <h2> Meilleur film </h2></div>
@ -94,18 +95,21 @@
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
<div id="menu"> <div id="menu">
<label for="category-select" class="fs-2">Autres : </label> <span>
<label for="category-select"><h2>Autres :</h2></label>
<select name="category" id="category-select"> <select name="category" id="category-select">
<option selected id="selected">Category</option> <option selected id="selected">Category</option>
<!-- getCategory() to fill the options --> <!-- getCategory() to fill the options -->
</select> </select>
</span>
</div> </div>
<div class="row" id="other"> <div class="row" id="other">
<!-- square block model--> <!-- square block model-->
</div> </div>
</div> </div>
</section> </section>
</main>
<footer></footer>
<script src="script.js" defer></script> <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://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> <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>

12
script.js
View File

@ -11,7 +11,7 @@ async function bestFilm(filmId) {
let detail = ` let detail = `
<div class="col d-flex justify-content-center my-2"> <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>
<div class="col-12 d-flex items- d-block d-md-none"> <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> <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-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <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"> <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
@ -59,7 +59,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
<div class="row"> <div class="row">
<div class="col-12-auto col-lg-6 "> <div class="col-12-auto col-lg-6 ">
<div class="p-2"> <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.year} - ${genre}</div>
<div class="fs-4">${film.duration} minutes (${film.countries})</div> <div class="fs-4">${film.duration} minutes (${film.countries})</div>
<div class="fs-4">IMDB score: ${film.imdb_score}/10</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> </div>
<div class="col-12-auto col-lg-6 d-flex justify-content-center"> <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>
</div> </div>
<!-- second part --> <!-- second part -->
@ -79,7 +79,7 @@ async function getModalDetail(filmData, modalId, blockToLook) {
<div class="p-3 border bg-light">${film.long_description} <div class="p-3 border bg-light">${film.long_description}
</div> </div>
<div class="col-12 d-flex justify-content-center"> <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>
<div class="p-3 border order-md-3 bg-light mt-3"> <div class="p-3 border order-md-3 bg-light mt-3">
<strong>Avec: </strong> <strong>Avec: </strong>
@ -131,7 +131,7 @@ function createBlock(filmList, id, count) {
</div> </div>
<div class="overlay row"> <div class="overlay row">
<div class="col-12"> <div class="col-12">
<h4 style="color: white">${film.title}</h4> <h3 class="fs-4 text-white">${film.title}</h3>
</div> </div>
<div class="col d-flex justify-content-end"> <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> <button type="button" class="btn btn-secondary rounded-4 px-4" data-toggle="modal" data-target="#${film.id}"><strong>Détail</strong></button>