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

www/aPropos.html

@@ -97,7 +97,6 @@
                             <div>
                                 <label>Quel personnage voudriez-vous essayer : </label>
                                 <div class="sidebyside">
-                                    <!-- test clickable region no need for in label when surrounding input ?? -->
                                     <label class="clickLabel" for="persoOne">
                                         <input type="checkbox" id="persoOne" name="persoOne" value="1">
                                         Ember</label>
@@ -134,7 +133,6 @@
                     </fieldset>
                     <fieldset>
                         <legend>Votre appréciation</legend>
-                        <!-- TODO : for="niveau" -->
                         <textarea name="zoneComment" rows="10" cols="80"
                             placeholder="Quelque chose à ajouter?"></textarea>
                     </fieldset>
@@ -150,62 +148,30 @@
                     <div>
                         <div>
                             <h2>Coordonnées</h2>
-                            <div>
+                            <div class="grille">
-                                <p>Adresse : <a target="_blank"
+                                <p id="titreAdresse">Adresse :</p>
-                                        href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
+                                <a id="contenuAdresse" target="_blank"
-                                        475 rue du Cégep, Sherbrooke, QC J1E 4K1</a></p>
+                                    href="https://www.google.com/maps/dir//C%C3%A9gep+De+Sherbrooke+475+Rue+du+C%C3%A9gep+Sherbrooke,+Quebec+J1E+4K1/@45.4111141,-71.8863288,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x4cb7b3a7a1058a9f:0xac83ae2c6ba0672c!2m2!1d-71.8863288!2d45.4111141?entry=ttu&g_ep=EgoyMDI1MTEyMy4xIKXMDSoASAFQAw%3D%3D">
-                                <p>Pour plus d’information sur les créateurs : <a target="_blank"
+                                    475 rue du Cégep, Sherbrooke, QC J1E 4K1</a>
-                                        href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
+
-                                <p>Téléphone : <a href="tel:+18195646350">+1 (819) 564-6350</a></p>
+                                <p id="titreInfo">Pour plus d’information sur les créateurs :</p>
+                                <a id="contenuInfo" target="_blank" href="https://www.cegepsherbrooke.qc.ca/">Cégep de
+                                    Sherbrooke</a>
+
+                                <p id="titreTelephone">Téléphone :</p>
+                                <a id="contenuTelephone" href="tel:+18195646350">+1 (819) 564-6350</a>
+
+                                <p id="titreCourriel">Courriel :</p>
+                                <a id="contenuCourriel" target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
                             </div>
                         </div>
-
+                        <div class="conteneurMaps">
-                        <div>
+                            <iframe id="mapsFrame" title="Maps pour cégep"
-                            <div>
+                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
-                                <p>Courriel :
+                                width="600" height="450" allowfullscreen="" loading="lazy"
-                                    <a target="_blank" href="mailto:empty@zkd.ca">Équipe Les Alt-F4</a>
+                                referrerpolicy="no-referrer-when-downgrade"></iframe>
-                                </p>
-                                <div class="conteneurMaps">
-                                    <iframe id="mapsFrame" title="Maps pour cégep"
-                                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.9120010040356!2d-71.88890908663183!3d45.41111407095251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cb7b3a7a1058a9f%3A0xac83ae2c6ba0672c!2sC%C3%A9gep%20De%20Sherbrooke!5e0!3m2!1sen!2sca!4v1764356213744!5m2!1sen!2sca"
-                                        width="600" height="450" allowfullscreen="" loading="lazy"
-                                        referrerpolicy="no-referrer-when-downgrade"></iframe>
-                                </div>
-                            </div>
                         </div>
                     </div>
-                    <!--
-FIXME: Input nom et courriel largeur 
-FIXME: Centrer les div et fond-d'ecran
-FIXME: Padding 2e box ...
-
-
-Contenu minimal de la page de contact de votre site Web :
-• <main> – Le contenu principal de la page
-o Des informations de contact sous forme de :
-▪ Des coordonnées (adresse civique, adresse courriel, etc.) (peuvent être fictives)
-▪ Une carte interactive (Google maps, etc.)
-
-
-475 Rue du Cégep, Sherbrooke, QC J1E 4K1
-https://www.cegepsherbrooke.qc.ca/
-+18195646350
-
-
-
-o Un formulaire de type « contactez-nous » :
-▪ Deux zones de texte monolignes
-▪ Une zone de texte multilignes
-▪ Une liste déroulante
-▪ Des choix sous forme de cases à cocher
-▪ Des choix sous forme de boutons radio
-▪ Un bouton de réinitialisation du formulaire
-▪ Un bouton d’envoi du formulaire
-o Lors de son envoi, le formulaire doit faire afficher une nouvelle page contenant un message de remerciement
-pour avoir complété le formulaire (ex : reponse.html). Cette page devra être créé en plus des autres pages
-demandées.
-
--->
                 </div>
             </div>
         </div>

