Guide riot

16 files changed, 131 insertions, 84 deletions

diff --git a/src/@jitsi.pug b/src/@jitsi.pug
index 55ceac1..c0d3b3f 100644
--- a/src/@jitsi.pug
+++ b/src/@jitsi.pug
@@ -5,84 +5,6 @@ prepend root
 
 
 block content
-  .spacing
-    h2 Rejoindre une réunion
-    .spacing
-      p Veuillez entrer le nom de la réunion que vous souhaitez rejoindre :
-      input#joinname(type="text", placeholder="Nom de la réunion")
-      a.button#joinbtn(href="#") rejoindre
-      p
-        | Le lien d'accès rapide à cette conférence est
-        |
-        a#joinlink
-
-
-
-  .spacing2 
-    h2 Guide de préparation d'une réunion
-
-    h3.spacing Étape 1 : Choisissez un nom de réunion (par exemple : "karaté-lyon")
-    h3 Étape 2 : Informez vos participants de la date de votre réunion et du nom de la réunion
-    h3 
-      | Étape 3 : Au moment voulu, pour rejoindre la conversation, les participants devront se rendre sur le site 
-      | 
-      a(href="https://deuxfleurs.fr") deuxfleurs.fr
-    h3 Étape 4 : Puis, une fois sur la page d'accueil, cliquer sur le bouton "📞 visioconférence" (pour arriver sur cette page)
-    h3 Étape 5 : Enfin, les participants doivent entrer le nom de la réunion (par exemple : "karaté-lyon") et cliquer sur "rejoindre"
-    h3 Étape 6 : La conférence commence
-    p Si vous êtes sur téléphone ou tablette, vous devrez cliquez sur "Download the app" pour installer l'app "Jitsi Meet" la première fois et les fois suivantes sur "Continue to the app" avant de pouvoir commencer la conférence.
-    p Si vous êtes sur un ordinateur et que vous utilisez Mozilla Firefox, vous allez rencontrer un message d'erreur comme quoi votre navigateur n'est pas encore supporté.<br/>En attendant, vous pouvez installer <a href="https://brave.com/">Brave</a> ou <a href="https://www.google.com/intl/fr_fr/chrome/">Google Chrome</a> (nous déplorons cette situation, <a href="https://www.nextinpact.com/brief/videoconferences---firefox-et-jitsi-travaillent-a-un-meilleur-support-11906.htm">explications</a>).
-
-  .spacing2
-    h2 Conseils pour réussir votre réunion
-
-    h3.spacing Bien se préparer
-    p Vous pouvez rejoindre une réunion n'importe quand. Vous pouvez donc tester les étapes du "guide de préparation" en avance !
-
-    h3.spacing Bien s'entendre pendant la réunion
-
-    p "Tu m'entends ? Non pas très bien ! Qu'est ce que tu viens de dire ?" : quelques conseils pour bien s'entendre pour éviter ça et passer un bon moment.
-
-    p
-      strong Améliorez le son :
-      |
-      | l'idéal est d'avoir un casque avec microphone ou des écouteurs avec microphone pour capter le son au plus près de votre bouche et empêcher l'écho (que votre microphone capte ce qui sort sur les hauts parleurs). Si vous n'avez pas de casques ou d'écouteurs ou que vous êtes plusieurs, les ordinateurs portables récents captent mieux le son que les anciens, et généralement votre téléphone captera mieux le son que votre ordinateur. De plus, si vous êtes plusieurs, vous devez savoir que les microphones sont directifs : si vous êtes proches et bien en face de l'ordinateur, on vous entendra bien, sinon on ne vous entendra pas du tout ! En groupe, tournez l'ordinateur vers la personne qui parle ou mettez-vous bien en face pour parler !
-
-    p 
-      strong Améliorez votre connexion :
-      |
-      | la visioconférence est très sensible à la qualité de votre connexion internet. Si vous le pouvez, connectez votre ordinateur en filaire (cable ethernet) à votre <em>box</em> (routeur internet). Si vous souhaitez rester en sans-fil (wifi), essayez de vous rapprocher de votre <em>box</em>. Le type de connexion internet influencera également la qualité de votre visioconférence : la fibre est idéale, l'ADSL ou les réseaux mobiles (4G et 3G) sont plus incertains. 
-
-    p
-      strong Réduisez vos usages :
-      |
-      | Activer la vidéo peut causer des interruptions ou dégrader la qualité du son. Si vous n'avez pas besoin de la vidéo, désactivez là ou garder là seulement pour certains participants. Si vous ne parlez pas, vous pouvez également couper votre microphone. Il est possible de passer en mode "talkie walkie" sur ordinateur avec la touche espace. Vous maintenez la touche espace, votre micro est activé. Vous arrêtez d'appuyer sur la touche espace, votre micro est coupé.
-
-    p Si vous appliquez ces conseils, vous devriez arriver à communiquer sans peine. Bonnes communications !
-
-  script.
-    (_ => {
-      const base_url = 'https://jitsi.deuxfleurs.fr/'
-      const get_meeting_id = raw => raw.replace( /[^a-zA-Z0-9]/gi, '')
-      const get_meeting_url = raw => base_url + get_meeting_id(raw)
-      const joinbtn = document.getElementById('joinbtn')
-      const joinname = document.getElementById('joinname')
-      const joinlink = document.getElementById('joinlink')
-
-      window.addEventListener('pageshow', e => {
-        joinbtn.text = "rejoindre"
-      })
-      
-      joinbtn.onclick = _ => {
-        const meetingid = joinname.value
-        if (!meetingid) return // meetingid is empty
-        window.location.href = get_meeting_url(meetingid)
-        joinbtn.text = "chargement..."
-      }
-
-      joinname.addEventListener('input', v => {
-        const l = v.target.value ? get_meeting_url(v.target.value) : ""
-        joinlink.textContent = l
-        joinlink.href = l
-      })
-    })()
+  h4.spacing 
+    | Cette page a changé d'adresse : 
+    a(href="/Guide/Discussion.html") cliquez ici pour être redirigé
diff --git a/src/Guide/Assets/riot_connect1.png b/src/Guide/Assets/riot_connect1.png
new file mode 100644
index 0000000..1a966ea
--- /dev/null
+++ b/src/Guide/Assets/riot_connect1.png
diff --git a/src/Guide/Assets/riot_connect2.png b/src/Guide/Assets/riot_connect2.png
new file mode 100644
index 0000000..496821b
--- /dev/null
+++ b/src/Guide/Assets/riot_connect2.png
diff --git a/src/Guide/Assets/riot_connect25.png b/src/Guide/Assets/riot_connect25.png
new file mode 100644
index 0000000..94d3e7d
--- /dev/null
+++ b/src/Guide/Assets/riot_connect25.png
diff --git a/src/Guide/Assets/riot_connect3.png b/src/Guide/Assets/riot_connect3.png
new file mode 100644
index 0000000..eebea5f
--- /dev/null
+++ b/src/Guide/Assets/riot_connect3.png
diff --git a/src/Guide/Assets/riot_connect4.png b/src/Guide/Assets/riot_connect4.png
new file mode 100644
index 0000000..3ce4e37
--- /dev/null
+++ b/src/Guide/Assets/riot_connect4.png
diff --git a/src/Guide/Assets/riot_connect5.png b/src/Guide/Assets/riot_connect5.png
new file mode 100644
index 0000000..5ce15e6
--- /dev/null
+++ b/src/Guide/Assets/riot_connect5.png
diff --git a/src/Guide/Assets/riot_install1.png b/src/Guide/Assets/riot_install1.png
new file mode 100644
index 0000000..10e9a17
--- /dev/null
+++ b/src/Guide/Assets/riot_install1.png
diff --git a/src/Guide/Assets/riot_install2.png b/src/Guide/Assets/riot_install2.png
new file mode 100644
index 0000000..1e78185
--- /dev/null
+++ b/src/Guide/Assets/riot_install2.png
diff --git a/src/Guide/Assets/riot_install3.png b/src/Guide/Assets/riot_install3.png
new file mode 100644
index 0000000..a805c1a
--- /dev/null
+++ b/src/Guide/Assets/riot_install3.png
diff --git a/src/Guide/Assets/riot_install4.png b/src/Guide/Assets/riot_install4.png
new file mode 100644
index 0000000..d8c533d
--- /dev/null
+++ b/src/Guide/Assets/riot_install4.png
diff --git a/src/Guide/Assets/riot_install5.png b/src/Guide/Assets/riot_install5.png
new file mode 100644
index 0000000..de54ba4
--- /dev/null
+++ b/src/Guide/Assets/riot_install5.png
diff --git a/src/Guide/Discussion.pug b/src/Guide/Discussion.pug
new file mode 100644
index 0000000..c9ed7d7
--- /dev/null
+++ b/src/Guide/Discussion.pug
@@ -0,0 +1,37 @@
+extends ../_layout.pug
+
+prepend root
+  - title = "Discussions"
+
+
+block content
+  .spacing
+    h2 Accès rapides
+    
+    .list
+      a.service-box.spacing(href='https://riot.deuxfleurs.fr')
+        div(style='font-size: 80px; height: 120px') 🌐
+        h3 Accéder via le navigateur
+      a.service-box.spacing(href='https://play.google.com/store/apps/details?id=im.vector.app&hl=fr')
+        div(style='font-size: 80px; height: 120px') 📥
+        h3 Application Android
+      a.service-box.spacing(href='https://apps.apple.com/fr/app/riot-im/id1083446067')
+        div(style='font-size: 80px; height: 120px') 📥
+        h3 Application iOS
+      br
+
+    h2.spacing Premiers pas sur Android
+    
+    .screenlist
+      img(src="Assets/riot_install4.png", height="400")
+      img(src="Assets/riot_install5.png", height="400")
+      img(src="Assets/riot_connect2.png", height="400")
+      img(src="Assets/riot_connect25.png", height="400")
+      img(src="Assets/riot_connect3.png", height="400")
+      img(src="Assets/riot_connect4.png", height="400")
+      img(src="Assets/riot_connect5.png", height="400")
+  
+    style.
+      .screenlist > img {
+        padding: 20px;
+      }
diff --git a/src/Guide/Visioconférence.pug b/src/Guide/Visioconférence.pug
new file mode 100644
index 0000000..8677b7e
--- /dev/null
+++ b/src/Guide/Visioconférence.pug
@@ -0,0 +1,88 @@
+extends ../_layout.pug
+
+prepend root
+  - title = "Visioconférence"
+
+
+block content
+  .spacing
+    h2 Rejoindre une réunion
+    .spacing
+      p Veuillez entrer le nom de la réunion que vous souhaitez rejoindre :
+      input#joinname(type="text", placeholder="Nom de la réunion")
+      a.button#joinbtn(href="#") rejoindre
+      p
+        | Le lien d'accès rapide à cette conférence est
+        |
+        a#joinlink
+
+
+
+  .spacing2 
+    h2 Guide de préparation d'une réunion
+
+    h3.spacing Étape 1 : Choisissez un nom de réunion (par exemple : "karaté-lyon")
+    h3 Étape 2 : Informez vos participants de la date de votre réunion et du nom de la réunion
+    h3 
+      | Étape 3 : Au moment voulu, pour rejoindre la conversation, les participants devront se rendre sur le site 
+      | 
+      a(href="https://deuxfleurs.fr") deuxfleurs.fr
+    h3 Étape 4 : Puis, une fois sur la page d'accueil, cliquer sur le bouton "📞 visioconférence" (pour arriver sur cette page)
+    h3 Étape 5 : Enfin, les participants doivent entrer le nom de la réunion (par exemple : "karaté-lyon") et cliquer sur "rejoindre"
+    h3 Étape 6 : La conférence commence
+    p Si vous êtes sur téléphone ou tablette, vous devrez cliquez sur "Download the app" pour installer l'app "Jitsi Meet" la première fois et les fois suivantes sur "Continue to the app" avant de pouvoir commencer la conférence.
+    p Si vous êtes sur un ordinateur et que vous utilisez Mozilla Firefox, vous allez rencontrer un message d'erreur comme quoi votre navigateur n'est pas encore supporté.<br/>En attendant, vous pouvez installer <a href="https://brave.com/">Brave</a> ou <a href="https://www.google.com/intl/fr_fr/chrome/">Google Chrome</a> (nous déplorons cette situation, <a href="https://www.nextinpact.com/brief/videoconferences---firefox-et-jitsi-travaillent-a-un-meilleur-support-11906.htm">explications</a>).
+
+  .spacing2
+    h2 Conseils pour réussir votre réunion
+
+    h3.spacing Bien se préparer
+    p Vous pouvez rejoindre une réunion n'importe quand. Vous pouvez donc tester les étapes du "guide de préparation" en avance !
+
+    h3.spacing Bien s'entendre pendant la réunion
+
+    p "Tu m'entends ? Non pas très bien ! Qu'est ce que tu viens de dire ?" : quelques conseils pour bien s'entendre pour éviter ça et passer un bon moment.
+
+    p
+      strong Améliorez le son :
+      |
+      | l'idéal est d'avoir un casque avec microphone ou des écouteurs avec microphone pour capter le son au plus près de votre bouche et empêcher l'écho (que votre microphone capte ce qui sort sur les hauts parleurs). Si vous n'avez pas de casques ou d'écouteurs ou que vous êtes plusieurs, les ordinateurs portables récents captent mieux le son que les anciens, et généralement votre téléphone captera mieux le son que votre ordinateur. De plus, si vous êtes plusieurs, vous devez savoir que les microphones sont directifs : si vous êtes proches et bien en face de l'ordinateur, on vous entendra bien, sinon on ne vous entendra pas du tout ! En groupe, tournez l'ordinateur vers la personne qui parle ou mettez-vous bien en face pour parler !
+
+    p 
+      strong Améliorez votre connexion :
+      |
+      | la visioconférence est très sensible à la qualité de votre connexion internet. Si vous le pouvez, connectez votre ordinateur en filaire (cable ethernet) à votre <em>box</em> (routeur internet). Si vous souhaitez rester en sans-fil (wifi), essayez de vous rapprocher de votre <em>box</em>. Le type de connexion internet influencera également la qualité de votre visioconférence : la fibre est idéale, l'ADSL ou les réseaux mobiles (4G et 3G) sont plus incertains. 
+
+    p
+      strong Réduisez vos usages :
+      |
+      | Activer la vidéo peut causer des interruptions ou dégrader la qualité du son. Si vous n'avez pas besoin de la vidéo, désactivez là ou garder là seulement pour certains participants. Si vous ne parlez pas, vous pouvez également couper votre microphone. Il est possible de passer en mode "talkie walkie" sur ordinateur avec la touche espace. Vous maintenez la touche espace, votre micro est activé. Vous arrêtez d'appuyer sur la touche espace, votre micro est coupé.
+
+    p Si vous appliquez ces conseils, vous devriez arriver à communiquer sans peine. Bonnes communications !
+
+  script.
+    (_ => {
+      const base_url = 'https://jitsi.deuxfleurs.fr/'
+      const get_meeting_id = raw => raw.replace( /[^a-zA-Z0-9]/gi, '')
+      const get_meeting_url = raw => base_url + get_meeting_id(raw)
+      const joinbtn = document.getElementById('joinbtn')
+      const joinname = document.getElementById('joinname')
+      const joinlink = document.getElementById('joinlink')
+
+      window.addEventListener('pageshow', e => {
+        joinbtn.text = "rejoindre"
+      })
+      
+      joinbtn.onclick = _ => {
+        const meetingid = joinname.value
+        if (!meetingid) return // meetingid is empty
+        window.location.href = get_meeting_url(meetingid)
+        joinbtn.text = "chargement..."
+      }
+
+      joinname.addEventListener('input', v => {
+        const l = v.target.value ? get_meeting_url(v.target.value) : ""
+        joinlink.textContent = l
+        joinlink.href = l
+      })
+    })()
diff --git a/src/css/main.css b/src/css/main.css
index 048075b..f2cbe75 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -107,7 +107,7 @@ header > .container > .menu-item > a, header > .container > .menu-item > span {
 }
 
 .list > br {
-  clear: both;
+  clear: left;
 }
 
 .center {
diff --git a/src/index.pug b/src/index.pug
index 2f3ac50..9fcc679 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -13,10 +13,10 @@ block content
   section.spacing
     h2 nos services éthiques
     .list
-      a.service-box.spacing(href='https://riot.deuxfleurs.fr')
+      a.service-box.spacing(href='/Guide/Discussion.html')
         div(style='font-size: 80px; height: 120px') 💬
         h3 discussions
-      a.service-box.spacing(href='/@jitsi.html')
+      a.service-box.spacing(href='/Guide/Visioconférence.html')
         div(style='font-size: 80px; height: 120px') 📞
         h3 visioconférence
       a.service-box.spacing(href='https://cloud.deuxfleurs.fr')