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

.gitignore

@@ -510,3 +510,31 @@ www/medias/mediasCredits/warframeDuviriRide.mp4
 www/medias/mediasHistoireDE/warframeRailjackRide.mp4
 www/multimedia/mediasCredits/warframeDuviriRide.mp4
 www/multimedia/mediasHistoireDE/warframeRailjackRide.mp4
+COMPRESS/warframeRailjackRide.mp4
+COMPRESS/Ember.mp4
+COMPRESS/Equinox.mp4
+COMPRESS/Frost.mp4
+COMPRESS/Koumei.mp4
+COMPRESS/Rhino.mp4
+COMPRESS/Sevagoth.mp4
+COMPRESS/Voruna.mp4
+COMPRESS/warframeDuviriRide.mp4
+www/multimediaHQ/we_All_Lift_Together_mPTCq3LiZSE.mp3
+www/multimediaHQ/mediasAndres/Ember.mp4
+www/multimediaHQ/mediasAndres/EmberVid.webm
+www/multimediaHQ/mediasAndres/Equinox.mp4
+www/multimediaHQ/mediasAndres/equinox.webm
+www/multimediaHQ/mediasAndres/Frost.mp4
+www/multimediaHQ/mediasAndres/FrostVid.webm
+www/multimediaHQ/mediasAndres/Koumei.mp4
+www/multimediaHQ/mediasAndres/KoumeiVid.webm
+www/multimediaHQ/mediasAndres/nokko.webm
+www/multimediaHQ/mediasAndres/Rhino.mp4
+www/multimediaHQ/mediasAndres/RhinoVid.webm
+www/multimediaHQ/mediasAndres/Sevagoth.mp4
+www/multimediaHQ/mediasAndres/SevagothVid.webm
+www/multimediaHQ/mediasAndres/Voruna.mp4
+www/multimediaHQ/mediasAndres/VorunaVid.webm
+www/multimediaHQ/mediasCredits/warframeDuviriRide.mp4
+www/multimediaHQ/mediasHistoireDE/warframeRailjackRide.mp4
+www/multimediaHQ/mediasLea/warframeIntro.mp4

README.md

@@ -54,7 +54,7 @@ o <main> – Le contenu principal de la page
     - [x] Logo
     - [ ] Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
     - [x] Le titre principal de la page Web (vous n’êtes pas obligés de garder le même sur toutes vos pages)
-  - [ ] balise `<nav>`
+  - [x] balise `<nav>`
     - [x] Un bouton pour chaque page du site Web (sous la forme d’une liste `<ul>`) avec des effets de CSS
     - [x] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
   - [x] balise `<footer>`
@@ -66,16 +66,19 @@ o <main> – Le contenu principal de la page
   - [x] Inclure les references pour chaques fichier multimedia
   - [ ] Au moins un lien de téléchargement
   - [ ] Un tableau
-    - [ ] • La dimension du tableau doit être au moins de 4 colonnes et 4 lignes.
+    - [x] • La dimension du tableau doit être au moins de 4 colonnes et 4 lignes.
-    - [ ] • Il doit y avoir de la fusion à l’intérieur du tableau.
+    - [x] • Il doit y avoir de la fusion à l’intérieur du tableau.
-    - [ ] • Les bordures doivent être faites par CSS.
+    - [x] • Les bordures doivent être faites par CSS.
   - [ ] Des listes
-    - [ ] • Au moins une liste à puce contenant au moins 3 éléments.
+    - [x] • Au moins une liste à puce contenant au moins 3 éléments.
     - [ ] • Au moins une liste numérotée contenant au moins 3 éléments.
     - [ ] • Au moins une d’entre elle doit être une liste imbriquée d’au moins 2 éléments supplémentaires.
