diff --git a/characters.html b/characters.html index e277f14..828d8e9 100644 --- a/characters.html +++ b/characters.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> @@ -8,6 +9,7 @@ <script src="scripts/personnages.js" defer type="module"></script> <title>Characters</title> </head> + <body> <section class="titre"><a href="index.html">STAR WARS</a></section> <section class="sec-menu"> @@ -16,14 +18,15 @@ <li id="films"><a href="films.html">Films</a></li> <li id="planets"><a href="planets.html">Planets</a></li> <li id="characters"><a href="characters.html">Characters</a></li> - + </ul> </nav> - + </section> - <div class="image-charactere" ></div> - <section id="resultats"></section> - - + <div class="image-charactere"></div> + <section id="resultats" class="accordeon"></section> + + </body> + </html> \ No newline at end of file diff --git a/films.html b/films.html index d6130e0..5e6f27d 100644 --- a/films.html +++ b/films.html @@ -1,81 +1,89 @@ <!DOCTYPE html> <html lang="en"> + <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="styles/style.css"> - <script src="/scripts/films.js" defer type="module"></script> - <title>Films</title> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="styles/style.css"> + <script src="/scripts/films.js" defer type="module"></script> + <title>Films</title> </head> + <body> - <section class="titre"><a href="index.html">STAR WARS</a></section> - <section class="sec-menu"> - <nav class="nav-menu"> - <ul class="ul-menu"> - <li id="films"><a href="films.html">Films</a></li> - <li id="planets"><a href="planets.html">Planets</a></li> - <li id="characters"><a href="characters.html">Characters</a></li> - </ul> - </nav> - </section> - <div class='accordeon'> - <div class='accordeon_item'> - <div id="1" class='accordeon_item_header'> - <h2 class ="titres"></h2> - <p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> - <div class='accordeon_item'> - <div id="2"class='accordeon_item_header'> - <h2 class ="titres"></h2><p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> - <div class='accordeon_item'> - <div id="3" class='accordeon_item_header'> - <h4>Return of the Jedi</h4><p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> - <div class='accordeon_item'> - <div id="4"class='accordeon_item_header'> - <h4>The Phantom Menace</h4><p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> - <div id="5" class='accordeon_item'> - <div class='accordeon_item_header'> - <h4>Attack of the Clones</h4><p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> - <div class='accordeon_item'> - <div id="6" class='accordeon_item_header'> - <h4>Revenge of the Sith</h4><p>(Cliquez ici pour étendre)</p> - </div> - <div class="accordeon_item_body"> - <div class="accordeon_item_body_content"> - </div> - </div> - </div> + <section class="titre"><a href="index.html">STAR WARS</a></section> + <section class="sec-menu"> + <nav class="nav-menu"> + <ul class="ul-menu"> + <li id="films"><a href="films.html">Films</a></li> + <li id="planets"><a href="planets.html">Planets</a></li> + <li id="characters"><a href="characters.html">Characters</a></li> + </ul> + </nav> + </section> + <div class='accordeon'> + <div class='accordeon_item'> + <div id="1" class='accordeon_item_header'> + <h2 class="titres"></h2> + <p>(Cliquez ici pour étendre)</p> </div> - <div class = "image-films"></div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + <div class='accordeon_item'> + <div id="2" class='accordeon_item_header'> + <h2 class="titres"></h2> + <p>(Cliquez ici pour étendre)</p> + </div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + <div class='accordeon_item'> + <div id="3" class='accordeon_item_header'> + <h4>Return of the Jedi</h4> + <p>(Cliquez ici pour étendre)</p> + </div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + <div class='accordeon_item'> + <div id="4" class='accordeon_item_header'> + <h4>The Phantom Menace</h4> + <p>(Cliquez ici pour étendre)</p> + </div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + <div id="5" class='accordeon_item'> + <div class='accordeon_item_header'> + <h4>Attack of the Clones</h4> + <p>(Cliquez ici pour étendre)</p> + </div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + <div class='accordeon_item'> + <div id="6" class='accordeon_item_header'> + <h4>Revenge of the Sith</h4> + <p>(Cliquez ici pour étendre)</p> + </div> + <div class="accordeon_item_body"> + <div class="accordeon_item_body_content"> + </div> + </div> + </div> + </div> + <div class="image-films"></div> </body> + </html> \ No newline at end of file diff --git a/planets.html b/planets.html index 8d1a3af..d0761dc 100644 --- a/planets.html +++ b/planets.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> @@ -8,7 +9,8 @@ <script src="scripts/planets.js" type="module" defer></script> <title>Planets</title> </head> -<body> + +<body id="planets"> <section class="titre"><a href="index.html">STAR WARS</a></section> <section class="sec-menu"> <nav class="nav-menu"> @@ -20,10 +22,11 @@ </nav> </section> - <section id="resultats"> - + <section id="resultats" class="accordeon"> + </section> - + </body> + </html> \ No newline at end of file diff --git a/scripts/personnages.js b/scripts/personnages.js index 85caf9c..4414f55 100644 --- a/scripts/personnages.js +++ b/scripts/personnages.js @@ -67,19 +67,19 @@ for (let i = 0; i < PERPAGE; i++) { PERSONNAGES.innerHTML += - `<section class="resultat"> - <h1 class="titreAccordeon">${urlname}</h1> - <div class="accordeon"> - <div class="1"> - <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> - <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> - <div id=genre>Genre : ${urlgender}</div> - <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> - <div id= poids> Poids du personnage : ${urlmass} kg</div> - <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> - <div class="2"> Planète de Naissance : ${urlhomeworld}</div> - <div class="3"> Film où je suis présent : ${urlfilms}</div> - </div> + `<section class="resultat accordeon_item"> + <h1 class="accordeon_item_header">${urlname}</h1> + <div class="accordeon_item_body"> + <div class="1"> + <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> + <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> + <div id=genre>Genre : ${urlgender}</div> + <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> + <div id= poids> Poids du personnage : ${urlmass} kg</div> + <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> + <div class="2"> Planète de Naissance : ${urlhomeworld}</div> + <div class="3"> Film où je suis présent : ${urlfilms}</div> + </div> </section>`; diff --git a/scripts/planets.js b/scripts/planets.js index c2d23bc..4b6b113 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -33,9 +33,9 @@ function remplissage(results) { planetes.innerHTML += - `<section class="resultat"> - <h1 class="titreAccordeon">${nom}</h1> - <div class="accordeon"> + `<section class="resultat accordeon_item"> + <h1 class="accordeon_item_header">${nom}</h1> + <div class="accordeon_item_body"> <div class="1"> <p>${terrain}</p> <p>${climate}</p> @@ -47,6 +47,13 @@ function remplissage(results) { </section>`; } + const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header"); + for (item of accordeonItemHeader) { + item.addEventListener("click", (event) => { + item.classList.toggle("active"); + }); + } + //Pagination createPagination(previousUrl, nextUrl, planetes, remplissage); } diff --git a/scripts/util.js b/scripts/util.js index 446b1ee..aef73e6 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -52,7 +52,7 @@ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) = if (prevUrl == null) firstPage = true; if (nextUrl == null) lastPage = true; let previousButton = `<button id="prevButton">Page précédente</button>`; - let currentButton = `${currentPage}`; + let currentButton = `<span style="color:#ccc;">${currentPage}</span>`; let nextButton = `<button id="nextButton">Page suivante</button>`; elementParent.innerHTML += previousButton; diff --git a/styles/style.css b/styles/style.css index 0e25c4e..f21d97a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,8 @@ +:root{ + --jaune: #ffe81f; + --blanc: #ccc; +} + @font-face { font-family: 'star-wars'; src: url("../assets/fonts/Starjedi.ttf"); @@ -7,9 +12,25 @@ margin: 0; padding: 0; font-family: 'star-wars', serif; - color : #000; + /* color: var(--blanc); */ + color: #000; + font-size: 16px; } +button{ + color: #000; + padding: 0.2em; + margin: 0.2em; + border-color: var(--jaune); + border-radius: 3%; +} + +body{ + background-image: url("../assets/imgs/starry_sky.jpg"); + font-size: 1em; +} + + .titre a{ margin-top : 20px; background-color: transparent; @@ -17,61 +38,74 @@ content: url("../assets/imgs/titre.png"); font-size: xx-large; text-decoration: underline; - text-decoration-color: #ffe81f; + text-decoration-color: var(--jaune); +} + +.sec-menu{ + margin: 1em; + height: 100%; } .ul-menu{ + display: flex; list-style-type: none; font-size: large; - color : #FFF; - text-decoration: underline; - text-decoration-color: #ffe81f; + color : var(--blanc); } .ul-menu li{ display: inline; - color : #FFF; - float: left; + color : var(--blanc); margin: 1em; font-size: large; - text-decoration: underline; - text-decoration-color: #ffe81f; } .ul-menu li a{ display: block; - color : #FFF; + color : var(--blanc); padding: 5px; text-align: center; font-size: large; - text-decoration: underline; - text-decoration-color: #ffe81f; + text-decoration: none; + border-bottom: 2px solid var(--jaune); } -body{ - background-image: url("../assets/imgs/starry_sky.jpg"); +.ul-menu li a:hover{ + border: 2px solid var(--jaune); + /* border-radius: 10%; */ } -div.image-films { +/* div.image-films { background-color: transparent; margin-top: -170px; margin-left: auto; width: 30%; content: url("../assets/imgs/mando.png"); +} */ +div.image-films { + background-color: transparent; + width: 30%; + content: url("../assets/imgs/mando.png"); + position: absolute; + right: 0px; + top: 0px; + z-index: -1; } div.image-charactere { background-color: transparent; - margin-top: -170px; - margin-left: auto; + position: absolute; + right: 0px; + top: 0px; + z-index: -1; width: 30%; content: url("../assets/imgs/grogu.png"); } #reponses-films { - color : #FFF; + color : var(--blanc); float: left; margin-top : 200px; margin-left:-350px; @@ -79,12 +113,10 @@ div.image-charactere { .accordeon { color : #000; - float: left; - margin-top : 100px; - margin-left: -350px; + margin: 1em; } .accordeon_item{ - background-color:#ffff; + background-color:var(--blanc); margin:2rem 0; border-radius: 1rem; box-shadow: 1px 1px 30px rgb(196, 196, 196) ; @@ -115,3 +147,11 @@ div.image-charactere { .accordeon_item_header.active + .accordeon_item_body{ max-height: 200px; } + + +#planets{ + background-image: url("../assets/imgs/backgroung_dead_trooper.jpg"); + background-size: cover; + background-position: top; + background-attachment: fixed; +}