isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

harmonisation visuelle

Browse Source
This commit is contained in:
rasoirnoir 2021-10-19 22:23:22 +02:00
parent ef38db8421
commit 3a80dd388a
No known key found for this signature in database
GPG Key ID: 995E4575ADB981A3
7 changed files with 183 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
characters.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,6 +9,7 @@
<script src="scripts/personnages.js" defer type="module"></script> <script src="scripts/personnages.js" defer type="module"></script>
<title>Characters</title> <title>Characters</title>
</head> </head>
<body> <body>
<section class="titre"><a href="index.html">STAR WARS</a></section> <section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu"> <section class="sec-menu">
@ -21,9 +23,10 @@
</nav> </nav>
</section> </section>
<div class="image-charactere" ></div> <div class="image-charactere"></div>
<section id="resultats"></section> <section id="resultats" class="accordeon"></section>
</body> </body>
</html> </html>

154
films.html
View File

@ -1,81 +1,89 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/style.css">
<script src="/scripts/films.js" defer type="module"></script> <script src="/scripts/films.js" defer type="module"></script>
<title>Films</title> <title>Films</title>
</head> </head>
<body> <body>
<section class="titre"><a href="index.html">STAR WARS</a></section> <section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu"> <section class="sec-menu">
<nav class="nav-menu"> <nav class="nav-menu">
<ul class="ul-menu"> <ul class="ul-menu">
<li id="films"><a href="films.html">Films</a></li> <li id="films"><a href="films.html">Films</a></li>
<li id="planets"><a href="planets.html">Planets</a></li> <li id="planets"><a href="planets.html">Planets</a></li>
<li id="characters"><a href="characters.html">Characters</a></li> <li id="characters"><a href="characters.html">Characters</a></li>
</ul> </ul>
</nav> </nav>
</section> </section>
<div class='accordeon'> <div class='accordeon'>
<div class='accordeon_item'> <div class='accordeon_item'>
<div id="1" class='accordeon_item_header'> <div id="1" class='accordeon_item_header'>
<h2 class ="titres"></h2> <h2 class="titres"></h2>
<p>(Cliquez ici pour étendre)</p> <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>
</div> </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> </body>
</html> </html>

7
planets.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,7 +9,8 @@
<script src="scripts/planets.js" type="module" defer></script> <script src="scripts/planets.js" type="module" defer></script>
<title>Planets</title> <title>Planets</title>
</head> </head>
<body>
<body id="planets">
<section class="titre"><a href="index.html">STAR WARS</a></section> <section class="titre"><a href="index.html">STAR WARS</a></section>
<section class="sec-menu"> <section class="sec-menu">
<nav class="nav-menu"> <nav class="nav-menu">
@ -20,10 +22,11 @@
</nav> </nav>
</section> </section>
<section id="resultats"> <section id="resultats" class="accordeon">
</section> </section>
</body> </body>
</html> </html>

26
scripts/personnages.js
View File

@ -67,19 +67,19 @@ for (let i = 0; i < PERPAGE; i++) {
PERSONNAGES.innerHTML += PERSONNAGES.innerHTML +=
`<section class="resultat"> `<section class="resultat accordeon_item">
<h1 class="titreAccordeon">${urlname}</h1> <h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon"> <div class="accordeon_item_body">
<div class="1"> <div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div> <div id=genre>Genre : ${urlgender}</div>
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div> <div id= poids> Poids du personnage : ${urlmass} kg</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
<div class="2"> Planète de Naissance : ${urlhomeworld}</div> <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
<div class="3"> Film où je suis présent : ${urlfilms}</div> <div class="3"> Film où je suis présent : ${urlfilms}</div>
</div> </div>
</section>`; </section>`;

13
scripts/planets.js
View File

@ -33,9 +33,9 @@ function remplissage(results) {
planetes.innerHTML += planetes.innerHTML +=
`<section class="resultat"> `<section class="resultat accordeon_item">
<h1 class="titreAccordeon">${nom}</h1> <h1 class="accordeon_item_header">${nom}</h1>
<div class="accordeon"> <div class="accordeon_item_body">
<div class="1"> <div class="1">
<p>${terrain}</p> <p>${terrain}</p>
<p>${climate}</p> <p>${climate}</p>
@ -47,6 +47,13 @@ function remplissage(results) {
</section>`; </section>`;
} }
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
for (item of accordeonItemHeader) {
item.addEventListener("click", (event) => {
item.classList.toggle("active");
});
}
//Pagination //Pagination
createPagination(previousUrl, nextUrl, planetes, remplissage); createPagination(previousUrl, nextUrl, planetes, remplissage);
} }

