From a7ba076bcbfe23777df8eee479c5e71942ffc390 Mon Sep 17 00:00:00 2001
From: Stan <sr92.zkd-gitea@sr-netw.ca>
Date: Sun, 30 Nov 2025 16:34:44 -0500
Subject: [PATCH] Changement aPropos

---
 www/aPropos.html  | 238 ++++++++++++++++++++++++++--------------------
 www/css/style.css |  15 +++
 2 files changed, 150 insertions(+), 103 deletions(-)

diff --git a/www/aPropos.html b/www/aPropos.html
index 7ef5c5d..3145b90 100644
--- a/www/aPropos.html
+++ b/www/aPropos.html
@@ -26,12 +26,137 @@
 
     <main class="aPropos">
         <p id="message">Coming soon...</p>
-        <div>
-
+        <div class="sidebyside">
             <div>
-                <h1>Contactez l'équipe!</h1>
+                <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
+                <!-- si utilisation de serveur dynamique, changer pour POST -->
+                <form method="get" action="reponse.html">
+                    <fieldset>
+                        <legend>Informations de contact</legend>
+                        <div>
+                            <label for="nomComplet">Votre nom complet :</label>
+                            <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
+                                placeholder="Prénom Nom">
+                        </div>
+                        <div>
+                            <label for="email">Votre adresse courriel : </label>
+                            <input id="email" name="email" type="email" required
+                                placeholder="(ex. vous@fournisseur.com)" size="30">
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Réponse courte</legend>
+                        <div>
+                            <div class="sidebyside">
+                                <div>
+                                    <label class="formInfo">Reviendriez-vous? :</label>
+
+                                    <div class="selecteurRadio">
+                                        <input id="radOui" name="rad" type="radio" value="5">
+                                        <label for="radOui">Oui</label>
+                                        <input id="radNon" name="rad" type="radio" value="10">
+                                        <label for="radNon">Non</label>
+                                        <input id="radMB" name="rad" type="radio" value="15">
+                                        <label for="radMB">Peut-être</label>
+                                    </div>
+                                </div>
+                                <div>
+                                    <label for="pagePrefs" class="formInfo">Page préféré :</label>
+                                    <div>
+                                        <select name="page" id="pagePrefs">
+                                            <option value="accueil" selected>Page d'accueil</option>
+                                            <option value="aPropos">À Propos</option>
+                                            <option value="reponse" disabled>Réponse</option>
+                                            <option value="histoire">Histoire de DE</option>
+                                            <optgroup label="Univers Sci-fi">
+                                                <option value="sousPageLore1">Arc 1 : Éveil</option>
+                                                <option value="sousPageLore2">Arc 2: Saga de la guerre intérieure
+                                                </option>
+                                                <option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
+                                                <option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
+
+                                            </optgroup>
+                                            <option value="missions">Missions</option>
+                                            <option value="armures">Armures</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <label>Quel personnage voudriez-vous essayer : </label>
+                                <div class="sidebyside">
+                                    <!-- test clickable region -->
+                                    <label class="clickLabel" for="persoOne">
+                                        <input type="checkbox" id="persoOne" name="persoOne" value="1">
+                                        Ember</label>
+
+                                    <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
+                                    <label for="persoTwo">Equinox</label>
+
+
+                                    <input type="checkbox" id="persoThree" name="persoThree" value="1">
+                                    <label for="persoThree">Frost</label>
+
+
+                                    <input type="checkbox" id="persoFour" name="persoFour" value="1">
+                                    <label for="persoFour">Koumei</label>
+
+
+                                    <input type="checkbox" id="persoFive" name="persoFive" value="1">
+                                    <label for="persoFive">Rhino</label>
+                                    <input type="checkbox" id="persoSix" name="persoSix" value="1">
+                                    <label for="persoSix">Sevagoth</label>
+                                    <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
+                                    <label for="persoSeven">Voruna</label>
+                                </div>
+                            </div>
+                            <div>
+                                <label>Niveau de satisfaction</label>
+                                <input name="niveau" type="range" value="100">
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Votre appreciations</legend>
+                        <!-- TODO : for="niveau" -->
+                        <textarea name="zoneComment" rows="10" cols="80"
+                            placeholder="Quelque chose à ajouter?"></textarea>
+                    </fieldset>
+                    <div class="sidebyside centered">
+                        <button type="submit">Envoyer</button>
+                        <button type="reset">Réinitialiser</button>
+                    </div>
+                </form>
             </div>
-            <!--
+            <div>
+
+                <div>
+                    <h1>Contactez l'équipe!</h1>
+                    <div>
+                        <div>
+                            <h2>Coordonnées</h2>
+                            <div>
+                                <p>Adresse : 475 Rue du Cégep, Sherbrooke, QC J1E 4K1</p>
+                                <p>Pour plus d'information sur les créateurs : <a target="_blank"
+                                        href="https://www.cegepsherbrooke.qc.ca/">Cégep de Sherbrooke</a></p>
+                                <p>Téléphone : +18195646350</p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div>
+                                Contact
+                            </div>
+                            <div class="conteneurMaps">
+                                <iframe title="Maps pour cegep"
+                                    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>
+                <!--
 
 Contenu minimal de la page de contact de votre site Web :
 • <main> – Le contenu principal de la page