-  - [ ] Du contenu multimédia - [ ] • Au moins un fichier audio - [x] • Au moins deux fichiers vidéo - [ ] • Au moins de cinq images différentes (excluant les photos des membres de l’équipe, le logo et la
+  - [ ] Du contenu multimédia
-        bannière)
+    - [ ] • Au moins un fichier audio
-  - [ ] Aucun texte bidon de type Lorem Ipsum ne sera accepté dans le site Web.
+    - [x] • Au moins deux fichiers vidéo
+    - [ ] • Au moins de cinq images différentes (excluant les photos des membres de l’équipe, le logo et la
+          bannière)
+  - [x] Aucun texte bidon de type Lorem Ipsum ne sera accepté dans le site Web.
   - [ ]
 
   ```md

www/armures.html

@@ -392,13 +392,13 @@
             </div>
 
             <div class="accueilwiki">
-                <a href="https://wiki.warframe.com/">
+                <a target="_blank" href="https://wiki.warframe.com/">
                     <img src="./images/ImagesAndres/accueilWiki.PNG" alt="jdjj">
                 </a>
             </div>
 
             <div class="accueilwiki">
-                <a href="https://wiki.warframe.com/w/Warframes">
+                <a target="_blank" href="https://wiki.warframe.com/w/Warframes">
                     <img src="./images/ImagesAndres/warframeWiki.PNG" alt="fsfsf">
                 </a>
             </div>

www/credits.html

@@ -48,7 +48,8 @@
                         Le site internet de Warframe a été consulté afin d’obtenir des images et vidéos authentiques du
                         jeu.
                     </p>
-                    <div class="bouton"><a href="https://www.warframe.com/fr/game/about">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://www.warframe.com/fr/game/about">Voir la
+                            source</a></div>
                 </div>
             </article>
 
@@ -112,7 +113,8 @@
                     <p class="contenu">
                         Discotools.xyz a permis la création du bouclier présent dans le logo ainsi que le favicon.
                     </p>
-                    <div class="bouton"><a href="https://discotools.xyz/fr/icons-editor">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://discotools.xyz/fr/icons-editor">Voir la
+                            source</a></div>
                 </div>
             </article>
 
@@ -123,7 +125,7 @@
                         Figma a été utilisé dans la conception du logo, du favicon et de l’image de remerciement pour
                         avoir rempli le formulaire.
                     </p>
-                    <div class="bouton"><a href="https://www.figma.com/fr-fr/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://www.figma.com/fr-fr/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -134,7 +136,8 @@
                         Lyco Canario est derrière la poule utilisée dans l’image de remerciement pour avoir rempli le
                         formulaire.
                     </p>
-                    <div class="bouton"><a href="https://dribbble.com/lycocanario">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://dribbble.com/lycocanario">Voir la source</a>
+                    </div>
                 </div>
             </article>
 
@@ -144,7 +147,8 @@
                     <p class="contenu">
                         Visual Studio Code a été l’outil de développement utilisé pour l’ensemble du projet.
                     </p>
-                    <div class="bouton"><a href="https://code.visualstudio.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://code.visualstudio.com/">Voir la source</a>
+                    </div>
                 </div>
             </article>
 
@@ -155,7 +159,7 @@
                         Le documentaire sur Warframe conçu par /noclip a servi à rédiger la page sur l’histoire de
                         Digital Extremes.
                     </p>
-                    <div class="bouton"><a
+                    <div class="bouton"><a target="_blank"
                             href="https://www.youtube.com/watch?v=UOE6528pwFc&list=PL-THgg8QnvU7Weo1mCM9H2AXljC7UrDm8&index=2">Voir
                             la source</a></div>
                 </div>
@@ -167,7 +171,8 @@
                     <p class="contenu">
                         La théorie fournie par le corps professoral a dépanné l’équipe à de multiples reprises.
                     </p>
-                    <div class="bouton"><a href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la
+                    <div class="bouton"><a target="_blank"
+                            href="https://moodle.cegepsherbrooke.qc.ca/course/view.php?id=1518">Voir la
                             source</a></div>
                 </div>
             </article>
@@ -178,7 +183,7 @@
                     <p class="contenu">
                         Les systèmes de Gitea ont permis un travail connecté durant l’ensemble du projet.
                     </p>
-                    <div class="bouton"><a href="https://about.gitea.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://about.gitea.com/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -188,7 +193,7 @@
                     <p class="contenu">
                         ChatGPT a permis la rédaction de certains textes du site.
                     </p>
-                    <div class="bouton"><a href="https://chatgpt.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://chatgpt.com/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -198,7 +203,7 @@
                     <p class="contenu">
                         Gemini a permis la rédaction de certains textes du site.
                     </p>
-                    <div class="bouton"><a href="https://gemini.google.com/app">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://gemini.google.com/app">Voir la source</a></div>
                 </div>
             </article>
 
@@ -209,7 +214,7 @@
                         Moqups a permis la création de la maquette, afin de rendre prévisible le style artistique du
                         site.
                     </p>
-                    <div class="bouton"><a href="https://moqups.com/fr/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://moqups.com/fr/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -219,7 +224,7 @@
                     <p class="contenu">
                         Google Maps a permis l’intégration de la carte géographique sur le site.
                     </p>
-                    <div class="bouton"><a href="https://www.google.com/maps">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/maps">Voir la source</a></div>
                 </div>
             </article>
 
@@ -229,7 +234,7 @@
                     <p class="contenu">
                         Les valideurs du World Wide Web Consortium ont permis la révision du code de l’ensemble du site.
                     </p>
-                    <div class="bouton"><a href="https://validator.w3.org/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://validator.w3.org/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -239,7 +244,7 @@
                     <p class="contenu">
                         Le moteur de recherche Brave Search a dépanné a de multiples reprises.
                     </p>
-                    <div class="bouton"><a href="https://search.brave.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://search.brave.com/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -249,7 +254,7 @@
                     <p class="contenu">
                         Le moteur de recherche Google a dépanné à de multiples reprises.
                     </p>
-                    <div class="bouton"><a href="https://www.google.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://www.google.com/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -259,7 +264,7 @@
                     <p class="contenu">
                         Le moteur de recherche DuckDuckGo a dépanné à de multiples reprises.
                     </p>
-                    <div class="bouton"><a href="https://duckduckgo.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://duckduckgo.com/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -269,7 +274,7 @@
                     <p class="contenu">
                         L’outil paint.net a permis l’édition de plusieurs images présentes sur le site.
                     </p>
-                    <div class="bouton"><a href="https://www.getpaint.net/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://www.getpaint.net/">Voir la source</a></div>
                 </div>
             </article>
 
@@ -279,7 +284,7 @@
                     <p class="contenu">
                         Le site de Google Fonts a permis de trouver une police pour le site.
                     </p>
-                    <div class="bouton"><a href="https://fonts.google.com/">Voir la source</a></div>
+                    <div class="bouton"><a target="_blank" href="https://fonts.google.com/">Voir la source</a></div>
                 </div>
             </article>
         </section>

www/css/style.css

@@ -1290,6 +1290,10 @@ h2 {
     padding: 10px;
 }
 
+.wf-table-simple li {
+    list-style: none;
+}
+
 /****************************/
 /* PAGE: Crédits */
 /* AUTEUR: Jérémy Hébert */

www/js/script.js

@@ -1,89 +1,11 @@
-
+/* AUTEUR: Stan
+   DATE : 2025-12-03
+   DESC: Ajout de glitch comme certains evenement dans Warframe
+   */
 // https://www.geeksforgeeks.org/html/difference-between-domcontentloaded-and-load-events/
-// Performance for my useCase (modify NAV and FOOTER)
-// https://stackoverflow.com/questions/44329324/cannot-read-property-symbolsymbol-iterator-of-undefined
-/*
-document.addEventListener("DOMContentLoaded", 
-    function(e) {
-        console.log("DOMContentLoaded triggered !");
-
-        var topEl  = document.getElementsByTagName("nav"); // maybe header
-        var listLI = topEl[0].getElementsByTagName("li");
-
-
-document.getElementById("");
- //       var allA = listLI.getElementsByTagName("a");
-// topEl.
-
-listLI.forEach(nodeLI => {console.log(nodeLI.innerHTML);});
-*/
-/*
-allA.forEach(node => {
-    console.log(node);
-});
-
-*/
-/*
-        // let myNav = document.getElementsByTagName("nav");
-        // myNav.getElementsByTagName("a")
-        for (child of allA){
-            console.log(child.innerHTML);
-        }
-*/            // for (document.querySelector("nav")
-//    });
-
-
-/*!SECTION
-
-// .textContent
-// .innerHTML
-
-
-const parent = document.getElementById("myParent");
-const children = parent.children;
-
-for (let i = 0; i < children.length; i++) {
-  const child = children[i];
-  // Perform actions on the child element
-  console.log(child.textContent);
-}
-
-
-for (let i = 0; i < children.length; i++) {
-  const child = children[i];
-  // Perform actions on the child element
-  console.log(child.TagName);
-console.log(child.textContent);… 
-
-
-*/
-
-// 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.");
-});
-*/
 
+// https://www.w3schools.com/js/js_timing.asp
+// https://stackoverflow.com/questions/62039703/blur-an-image-with-javascript
 function timerBlur(){
     var count = 3;
     var timer2 = setInterval(function(){
@@ -126,39 +48,7 @@ function timerGlitch(){
 
 window.onload = function () {
     timerGlitch();
-    setTimeout(function () {
-/*                document.getElementById('message').innerHTML =
-                    'The page has finished loading! After 2 second'; */
-                    // Check if on the test domain and that the text changed, if so display Data.
-                    if (window.location.hostname === 's.zkd.ca' && document.getElementById("updateDate").innerHTML != 'DATE_WEBSITE' )
-                    {
-                        document.getElementById("updateDate").setAttribute("id", "updateDateV");
-                    } else
-                    {
-                        document.getElementById("updateDate").setAttribute("id", "updateDateW");
-                        document.getElementById("updateDateW").innerHTML = 'À la prochaine!';
-                    }
-
-                    // 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, ...
         };