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

.cspell/custom-dictionary.txt

@@ -8,12 +8,15 @@ Equipe
 Escorcia
 Grineers
 Hébert
+Koumei
 natah
 Natah
 Orbis
+reponse
 Sevagoth
 soustitre
 vors
+Voruna
 warframe
 Warframe
 warframes

.gitattributes

@@ -2,4 +2,5 @@
 *.webm filter=lfs diff=lfs merge=lfs -text
 *.avi filter=lfs diff=lfs merge=lfs -text
 *.flv filter=lfs diff=lfs merge=lfs -text
-*.mpg filter=lfs diff=lfs merge=lfs -text
+*.mpg filter=lfs diff=lfs merge=lfs -text
+*.mkv filter=lfs diff=lfs merge=lfs -text

README.md

@@ -56,9 +56,9 @@ o <main> – Le contenu principal de la page
     - [ ] Une bannière conçue par vous (vous n’êtes pas obligés de garder la même sur toutes vos pages)
     - [ ] 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] Un bouton pour chaque page du site Web (sous la forme d’une liste <ul>) avec des effets de CSS
+    - [x] Un bouton pour chaque page du site Web (sous la forme d’une liste `<ul>`) avec des effets de CSS
     - [ ] Trouvez une façon d’indiquer sur quelle page se trouve actuellement le visiteur. Ou l’implantation d’un fil d’Ariane.
-  - [ ] balise ` <footer>`
+  - [ ] balise `<footer>`
     - [ ] copyright
     - [ ] Le nom de l’équipe et le membre de l’équipe responsable de la création de la page concernée
     - [ ] La date de conception
@@ -100,6 +100,36 @@ o <main> – Le contenu principal de la page
 
 - [ ] Autres ...
 
+HTML
+
+```html
+<!-- /**********************************************************************************/
+/* Fichier
+ : page_web.html
+ */
+/* Titre
+ : Exercice de création d'une page Web HTML 5
+ */
+/* Auteur
+ : © Josianne Fortin, Cégep de Sherbrooke
+ */
+/* Date
+ : 2025-08-22
+ */
+/* Description : Ce document réalise une page Web sur les balises et attributs HTML 5 */
+/*************************************************************************************-->
+```
+
+CSS
+
+```css
+/* Fichier : style.css
+Auteur : Alex Tremblay
+Date : 2025-09-15
+Description : CSS principale pour le
+site Comiccon */
+```
+
 ---
 
 ---

www/aPropos.html

@@ -38,22 +38,122 @@ Contenu minimal de la page de contact de votre site Web :
 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.)
+
+
+
 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 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 
+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 
+pour avoir complété le formulaire (ex : reponse.html). Cette page devra être créé en plus des autres pages
 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>
     </main>
 
     <footer>

www/css/style.css

@@ -42,6 +42,16 @@
 
 /** FIN DE SECTION modifier par script  **/
 
+.sidebyside {
+    display: flex;
+}
+.centered {
+    text-align: center;
+    margin: auto;
+    display: block;
+}
+
+
 body {
     min-height: 100vh;
     /* Pour footer at bottom from : https://douiri.org/blog/fix-footer-bottom-css/ */
@@ -266,6 +276,30 @@ footer {
 
 }
 
+.aPropos .sidebyside>div {
+    margin: 5px 20px;
+}
+.aPropos textarea {
+    resize: none;
+    width: 100%;
+}
+
+.aPropos form {
+    width: 70ch;
+    margin: auto;
+    background-color: #273A56;
+    border-radius: 15px;
+    padding: 10px;
+    color: #E6ECF3;
+    overflow:scroll;
+}
+.aPropos fieldset {
+    padding: 10px;
+    width: 100%;
+    border-color: #606060;
+    margin: 10px auto;
+}
+
 /*.aPropos div {*/
 /*    display: block; */
 /*}*/

www/reponse.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Merci de vos commentaire</title>
+</head>
+
+<body>
+    Page de retour du formulaire.
+</body>
+
+</html>