Rework visioconf

src/Guide/Visioconférence.pug

@@ -4,36 +4,26 @@ prepend root
   - title = "Visioconférence"
 
 
+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
+    h2 Visioconférence
 
+    section
+      a.service-box.left(href='https://jitsi.deuxfleurs.fr')
+        div(style='font-size: 80px; height: 120px') 🌐
+        h5 Accéder via le navigateur
+      a.service-box.left(href='https://play.google.com/store/apps/details?id=org.jitsi.meet&hl=fr')
+        div(style='font-size: 80px; height: 120px') 📥
+        h5 Application Android
+      a.service-box.left(href='https://apps.apple.com/fr/app/jitsi-meet/id1165103905')
+        div(style='font-size: 80px; height: 120px') 📥
+        h5 Application iOS
 
-
-  .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
@@ -60,29 +50,3 @@ block content
 
     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
-      })
-    })()