aide pour le chat

site/crapaud-fou.css

@@ -74,6 +74,9 @@ li {
   border-bottom: 1px dotted #aaa;
   color: #333;
 }
+.alert p:last-child {
+  margin-bottom: 0;
+}
 .technique {
   font-size: .8em;
 }

site/index.html

@@ -283,7 +283,7 @@
             <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>
+              <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>, son financement est pris en charge 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">
@@ -295,7 +295,7 @@
     </div>
 
     <div class="modal fade" id="helpchat" 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">Les premiers pas dans le Chat</h5>
@@ -304,10 +304,38 @@
             </button>
           </div>
           <div class="modal-body">
+            <div class="alert alert-warning clearfix">
+              Le <b><a href="https://coa.crapaud-fou.org">chat</a></b> (comme un tchate, pas comme un minou) est l'espace central de la mare des crapauds fous. On y discute en temps réel de tout et de rien (mais surtout de tout ce qui relève de la folie des crapauds).
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/chat-inscription.png" alt="trouver la liste des canaux" class="float-left mr-5">
+              <p>Pour pouvoir accéder à cet espace de discussion il va falloir, encore une fois, créer un compte. Ce compte est distinct des autres comptes ouverts sur le site des idées et le wiki. Quand votre compte aura été crée vous atterirez dans deux canaux par défaut, #accueil et #general.</p>
+              <p>Comme dans tout espace public, quand vous arrivez, les gens font attention à vous. Il y aura toujours quelqu'un pour vous souhaiter la bienvenue, vous demander d'où vous venez et ce qui vous intéresse. Parlez un peu de vous, c'est un endroit social, et ceux qui sont la depuis longtemps savent peut-être quels canaux correspondent à vos centres d'interêt.</p>
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/chat-canaux.png" alt="trouver la liste des canaux" class="float-left mr-5">
+              <p>Les canaux, ce sont comme des zones thématiques, on peut y entrer pour papoter, voir ce qui se disait avant qu'on arrive, partager des infos liées au thème du canal. Pour voir la <a href="https://coa.crapaud-fou.org/directory">liste des canaux disponibles</a>, il y a ce globe en haut a gauche, mais vous pouvez aussi chercher par mot-clé en utilisant la loupe qui est juste a coté.</p>
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/chat-compte.png" alt="trouver la liste des canaux" class="float-left mr-5">
+              <img src="images/chat-profil.png" alt="trouver la liste des canaux" class="mb-5"><br>
+              <p>Ca vaut le coup que vous preniez le temps de choisir un avatar, qui vous representera auprés des autres dans les fils de discussion. Pour ce faire, vous pouvez éditer votre compte et changer les choses dans votre profil.</p>
+              <p>Si vous manquez d'inspiration, regardez un peu alentours les avatars que les autres ont choisi, ca peut aider.</p>
+            </div>
+            <div class="alert alert-secondary clearfix">
+              <img src="images/chat-install.png" alt="trouver la liste des canaux" class="float-left mr-5">
+              <p>Si vous vous plaisez dans cet espace, vous voudrez peut-être <a href="https://rocket.chat/install">installer l'application RocketChat</a>, sur votre ordi ou sur mobile.</p>
+              <p>Sur mobile, au moment de la connexion, il suffira d'utiliser l'adresse de serveur <tt>https://coa.crapaud-fou.org</tt> et les identifiants que vous avez crées lors de l'ouverture de votre compte.</p>
+            </div>
+            <div class="alert alert-light clearfix technique text-monospace">
+              <h5>Note technique</h5>
+              <p>L'espace de discussion utilise le logiciel libre <a href="https://rocket.chat/">RocketChat</a>. A noter que les mises à jour sont automatiques (par le biais de snap), donc nous utilisons toujours la dernière version.</p>
+              <p>Le serveur qui héberge le chat des crapauds fous est situé dans le datacenter parisien de <a href="https://scaleway.com">Scaleway</a>, et c'est mose qui paye avec ses sous perso. 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-primary">Save changes</button>
+            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
+            <a href="https://coa.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://coa.crapaud.fou-org</b></a>
           </div>
         </div>
       </div>