@@ -40,6 +165,11 @@ o Des informations de contact sous forme de :
 ▪ 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
@@ -54,105 +184,7 @@ pour avoir complété le formulaire (ex : reponse.html). Cette page devra être
 demandées.
 
 -->
-        </div>
-        <div>
-            <!-- utilisation de get pour avoir les variables dans l'url : page statique -->
-            <!-- si utilisation de serveur dynamique, changer pour POST -->
-            <form method="get" action="reponse.html">
-                <fieldset>
-                    <legend>Informations de contact</legend>
-                    <div>
-                        <label for="nomComplet">Votre nom complet :</label>
-                        <input id="nomComplet" name="nomComplet" type="text" required minlength="3"
-                            placeholder="Prénom Nom">
-                    </div>
-                    <div>
-                        <label for="email">Votre adresse courriel : </label>
-                        <input id="email" name="email" type="email" required placeholder="(ex. vous@fournisseur.com)"
-                            size="30">
-                    </div>
-                </fieldset>
-                <fieldset>
-                    <legend>Réponse courte</legend>
-                    <div>
-                        <div class="sidebyside">
-                            <div>
-                                <label class="formInfo">Reviendriez-vous? :</label>
-
-                                <div class="selecteurRadio">
-                                    <input id="radOui" name="rad" type="radio" value="5">
-                                    <label for="radOui">Oui</label>
-                                    <input id="radNon" name="rad" type="radio" value="10">
-                                    <label for="radNon">Non</label>
-                                    <input id="radMB" name="rad" type="radio" value="15">
-                                    <label for="radMB">Peut-être</label>
-                                </div>
-                            </div>
-                            <div>
-                                <label for="pagePrefs" class="formInfo">Page préféré :</label>
-                                <div>
-                                    <select name="page" id="pagePrefs">
-                                        <option value="accueil" selected>Page d'accueil</option>
-                                        <option value="aPropos">À Propos</option>
-                                        <option value="reponse" disabled>Réponse</option>
-                                        <option value="histoire">Histoire de DE</option>
-                                        <optgroup label="Univers Sci-fi">
-                                            <option value="sousPageLore1">Arc 1 : Éveil</option>
-                                            <option value="sousPageLore2">Arc 2: Saga de la guerre intérieure</option>
-                                            <option value="sousPageLore3">Arc 3: Saga de la nouvelle Guerre</option>
-                                            <option value="sousPageLore4">Arc 4: Saga de la guerre du Néant</option>
-
-                                        </optgroup>
-                                        <option value="missions">Missions</option>
-                                        <option value="armures">Armures</option>
-                                    </select>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <label>Quel personnage voudriez-vous essayer : </label>
-                            <div class="sidebyside">
-                                <!-- test clickable region -->
-                                <label class="clickLabel" for="persoOne" style="background-color: blue;">
-                                    <input type="checkbox" id="persoOne" name="persoOne" value="1">
-                                    Ember</label>
-
-                                <input type="checkbox" id="persoTwo" name="persoTwo" value="1">
-                                <label for="persoTwo">Equinox</label>
-
-
-                                <input type="checkbox" id="persoThree" name="persoThree" value="1">
-                                <label for="persoThree">Frost</label>
-
-
-                                <input type="checkbox" id="persoFour" name="persoFour" value="1">
-                                <label for="persoFour">Koumei</label>
-
-
-                                <input type="checkbox" id="persoFive" name="persoFive" value="1">
-                                <label for="persoFive">Rhino</label>
-                                <input type="checkbox" id="persoSix" name="persoSix" value="1">
-                                <label for="persoSix">Sevagoth</label>
-                                <input type="checkbox" id="persoSeven" name="persoSeven" value="1">
-                                <label for="persoSeven">Voruna</label>
-                            </div>
-                        </div>
-                        <div>
-                            <label>Niveau de satisfaction</label>
-                            <input name="niveau" type="range" value="100">
-                        </div>
-                    </div>
-                </fieldset>
-                <fieldset>
-                    <legend>Votre appreciations</legend>
-                    <!-- TODO : for="niveau" -->
-                    <textarea name="zoneComment" rows="10" cols="80" placeholder="Quelque chose à ajouter?"></textarea>
-                </fieldset>
-                <div class="sidebyside centered">
-                    <button type="submit">Envoyer</button>
-                    <button type="reset">Réinitialiser</button>
-                </div>
-            </form>
+            </div>
         </div>
     </main>
 
diff --git a/www/css/style.css b/www/css/style.css
index 3b7fa26..a118663 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -277,10 +277,25 @@ footer {
 
 }
 
+.aPropos .conteneurMaps {
+    max-width: 700px;
+    max-height: 600px;
+    overflow: scroll;
+}
+
+.aPropos .conteneurMaps­>iframe {
+    border:0;
+
+}
+
 .aPropos .sidebyside>div {
     margin: 5px 20px;
 }
 
+.aPropos .sidebyside>h1 {
+    width: 120%;
+
+}
 .aPropos textarea {
     resize: none;
     width: 100%;