Merge branch 'main' of https://gitea.zkd.ca/Dev_Web/web01
This commit is contained in:
238
www/aPropos.html
238
www/aPropos.html
@@ -26,12 +26,137 @@
|
|||||||
|
|
||||||
<main class="aPropos">
|
<main class="aPropos">
|
||||||
<p id="message">Coming soon...</p>
|
<p id="message">Coming soon...</p>
|
||||||
<div>
|
<div class="sidebyside">
|
||||||
|
|
||||||
<div>
|
<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>
|
||||||
|
|
||||||
|
<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 :
|
Contenu minimal de la page de contact de votre site Web :
|
||||||
• <main> – Le contenu principal de la page
|
• <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.)
|
▪ 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 » :
|
o Un formulaire de type « contactez-nous » :
|
||||||
▪ Deux zones de texte monolignes
|
▪ Deux zones de texte monolignes
|
||||||
@@ -54,105 +184,7 @@ pour avoir complété le formulaire (ex : reponse.html). Cette page devra être
|
|||||||
demandées.
|
demandées.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
</div>
|
</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>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@@ -277,10 +277,25 @@ footer {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aPropos .conteneurMaps {
|
||||||
|
max-width: 700px;
|
||||||
|
max-height: 600px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aPropos .conteneurMaps>iframe {
|
||||||
|
border:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.aPropos .sidebyside>div {
|
.aPropos .sidebyside>div {
|
||||||
margin: 5px 20px;
|
margin: 5px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aPropos .sidebyside>h1 {
|
||||||
|
width: 120%;
|
||||||
|
|
||||||
|
}
|
||||||
.aPropos textarea {
|
.aPropos textarea {
|
||||||
resize: none;
|
resize: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -160,7 +160,7 @@
|
|||||||
peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un
|
peut être façonnée selon les préférences du joueur, faisant du choix et de l’optimisation un
|
||||||
élément
|
élément
|
||||||
clé de la progression.</p>
|
clé de la progression.</p>
|
||||||
<a href="warframes.html">PLUS D'INFOS</a>
|
<a href="armures.html">PLUS D'INFOS</a>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user