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

www/armures.html

@@ -48,19 +48,26 @@
                     incinération destructrice, laissant des cadavres calcinés et des cendres dériver dans sa mer
                     écarlate.
                 </p>
-            </div>
                 <div class="habilites">
                     <h3>Habilités</h3>
                     <p>Boule de feu : Lance un projectile enflammé qui embrase les ennemis au contact.</p>
-                <p>Immolation : Protégez Ember avec une armure de flammes dont la combustion s’intensifie avec le temps,
+                    <p>Immolation : Protégez Ember avec une armure de flammes dont la combustion s’intensifie avec le
+                        temps,
                         consommant de l’énergie une fois sa
                         jauge pleine. Relancez le sort pour éteindre les flammes.
                     </p>
-                <p>Explosion de feu : Frappez le sol pour créer une vague de plasma incinérant qui repousse les ennemis
+                    <p>Explosion de feu : Frappez le sol pour créer une vague de plasma incinérant qui repousse les
+                        ennemis
                         et détruit leur armure.</p>
-                <p>Inferno : Commandez une comète enflammée qui s'écrasera devant des braises, engloutissant les ennemis
+                    <p>Inferno : Commandez une comète enflammée qui s'écrasera devant des braises, engloutissant les
+                        ennemis
                         dans un feu capable de se propager dans leurs rangs.</p>
                 </div>
+
+                <div class="habilites-video">
+                    <video src="./medias/mediasAndres/Ember.mp4" autoplay muted loop playsinline></video>
+                </div>
+            </div>
         </section>
 
         <section class="perso">

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,12 +114,66 @@ footer {
 /****************************/
 .accueil {
     background-color: rgb(138, 43, 226);
+    color: #ffefe5;
 }
 
-.accueil article p {
+.accueil h1 {
+    font-size: 3.5rem;
+}
+
+.accueil p:not(#rencontreEquipe p) {
     margin: auto;
+    padding: 1% 45% 1% 0%;
+}
+
+.accueil section {
+    width: 100%;
+}
+
+.accueil #intro {
+    background: #13172c url("../images/ImagesLea/warframeEnvironment.jpg") no-repeat center;
+}
+
+.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;
-    width: 45%;
+    flex-wrap: wrap;
+    background-color: #E6ECF3;
+    color: #606060;
+    height: 85vh;
+}
+
+.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%;
 }
 
 /****************************/
@@ -420,8 +484,8 @@ footer {
 }
 
 .lore h1,
-h2,
+.lore h2,
-h3 {
+.lore h3 {
     margin: 10px;
 }
 
@@ -635,8 +699,26 @@ blockquote a {
 .armures .perso .content {
     position: relative;
     z-index: 10;
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    align-items: flex-start;
+}
+
+.armures .perso .habilites-video {
+    flex: 1;
+    position: relative;
+    z-index: 20;
+}
+
+.armures .perso .habilites-video video {
+    width: 30%;
+    height: auto;
+    border-radius: 10px;
+    display: block;
 }
 
 .armures .habilites {
-    position: absolute;
+    position: relative;
+    z-index: 15;
 }

www/index.html

@@ -10,7 +10,7 @@
 	<title>Les ALT-F4</title>
 </head>
 
-<body>
+<body class="accueil">
 	<nav>
 		<a href="index.html" class="boutonAccueil"><img src="images/LogoALT-F4_Nav.svg" alt="ALT-F4"></a>
 
@@ -24,17 +24,52 @@
 		</ul>
 	</nav>
 
-	<main class="accueil">
+	<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>
@@ -50,7 +85,7 @@
 					Extremes continue d’insuffler sa passion pour le développement et le partage, en gardant comme
 					moteur la créativité, l’excellence et l’esprit communautaire.</p> <!--Texte généré avec ChatGPT-->
 
-				<a href="histoire.html"><button>Plus d'infos</button></a>
+				<a href="histoire.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 
@@ -66,7 +101,7 @@
 					du jeu.
 					Pour débloquer plus de quêtes d’histoire, il faut que le joueur progresse sur le système solaire et
 					qu’il débloque des jonctions qui lient les planètes entre elles.</p>
-				<a href="lore.html"><button>Plus d'infos</button></a>
+				<a href="lore.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 		<section>
@@ -81,7 +116,7 @@
 					ou la Capture, misent davantage sur la discrétion et la rapidité. Cette diversité permet d’adopter
 					des approches variées, de s’adapter à différents styles de jeu et de tirer parti des capacités
 					uniques de chaque Warframe.</p>
-				<a href="missions.html"><button>Plus d'infos</button></a>
+				<a href="missions.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 
@@ -98,7 +133,7 @@
 					Grâce aux mods, aux variantes Prime et aux options de personnalisation esthétique, chaque Warframe
 					peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un élément
 					clé de la progression.</p>
-				<a href="warframes.html"><button>Plus d'infos</button></a>
+				<a href="warframes.html"><button>PLUS D'INFOS</button></a>
 			</article>
 		</section>
 	</main>

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, ...