www/css/style.css

@@ -304,7 +304,6 @@ footer a:hover {
 /****************************/
 .aProposBG {
     background: url('../images/imageSR/Warframe0006.webp') center/cover fixed;
-    width: 100vw;
     height: 100vh;
 }
 
@@ -352,7 +351,7 @@ footer a:hover {
     width: 70ch;
     margin: auto;
     background-color: #726F9A;
-    border-radius: 15px;
+    border-radius: 20px;
     padding: 1em;
     color: #E6ECF3;
     overflow: none;
@@ -370,29 +369,89 @@ footer a:hover {
 .aPropos #contactInfo {
     background-color: #273A56;
     padding: 1em;
-    border-radius: 15px;
+    border-radius: 20px;
     color: #E6ECF3;
 }
 
-.aPropos a:link {
+.aPropos .grille {
+    display: grid;
+    grid-template-areas:
+        "titreAdresse contenuAdresse"
+        "titreInfo contenuInfo"
+        "titreTelephone contenuTelephone"
+        "titreCourriel contenuCourriel";
+    grid-template-columns: 1fr 2fr;
+}
+
+.aPropos .grille #titreAdresse {
+    grid-area: titreAdresse;
+    text-align: left;
+}
+
+.aPropos .grille #contenuAdresse {
+    grid-area: contenuAdresse;
+    text-align: right;
+}
+
+.aPropos .grille #titreInfo {
+    grid-area: titreInfo;
+    text-align: left;
+}
+
+.aPropos .grille #contenuInfo {
+    grid-area: contenuInfo;
+    text-align: right;
+}
+
+.aPropos .grille #titreTelephone {
+    grid-area: titreTelephone;
+    text-align: left;
+}
+
+.aPropos .grille #contenuTelephone {
+    grid-area: contenuTelephone;
+    text-align: right;
+}
+
+.aPropos .grille #titreCourriel {
+    grid-area: titreCourriel;
+    text-align: left;
+}
+
+.aPropos .grille #contenuCourriel {
+    grid-area: contenuCourriel;
+    text-align: right;
+}
+
+
+.aPropos .grille #contenuAdresse,
+.aPropos .grille #contenuInfo,
+.aPropos .grille #contenuTelephone,
+.aPropos .grille #contenuCourriel {
     color: #E6ECF3;
     font-weight: 800;
     text-decoration: underline;
-    text-align: right;
-    float: right;
 }
 
-.aPropos #mapsFrame {
+.aPropos .grille #contenuAdresse:hover,
-    border-radius: 15px;
+.aPropos .grille #contenuInfo:hover,
-}
+.aPropos .grille #contenuTelephone:hover,
-
+.aPropos .grille #contenuCourriel:hover {
-.aPropos a:visited {
     color: #c19f8a;
-
 }
 
-.aPropos a:hover {
+
-    color: #726F9A;
+/* Hide scrollbar for Chrome, Safari and Opera */
+.conteneurMaps::-webkit-scrollbar {
+ display: none;
+}
+/* Hide scrollbar for IE, Edge and Firefox */
+.conteneurMaps {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.aPropos #mapsFrame {
+    border-radius: 20px;
 }
 
 .aPropos .sidebyside label {
@@ -929,10 +988,11 @@ footer a:hover {
     color: #ffefe5;
     text-shadow: 2px 2px 2px #13172c;
 }
+
 .missions audio {
     margin: 2em auto auto auto;
     position: sticky;
-    top:65px;
+    top: 65px;
     left: 40vh;
     width: 70vh;
     text-align: center;

www/js/script.js

@@ -84,11 +84,37 @@ document.addEventListener("load", function(e) {
 });
 */
 
+function timerBlur(){
+    var count = 3;
+    var timer2 = setInterval(function(){
+        
+        if (count == 3) {
+            document.getElementById('logoAccueil').style.filter = "blur(3px)";
+
+        }
+        else if (count == 2) 
+        {
+          document.getElementById('logoAccueil').style.filter = "blur(2px)";
+        }
+        else if (count == 1) 
+        {
+          document.getElementById('logoAccueil').style.filter = "blur(1px)";
+        }
+                  else if (count == 0) 
+        {
+          document.getElementById('logoAccueil').style.filter = "";
+          clearInterval(timer2);
+        }
+        count--;
+    }, 350);
+
+}
 
 function timerGlitch(){
     var timer = setInterval(function(){
         curSrc = document.getElementById('logoAccueil').getAttribute('src');
         if (curSrc == 'images/LogoALT-F4_Nav.svg') {
+          timerBlur();
             document.getElementById('logoAccueil').setAttribute('src', 'images/LogoAlt-F4_NavGlitch.svg')
         }
         else