2
scripts/util.js
View File

@ -52,7 +52,7 @@ export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) =
if (prevUrl == null) firstPage = true; if (prevUrl == null) firstPage = true;
if (nextUrl == null) lastPage = true; if (nextUrl == null) lastPage = true;
let previousButton = `<button id="prevButton">Page précédente</button>`; 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>`; let nextButton = `<button id="nextButton">Page suivante</button>`;
elementParent.innerHTML += previousButton; elementParent.innerHTML += previousButton;

84
styles/style.css
View File

@ -1,3 +1,8 @@
:root{
--jaune: #ffe81f;
--blanc: #ccc;
}
@font-face { @font-face {
font-family: 'star-wars'; font-family: 'star-wars';
src: url("../assets/fonts/Starjedi.ttf"); src: url("../assets/fonts/Starjedi.ttf");
@ -7,9 +12,25 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'star-wars', serif; 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{ .titre a{
margin-top : 20px; margin-top : 20px;
background-color: transparent; background-color: transparent;
@ -17,61 +38,74 @@
content: url("../assets/imgs/titre.png"); content: url("../assets/imgs/titre.png");
font-size: xx-large; font-size: xx-large;
text-decoration: underline; text-decoration: underline;
text-decoration-color: #ffe81f; text-decoration-color: var(--jaune);
}
.sec-menu{
margin: 1em;
height: 100%;
} }
.ul-menu{ .ul-menu{
display: flex;
list-style-type: none; list-style-type: none;
font-size: large; font-size: large;
color : #FFF; color : var(--blanc);
text-decoration: underline;
text-decoration-color: #ffe81f;
} }
.ul-menu li{ .ul-menu li{
display: inline; display: inline;
color : #FFF; color : var(--blanc);
float: left;
margin: 1em; margin: 1em;
font-size: large; font-size: large;
text-decoration: underline;
text-decoration-color: #ffe81f;
} }
.ul-menu li a{ .ul-menu li a{
display: block; display: block;
color : #FFF; color : var(--blanc);
padding: 5px; padding: 5px;
text-align: center; text-align: center;
font-size: large; font-size: large;
text-decoration: underline; text-decoration: none;
text-decoration-color: #ffe81f; border-bottom: 2px solid var(--jaune);
} }
body{ .ul-menu li a:hover{
background-image: url("../assets/imgs/starry_sky.jpg"); border: 2px solid var(--jaune);
/* border-radius: 10%; */
} }
div.image-films { /* div.image-films {
background-color: transparent; background-color: transparent;
margin-top: -170px; margin-top: -170px;
margin-left: auto; margin-left: auto;
width: 30%; width: 30%;
content: url("../assets/imgs/mando.png"); 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 { div.image-charactere {
background-color: transparent; background-color: transparent;
margin-top: -170px; position: absolute;
margin-left: auto; right: 0px;
top: 0px;
z-index: -1;
width: 30%; width: 30%;
content: url("../assets/imgs/grogu.png"); content: url("../assets/imgs/grogu.png");
} }
#reponses-films { #reponses-films {
color : #FFF; color : var(--blanc);
float: left; float: left;
margin-top : 200px; margin-top : 200px;
margin-left:-350px; margin-left:-350px;
@ -79,12 +113,10 @@ div.image-charactere {
.accordeon { .accordeon {
color : #000; color : #000;
float: left; margin: 1em;
margin-top : 100px;
margin-left: -350px;
} }
.accordeon_item{ .accordeon_item{
background-color:#ffff; background-color:var(--blanc);
margin:2rem 0; margin:2rem 0;
border-radius: 1rem; border-radius: 1rem;
box-shadow: 1px 1px 30px rgb(196, 196, 196) ; box-shadow: 1px 1px 30px rgb(196, 196, 196) ;
@ -115,3 +147,11 @@ div.image-charactere {
.accordeon_item_header.active + .accordeon_item_body{ .accordeon_item_header.active + .accordeon_item_body{
max-height: 200px; max-height: 200px;
} }
#planets{
background-image: url("../assets/imgs/backgroung_dead_trooper.jpg");
background-size: cover;
background-position: top;
background-attachment: fixed;
}