Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01

www/css/style.css

@@ -12,6 +12,9 @@
     box-sizing: border-box;
 }
 
+
+
+/** SECTION modifier par script  **/
 #updateDate {
     visibility: hidden;
     display: none;
@@ -32,6 +35,13 @@
     color: white;
 }
 
+#pageCouranteNAV {
+    text-shadow: violet 2px ;
+    box-shadow: #ffefe5;
+}
+
+/** FIN DE SECTION modifier par script  **/
+
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -104,23 +114,65 @@ footer {
 /****************************/
 .accueil {
     background-color: rgb(138, 43, 226);
+    color: #ffefe5;
 }
 
-.accueil main {
+.accueil h1 {
+    font-size: 3.5rem;
+}
+
+.accueil p:not(#rencontreEquipe p) {
     margin: auto;
-    padding: 0px 10%;
+    padding: 1% 45% 1% 0%;
 }
 
 .accueil section {
     width: 100%;
 }
 
-.accueil article {
+.accueil #intro {
-    color: #ffefe5;
+    background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") no-repeat center;
-    background-color: #13172c87;
+}
+
+.accueil header {
+    background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") center/cover;
+}
+
+.accueil header div {
+    background-color: #13172cb0;
+    height: 75vh;
     padding: 5%;
 }
 
+.accueil #rencontreEquipe {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.accueil #rencontreEquipe div {
+    width: 25%;
+    margin: 0px auto;
+    align-content: center;
+}
+
+.accueil #rencontreEquipe div p {
+    margin: 5px;
+    text-align: center;
+}
+
+.accueil #rencontreEquipe h2 {
+    width: 100%;
+    margin: 25px;
+    text-align: center;
+}
+
+.accueil #rencontreEquipe div img {
+    width: 80%;
+    border-radius: 50%;
+    padding: 15px;
+    margin: 0px 10% 0px 10%;
+}
+
 /****************************/
 /* PAGE: à Propos */
 /* AUTEUR: Stanislas */

www/index.html

@@ -25,16 +25,51 @@
 	</nav>
 
 	<main>
-
+		<header>
-		<article>
+			<div>
-			<h1>Warframe : <br> Toute une histoire</h1>
+				<h1>WARFRAME : <br> Toute une histoire</h1>
 				<p> Warframe est un jeu d’action coopératif free-to-play dans lequel vous incarnez un Tenno, un guerrier
 					d’élite
-				utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques mêlant
+					utilisant une armure Warframe dotée de pouvoirs uniques. Au fil de missions rapides et dynamiques
-				tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en constante
+					mêlant
+					tir, mêlée et parkour, vous affrontez diverses factions dans un univers de science-fiction en
+					constante
 					évolution. Grâce à une grande liberté de personnalisation et à un contenu régulièrement enrichi,
 					Warframe offre une expérience profonde, fluide et accessible en équipe comme en solo.</p>
+			</div>
+		</header>
+
+		<section>
+			<article id="rencontreEquipe">
+				<h2>Rencontrez l'équipe!</h2>
+
+
+				<div>
+					<img src="images/imagesTeam/AvatarStanislas.png" alt="Avatar de Stanislas">
+					<p>Stanislas Royal</p>
+					<p>Programmeur</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarLea.png" alt="Avatar de Léa">
+					<p>Léa Dezothez</p>
+					<p>Directrice Artistique</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarJeremy.png" alt="Avatar de Jérémy">
+					<p>Jérémy Hébert</p>
+					<p>Coordonateur</p>
+				</div>
+
+				<div>
+					<img src="images/imagesTeam/AvatarAndres.png" alt="Avatar de Andres">
+					<p>Andres David Herrera Escorcia</p>
+					<p>Conseiller</p>
+				</div>
+
 			</article>
+		</section>
 
 		<section>
 			<article>

www/js/script.js

@@ -1,3 +1,39 @@
+
+// https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+// Performance for my useCase (modify NAV and FOOTER)
+
+document.addEventListener("DOMContentLoaded", 
+    function(e) {
+        console.log("DOMContentLoaded triggered !");
+            // for (document.querySelector("nav")
+    });
+
+
+// javascript console output DOM tree
+// https://stackoverflow.com/questions/50305257/how-to-console-log-entire-html-dom-tree-in-order-with-attribute-names
+// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+
+var walker = document.createTreeWalker(
+  document.documentElement,
+  NodeFilter.SHOW_ELEMENT // only elements
+);
+
+while (walker.nextNode()) {
+  let current = walker.currentNode;
+  console.log(
+    current.tagName,
+    [...current.attributes].map(({value,name}) => `${name}=${value}`).join()
+  );
+}
+
+
+// Needed for image loaded and fetched : Not on local computer.
+/*    https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
+document.addEventListener("load", function(e) {
+  console.log("The page has completely loaded.");
+});
+*/
+
 window.onload = function () {
             setTimeout(function () {
 /*                document.getElementById('message').innerHTML =
@@ -11,7 +47,26 @@ window.onload = function () {
                         document.getElementById("updateDate").setAttribute("id", "updateDateW");
                         document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
                     }
-            }, 1000);
+
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/children
+                    // const myHeader = document.getElementByTagName("header"); // TODO: Make sure only first nav (need <header>)
+                    myNav = document.getElementsByTagName("nav");
+                    console.log(myNav.length());
+
+                    for (var i = 0; i < myNav.children.length(); i++) {
+                        var tableChild = myNav.children[i];
+                        console.log(tableChild.tagName);
+                        // Do stuff
+                    }
+
+/*                    for (const child of myNav.children) {
+                    console.log(child.tagName);
+                    }
+*/
+            }, 2000);
+            // NOTE: Change Current Page based on url in <NAV>
+
+
             // TODO Add timer for glitch
             // NOTE Track mouse mouvement and show after a percentage of ?
             // NOTE une page sur deux, ...