add help for idees

site/crapaud-fou.css

@@ -74,3 +74,6 @@ li {
   border-bottom: 1px dotted #aaa;
   color: #333;
 }
+.technique {
+  font-size: .8em;
+}

site/index.html

@@ -248,7 +248,7 @@
     </div>
 
     <div class="modal fade" id="helpid" tabindex="-1" role="dialog">
-      <div class="modal-dialog" role="document">
+      <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">Comment proposer une idée</h5>
@@ -257,11 +257,38 @@
             </button>
           </div>
           <div class="modal-body">
+            <div class="alert alert-warning clearfix">
+              Le <b><a href="https://idees.crapaud-fou.org">forum des idées</a></b> permet de partager des projets, des points de vue, des questions, sans forcément vouloir plonger directement dans la mare et son bouillonement.
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/idees-connexion.png" alt="panneau de connexion" class="float-left mr-5">
+              <p>Pour poster une nouvelle idée, vous devrez d'abord créer un compte (ce compte est distinct de celui des autres espaces comme le chat ou le wiki). Cliquez sur le bouton "Inscription" dans la boite de dialogue "Connexion".</p>
+              <p>Vous aurez à fournir un nom, une adresse email (utilisée pour vous envoyer des notifications si votre idée suscite des réactions) et un mot de passe.</p>
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/idees-proposer.png" alt="proposer une idee" class="mb-2">
+              <p>Ensuite cliquez en haut sur "Proposer une idée". Choisissez
+              <ul>
+                <li>un titre (court si possible),</li>
+                <li>une categorie (optionnellement)</li>
+                <li>et détaillez l'idée ou la question aussi precisemment que possible.</li>
+              </ul>
+              Il est toujours de bon ton d'ajouter les url des choses que vous citez, si vous incluez des références.<p>
+              <p>Dans les mots-clés, le premier mot-clé est supposé être un type: suggestion, action, idee ou information. Vous pouvez ajouter d'autres mots clé mais il est toujours plus efficace de choisir des <a href="https://idees.crapaud-fou.org/tags">mots-clés qui existent deja</a>. A noter que les <a href="https://wiki.crapaud-fou.org/jardiniers">jardiniers</a> pourront être amenés a reclassifier vos mots-clé pour des raisons de consistence avec le reste des questions.</p>
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/idees-vote.png" alt="vote sur idees" class="float-left mr-5">
+              <p>Quand vous êtes connecté vous pouvez du coup voter pour ou contre les idées proposées par les autres, mais aussi proposer des réponses ou ajouter des commentaires.</p>
+            </div>
+            <div class="alert alert-light clearfix technique text-monospace">
+              <h5>Note technique</h5>
+              <p>Le forum des idées utilise le logiciel libre <a href="https://www.question2answer.org/">question2answer</a> qui suit le modèle fonctionnel de ce qu'on peut trouver sur Stack Overflow.</p>
+              <p>Le serveur qui héberge le forum des idées des crapauds fous est situé dans le datacenter parisien de <a href="https://scaleway.com">Scaleway</a>, et son financement est assuré par mose. L'administration système du serveur est assurée par mose, aidé par les autres <a href="https://wiki.crapaud-fou.org/jardiniers">plombiers</a> Trenty et 12b.</p>
+            </div>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
-            <button type="button" class="btn btn-primary">Save changes</button>
+            <a href="https://idees.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://idees.crapaud.fou-org</b></a>
-          </div>
           </div>
         </div>
       </div>
@@ -304,6 +331,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   <div class="container-fluid footer mt-5">
     <div class="container pt-5 pb-3">