v3.0.0-alpha2

TODO: - auto-save/resume - pub offline - ergonomie options - doc / guide interactif

v3.0.0-alpha2
e4e74d92 · Millicent Billette · fdf98ffa · e4e74d92 · e4e74d92 · e4e74d92
Commit e4e74d92 authored 2 years ago by Millicent Billette
--- a/README.md
+++ b/README.md
@@ -26,165 +26,7 @@ Bref, en attendant mieux, pour soutenir mes implications dans la Ǧ1 mon compte
 ## Guide d'utilisation
-Merci à [Matograine](https://forum.monnaie-libre.fr/t/tutoriel-utiliser-gsper/13816) pour cette [vidéo tutoriel d'utilisation de Gsper](https://tube.p2p.legal/videos/watch/3c780a43-d70f-4d7c-a2ab-5882592016d9)
+Dans le dossier [docs/](docs/) se trouve :
+- [Le guide d'utilisation détaillant toutes les syntaxes reconnue pour générer des variantes](docs/doc.fr.md)
-En bref :
+- [Le guide indiquant les bonnes pratiques de sécurité](docs/secu.fr.md)
+- [Et quelques exemples](docs/exemples.fr.md)
-1. Indiquer la clef publique de votre compte (si vous ne la connaissez pas, chercher votre profil sur [cesium](https://cesium.ǧ1.money/#/app/wot/lg) via la fonction recherche de l'annuaire)
-2. Indiquer les variantes d'identifiant secret que vous souhaitez tester. (Il est possible de générer plus de variantes automatiquement. [La documentation](#Documentation) ci dessous explique comment.)
-3. Indiquer les variantes de mot de passe que vous souhaitez tester.
-4. Cliquer sur le bouton `Gsper !` pour lancer la tentative de récupération des accès au compte.
-5. Patienter jusqu'à l'apparition du message de fin de recherche (avec ou sans succès).
-[Exemples d'utilisation pas à pas](exemples.md)
-## Documentation
-Gsper met à votre disposition plusieurs boutons pour générer des variantes à tester à partir de celles que vous avez indiqué.
-Voici comment les utiliser.
-### Bouton `MaJusculeS`
-Génère des variantes des combinaisons à tester :
- entièrement en majuscule
- entièrement en minuscule
- avec le premier caractère en majuscule uniquement
- tel quel, sans modifier les majuscule et minuscule
-**Exemple :**
-```
-moT
-```
-sera remplacé par :
-```
-mot
-MOT
-Mot
-moT
-```
-### Bouton `désaccentué`
-Génère la variante désaccentué des combinaisons à tester.
-**Exemple :**
-```
-Gavé de Ǧ1
-```
-sera remplacé par :
-```
-Gavé de Ǧ1
-Gave de G1
-```
-### Bouton `<({[Avancé]})>`
-Génère des variantes avancées selon un syntaxe spécifique.
-<!-- **/!\ Attention /!\\** Générer un trop grand nombre de combinaison à tester peut faire planter le navigateur, et mettre des année à tester de toute façon. -->
-Détail de la syntaxe :
-###### `<référence>` remplace `<référence>` par les lignes commançant par `référence::`
-**Exemple :**
-```
-mot&lt;space&gt;de&lt;space&gt;passe
-space::-
-space::_
-```
-sera remplacé par :
-```
-mot-de-passe
-mot-de_passe
-mot_de-passe
-mot_de_passe
-```
-###### `=référence>` remplace de façon syncroniser pluiseurs `=référence>` par la meme variante des lignes référencées par `référence::`
-**Exemple :**
-```
-mot=space&gt;de=space&gt;passe
-space::-
-space::_
-```
-sera remplacé par :
-```
-mot-de-passe
-mot_de_passe
-```
-###### `(variante|autre variante)` décline les séquences listées comme des combinaisons différentes.
-**Exemple :**
-```
-(mot|phrase) de passe
-```
-sera remplacé par :
-```
-mot de passe
-phrase de passe
-```
-###### `[a-z§¤]` décline les caractères listés comme des combinaisons différentes.
-**Exemple :**
-```
-J'ai oublié la suite[!.]
-```
-sera remplacé par :
-```
-J'ai oublié la suite!
-J'ai oublié la suite.
-```
-**Exemple :**
-```
-Spam [0-3]
-```
-sera remplacé par :
-```
-Spam 0
-Spam 1
-Spam 2
-Spam 3
-```
-###### `A{0,2}` décline l'élément précédent selon les quantités définies.
-**Exemple :**
-```
-c'est (mat|tic){0,3}
-```
-sera remplacé par :
-```
-c'est
-c'est mat
-c'est matmat
-c'est matmatmat
-c'est matmattic
-c'est mattic
-c'est matticmat
-c'est mattictic
-c'est tic
-c'est ticmat
-c'est ticmatmat
-c'est ticmattic
-c'est tictic
-c'est ticticmat
-c'est tictictic
-```
-###### `\ ` permet de banaliser le caractère suivant
-**Exemple :**
-```
-un (am\||\|nconu)
-```
-sera remplacé par :
-```
-un am|
-un |nconu
-```
-**Contre exemple :**
-```
-un (am|||nconu)
-```
-sera remplacé par :
-```
-un am
-un
-un
-un nconu
-```
--- a/docs/doc.fr.md
+++ b/docs/doc.fr.md
+## Guide d'utilisation
+En bref :
+1. Indiquer la clef publique de votre compte (si vous ne la connaissez pas, chercher votre profil sur [cesium](https://cesium.ǧ1.money/#/app/wot/lg) via la fonction recherche de l'annuaire)
+2. Indiquer les variantes d'identifiant secret que vous souhaitez tester. (Il est possible de générer plus de variantes automatiquement. [La documentation](#Documentation) ci dessous explique comment.)
+3. Indiquer les variantes de mot de passe que vous souhaitez tester.
+4. Cliquer sur le bouton `Gsper !` pour lancer la tentative de récupération des accès au compte.
+5. Patienter jusqu'à l'apparition du message de fin de recherche (avec ou sans succès).
+[Exemples d'utilisation pas à pas](exemples.fr.md)
+## Documentation
+Gsper met à votre disposition plusieurs boutons pour générer des variantes à tester à partir de celles que vous avez indiqué.
+Voici comment les utiliser.
+### Bouton `MaJusculeS`
+Génère des variantes des combinaisons à tester :
+- entièrement en majuscule
+- entièrement en minuscule
+- avec le premier caractère en majuscule uniquement
+- tel quel, sans modifier les majuscule et minuscule
+**Exemple :**
+```
+moT
+```
+sera remplacé par :
+```
+mot
+MOT
+Mot
+moT
+```
+### Bouton `désaccentué`
+Génère la variante désaccentué des combinaisons à tester.
+**Exemple :**
+```
+Gavé de Ǧ1
+```
+sera remplacé par :
+```
+Gavé de Ǧ1
+Gave de G1
+```
+### Bouton `<({[Avancé]})>`
+Génère des variantes avancées selon un syntaxe spécifique.
+<!-- **/!\ Attention /!\\** Générer un trop grand nombre de combinaison à tester peut faire planter le navigateur, et mettre des année à tester de toute façon. -->
+Détail de la syntaxe :
+###### `<référence>` remplace `<référence>` par les lignes commançant par `référence::`
+**Exemple :**
+```
+mot&lt;space&gt;de&lt;space&gt;passe
+space::-
+space::_
+```
+sera remplacé par :
+```
+mot-de-passe
+mot-de_passe
+mot_de-passe
+mot_de_passe
+```
+###### `=référence>` remplace de façon syncroniser pluiseurs `=référence>` par la meme variante des lignes référencées par `référence::`
+**Exemple :**
+```
+mot=space&gt;de=space&gt;passe
+space::-
+space::_
+```
+sera remplacé par :
+```
+mot-de-passe
+mot_de_passe
+```
+###### `(variante|autre variante)` décline les séquences listées comme des combinaisons différentes.
+**Exemple :**
+```
+(mot|phrase) de passe
+```
+sera remplacé par :
+```
+mot de passe
+phrase de passe
+```
+###### `[a-z§¤]` décline les caractères listés comme des combinaisons différentes.
+**Exemple :**
+```
+J'ai oublié la suite[!.]
+```
+sera remplacé par :
+```
+J'ai oublié la suite!
+J'ai oublié la suite.
+```
+**Exemple :**
+```
+Spam [0-3]
+```
+sera remplacé par :
+```
+Spam 0
+Spam 1
+Spam 2
+Spam 3
+```
+###### `A{0,2}` décline l'élément précédent selon les quantités définies.
+**Exemple :**
+```
+c'est (mat|tic){0,3}
+```
+sera remplacé par :
+```
+c'est
+c'est mat
+c'est matmat
+c'est matmatmat
+c'est matmattic
+c'est mattic
+c'est matticmat
+c'est mattictic
+c'est tic
+c'est ticmat
+c'est ticmatmat
+c'est ticmattic
+c'est tictic
+c'est ticticmat
+c'est tictictic
+```
+###### `\ ` permet de banaliser le caractère suivant
+**Exemple :**
+```
+un (am\||\|nconu)
+```
+sera remplacé par :
+```
+un am|
+un |nconu
+```
+**Contre exemple :**
+```
+un (am|||nconu)
+```
+sera remplacé par :
+```
+un am
+un
+un
+un nconu
+```
--- a/exemples.md
+++ b/exemples.md
--- a/docs/secu.fr.md
+++ b/docs/secu.fr.md
+Les informations que vous êtes amené à saisir dans cette page (mots de passes) sont très sensibles
+et s'afficherons en clair sur votre écran.
+Dans de mauvaises mains, elles pourraient donner accès à toute votre vie numérique
+et de là impacter le reste de votre vie et celle de vos proches.
+Si cette version de Ǧsper à une faille, c'est fait piratée, ou que son auteur manque d'intégrité, ce sont les bonnes pratiques de sécurité qui vous éviteront de mauvaises surprises.
+### Recommandation de sécurité :
+- Idéalement, téléchargez [Ǧsper-offline](gsper-offline.zip) pour l'utiliser hors ligne, depuis une clef usb [live-linux](https://tails.boum.org/).
+- **Si vous avez besoin d'assistance pour utiliser Ǧsper :**
+  -   ne transmettez JAMAIS vos secrets en ligne
+  -   expliquez votre problème sans donner d'exemple trop proche de votre cas.
+  -   si quelqu'un viens vous aidez, assurez-vous qu'il s'agisse de quelqu'un de confiance, que vous connaissez personnellement de longue date et/ou recommandé par plusieurs de vos proches.
+1. Installez-vous au calme, seul·e dans une pièce sans caméra pouvant scruter l'écran.
+2. Chargez Ǧsper.
+3. Indiquez votre clef publique.
+4. Arrivé sur cet écran, avant de saisir la moindre information sensible :
+5. Coupez tout accès à internet que Ǧsper pourrait utiliser. (coupez wifi, donnée mobile, débranchez le cable réseau...)
+6. Ne remettez pas internet avant d'avoir fini et éteint l'appareil.
+7. Saisissez les potentiels secrets à tester.
+8. Exécutez la recherche.
+9. Si besoin, modifiez et re-testez.
+10. Quand vous avez fini, éteignez l'appareil.
+11. Après rallumage, vous pouvez remettre internet.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
    "clean": "rm -rf generated*",
    "build": "run-s build:**",
    "build:gen:public": "mkdirp generated/public",
+    "build:gen:docs": "mkdirp generated/tmp",
    "build:fill:assets": "cp -rf src/assets/* generated/public/",
    "build:vendors:font-awesome": "cp -rf node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff* generated/public/font/",
+    "build:md": "remark docs/ -o generated/tmp/ --use remark-parse --use remark-rehype --use rehype-stringify",
    "build:ejs": "ejs-cli --base-dir src/pages/ *.*.ejs --out generated/public/",
    "build:rollup:main": "rollup src/js/main.mjs --file generated/public/main.js --format iife -p node-resolve",
    "build:rollup:worker": "rollup src/js/worker.mjs --file generated/public/worker.js --format iife -p node-resolve",
@@ -24,6 +26,10 @@
    "mkdirp": "^1.0.4",
    "npm-run-all": "^4.1.5",
    "pretty-ms": "https://github.com/1000i100/pretty-ms#main",
+    "rehype-stringify": "^9.0.3",
+    "remark-cli": "^11.0.0",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
    "rollup": "^3.3.0",
    "stylus": "^0.59.0"
  }

--- a/src/js/ux/2_inputSecrets.mjs
+++ b/src/js/ux/2_inputSecrets.mjs
@@ -17,6 +17,8 @@ export function init() {
  subscribe('smartPreview', updateSmartPreviewDisplay);
  subscribeToBenchResult(askPreview);
  askPreview();
+  window.secuTips = {};
+  setInterval(secuCheck,200);
 }
 export default function focus_2_inputSecrets(){
  const toFocus = document.querySelector('#secrets');
@@ -25,6 +27,14 @@ export default function focus_2_inputSecrets(){
 let lastData = '';
 init();
+function secuCheck() {
+  const tips = Object.keys(window.secuTips).length;
+  const elem = document.getElementById('secuTips');
+  if(tips){
+    elem.innerHTML = `${tips}`;
+    elem.classList.remove('hidden');
+  } else elem.classList.add('hidden');
+}
 function askPreview() {
  const actualData = getActualData();

--- a/src/pages/fragments/browse.ejs
+++ b/src/pages/fragments/browse.ejs
@@ -20,17 +20,21 @@
    text-align: right;
    border: 0;
  }
+  .browse table {
+    max-width: 45vw;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+  .browse thead tr th:nth-child(1){
+    width: 50px;
+  }
  .browse thead tr th:nth-child(2){
    width: 5em;
  }
  .browse thead tr th:nth-child(3),
  .browse thead tr th:nth-child(4){
-    width: 40%;
+    width: 12em;
-  }
-  .browse table {
-    width: 100%;
-    border-collapse: collapse;
  }
  .browse table thead {
@@ -60,6 +64,10 @@
  .browse .idSec, .browse .pwd {
    font-family: monospace;
  }
+  .browse .idSec div, .browse .pwd div {
+    overflow-x: auto;
+    white-space: nowrap;
+  }
  .browse .idSec span, .browse .pwd span{
    display: inline-block;
    width: .8em;
@@ -120,7 +128,7 @@
    return {idSec,pwd};
  }
  function spanEachChar(str){
-    return `<span>${str.split('').map(chr=>chr===' '?'&nbsp;':chr).join('</span><span>')}</span>`
+    return `<div><span>${str.split('').map(chr=>chr===' '?'&nbsp;':chr).join('</span><span>')}</span></div>`
  }
  function browseUp(){
    window.browseIndex--;

--- a/src/pages/fragments/header.ejs
+++ b/src/pages/fragments/header.ejs
@@ -16,7 +16,7 @@
        </p>
    </div>
    <% } _%>
-    <nav><a href="<%=srcUrl%>#guide-dutilisation"><i class="fas fa-book">&nbsp;</i>Guide et documentation</a>
+    <nav><a href="https://git.duniter.org/tools/gsper/-/issues" target="_blank" title="ou rapporter un bug"><i class="fas fa-bug">&nbsp;</i>Proposer une évolution</a>
        <div></div><a href="javascript:giftPopup()"><i class="fas fa-heart">&nbsp;</i>Faire un don</a>
    </nav>
 </header>

--- a/src/pages/fragments/warningOnline.ejs
+++ b/src/pages/fragments/warningOnline.ejs
@@ -3,11 +3,6 @@
        Attention, votre connexion internet est active.<br/>
        Déconnectez-vous avant de continuer.
    </p>
-    <p>
-        Si cette version de Ǧsper à une faille, c'est fait piratée,
-        ou que son auteur manque d'intégrité, ce sont les bonnes pratiques de sécurité
-        qui vous sauveront. Elles sont listées dans l'entête de cette page.
-    </p>
 </div>
 <script>
    /**
@@ -17,6 +12,8 @@
    function offlineCheck(){
      if(navigator.onLine) onlineWarningClasses.remove('hidden');
      else onlineWarningClasses.add('hidden');
+      if(navigator.onLine) window.secuTips.online = true;
+      else delete window.secuTips.online;
    }
    setInterval(offlineCheck,200);
 </script>
--- a/src/pages/fragments/warningUseTor.ejs
+++ b/src/pages/fragments/warningUseTor.ejs
@@ -8,9 +8,6 @@
        par le navigateur et transmis plus tard.
        Pour vous en prémunir, utilisez <a href="https://www.torproject.org/download/">Tor Browser</a> ou un Live-CD
        et éteignez l'ordinateur dès que vous avez fini d'utiliser Ǧsper.
-    </p><p>
-        Ce sont les bonnes pratiques de sécurité qui vous éviteront les mauvaises surprises.
-        Elles sont listées dans l'entête de cette page.
    </p>
 </div>
 <script>
@@ -23,5 +20,8 @@
            window.screen.width === window.innerWidth &&
            window.screen.height === window.innerHeight;
    }
-    if(!looksLikeTorBrowser()) document.getElementById('torWarning').classList.remove('hidden');
+    if(!looksLikeTorBrowser()) {
+      document.getElementById('torWarning').classList.remove('hidden');
+      delete window.secuTips.tor;
+    } else window.secuTips.tor = true;
 </script>
--- a/src/pages/steps/2_inputSecrets.ejs
+++ b/src/pages/steps/2_inputSecrets.ejs
-<%- include('../fragments/header.ejs',{step:2,text:`
+<%- include('../fragments/header.ejs',{step:2}); %>
-Les informations que vous êtes amené à saisir dans cette page (mots de passes) sont très sensible
-et s'afficherons en clair sur votre écran.
-Dans de mauvaises mains, elles pourraient donner accès à toute votre vie numérique
-et de là impacter le reste de votre vie et celle de vos proches.
-<h3>Recommandation de sécurité :</h3>
-<ul>
-<li>Idéalement, téléchargez <a href="gsper-offline.zip">Ǧsper-offline</a> pour l'utiliser hors ligne, depuis un live-cd.
-<li>Sinon privilégiez <a href="https://www.torproject.org/download/">Tor Browser</a> pour accéder à
-<a href="./">Ǧsper</a>.
-<li><strong>Si vous avez besoin d'assistance pour utiliser Ǧsper :</strong>
-<ul>
-<li>ne transmettez JAMAIS vos secrets en ligne
-<li>expliquez votre problème sans donner d'exemple trop proche de votre cas.
-<li>si quelqu'un viens vous aidez, assurez-vous qu'il s'agisse de quelqu'un de confiance,
-que vous connaissez personnellement de longue date et/ou recommandé par plusieurs de vos proches.
-</ul>
-</ul>
-<ol>
-<li>Installez-vous au calme, seul·e dans un pièce sans caméra pouvant scruter l'écran.
-<li>Chargez Ǧsper.
-<li>Indiquez votre clef publique.
-<li>Arrivé sur cette écran, avant de saisir la moindre information sensible :
-<li>Coupez tout accès à internet que Ǧsper pourrait utiliser.
-(coupez wifi, donnée mobile, débranchez le cable réseau...)
-<li>Ne remettez pas internet avant d'avoir fini et éteint l'appareil.
-<li>Saisissez les potentiels secrets à tester.
-<li>Générez les variantes souhaité.
-<li>Executez la recherche.
-<li>Si besoin, modifiez et re-testez.
-<li>Quand vous avez fini, eteignez l'appareil.
-<li>Après rallumage, vous pouvez remettre internet.
-</ol>
-`}); %>
 <section id="testkey" class="step_2_inputSecrets">
-    <%- include('../fragments/warningUseTor.ejs'); %>
-    <%- include('../fragments/warningOnline.ejs'); %>
    <h2>Listez ce que vous avez pu utiliser comme secret d'accès à votre compte :</h2>
    <p>(identifiants secrets et mots de passe à tester)</p>
@@ -87,135 +49,19 @@ le 3ème
        <%- include('../fragments/browse.ejs'); %>
        </div>
        <div class="tabs">
-            <div class="tab_button">
+            <div class="tab">
-                <div class="active_tab majuscules_btn">MaJusculeS</div>
+                <input type="radio" name="tab" id="tabSecu" value="tabSecu"/>
-                <div class="desaccentuer_btn">Désaccentuer</div>
+                <label for="tabSecu" class="tab_header"><i class="fas fa-lock"></i> Sécurité <span id="secuTips"></span></label>
-                <div class="advanced_btn">&lt;({[Avancé]})&gt;</div>
+                <div class="tab_content">
-            </div>
+                    <%- include('../fragments/warningOnline.ejs'); %>
-            <div class="desc">
+                    <%- include('../../../generated/tmp/secu.fr.md'); %>
-                <!----- TAB MAJUSCULE-------->
-                <div class="majuscules">
-                    <p>Génère des variantes des combinaisons à tester :</p>
-                    <ul class="majuscules_details">
-                        <li>- entièrement en majuscule</li>
-                        <li>- entièrement en minuscule</li>
-                        <li>- avec le premier caractère en majuscule uniquement</li>
-                        <li>- tel quel, sans modifier les majuscule et minuscule</li>
-                    </ul>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">moT</p>
-                    <p>sera remplacé par :</p>
-                    <ul class="exemple">
-                        <li>mot</li>
-                        <li>MOT</li>
-                        <li>Mot</li>
-                        <li>moT</li>
-                    </ul>
                </div>
-                <!------  TAB DESACCENTUER------->
-                <div class="desaccentuer hidden">
-                    <p>Génère la variante désaccentué des combinaisons à tester.</p>
-                    <p><strong>Exemple :</strong></p>
-                    <ul class="exemple">
-                        <li>Gavé de Ǧ1</li>
-                    </ul>
-                    <p>sera remplacé par :</p>
-                    <ul class="exemple">
-                        <li>Gavé de Ǧ1</li>
-                        <li>Gavé de G1</li>
-                    </ul>
            </div>
+            <div class="tab">
-                <!-----TAB ADVANCED MOD------->
+                <input type="radio" name="tab" id="tabDoc" checked value="tabDoc"/>
-                <div class="advanced hidden">
+                <label for="tabDoc" class="tab_header"><i class="fas fa-book"></i> Aide</label>
-                    <p>Génère des variantes avancées selon une syntaxe spécifique.</p>
+                <div class="tab_content">
-                    <p>Détail de la syntaxe :</p>
+                    <%- include('../../../generated/tmp/doc.fr.md'); %>
-                    <p><span>&lt;référence&gt;</span> remplace <span>&lt;référence&gt;</span> par les lignes commançant par référence::</p>
-                    <p><strong>Exemple :</strong></p>
-                    <ul class="exemple">
-                        <li>mot&lt;space&gt;de&lt;space&gt;passe</li>
-                        <li>space::-</li>
-                        <li>space::_</li>
-                    </ul>
-                    <p>sera remplacé par :</p>
-                    <ul class="exemple">
-                        <li>mot-de-passe</li>
-                        <li>mot-de_passe</li>
-                        <li>mot_de-passe</li>
-                        <li>mot_de_passe</li>
-                    </ul>
-                    <p><span>=référence&gt;</span> remplace de façon syncroniser pluiseurs <span>=référence></span> par la meme variante des lignes référencées par référence::</p>
-                    <p><strong>Exemple :</strong></p>
-                    <ul class="exemple">
-                        <li>mot=space&gt;de=space&gt;passe</li>
-                        <li>space::-</li>
-                        <li>space::_</li>
-                    </ul>
-                    <p><span>(variante|autre variante)</span> décline les séquences listées comme des combinaisons différentes.</p>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">(mot|phrase) de passe</p>
-                    <p>sera remplacé par:</p>
-                    <ul class="exemple">
-                        <li>mot de passe</li>
-                        <li>phrase de passe</li>
-                    </ul>
-                    <p><span>[a-z§¤]</span> décline les caractères listés comme des combinaisons différentes.</p>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">J'ai oublié la suite[!.]</p>
-                    <p>sera remplacé par:</p>
-                    <ul class="exemple">
-                        <li>J'ai oublié la suite!</li>
-                        <li>J'ai oublié la suite.</li>
-                    </ul>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">Spam [0-3]</p>
-                    <p>sera remplacé par :</p>
-                    <ul class="exemple">
-                        <li>Spam 0</li>
-                        <li>Spam 1</li>
-                        <li>Spam 2</li>
-                        <li>Spam 3</li>
-                    </ul>
-                    <p><span>A{0,2}</span> décline l'élément précédent selon les quantités définies.</p>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">c'est (mat|tic){0,3}</p>
-                    <p>sera remplacé par:</p>
-                    <ul class="exemple">
-                        <li>c'est </li>
-                        <li>c'est mat</li>
-                        <li>c'est matmat</li>
-                        <li>c'est matmatmat</li>
-                        <li>c'est matmattic</li>
-                        <li>c'est mattic</li>
-                        <li>c'est matticmat</li>
-                        <li>c'est mattictic</li>
-                        <li>c'est tic</li>
-                        <li>c'est ticmat</li>
-                        <li>c'est ticmatmat</li>
-                        <li>c'est ticmattic</li>
-                        <li>c'est tictic</li>
-                        <li>c'est ticticmat</li>
-                        <li>c'est tictictic</li>
-                    </ul>
-                    <p><span>\</span> permet de banaliser le caractère suivant</p>
-                    <p><strong>Exemple :</strong></p>
-                    <p class="exemple">un (am\||\|nconu)</p>
-                    <p>sera remplacé par: </p>
-                    <ul class="exemple">
-                        <li>un am|</li>
-                        <li>un |nconu</li>
-                    </ul>
-                    <p><span>Contre exemple :</span></p>
-                    <p class="exemple">un (am|||nconu)</p>
-                    <p>sera remplacé par:</p>
-                    <ul class="exemple">
-                        <li>un am</li>
-                        <li>un </li>
-                        <li>un</li>
-                        <li>un nconu</li>
-                    </ul>
                </div>
            </div>
        </div>

--- a/src/pages/steps/3_inProgress.ejs
+++ b/src/pages/steps/3_inProgress.ejs
@@ -4,6 +4,6 @@
    <p><span>Temps écoulé : </span> <span id="timeSpent"></span></p>
    <p><span>Combinaisons testées :</span></p>
    <div id="progress_bar"> <span id="altTested"></span>/<span id="altTotal"></span> (<span id="searchSpeed"></span>/s)</div>
-    <p>En <a href="#page_4_result">a</a>ttendant</p>
+    <!--<p>En <a href="#page_4_result">a</a>ttendant</p>
-    <p>Voici les autres projets sur lesquelles je travaille:</p>
+    <p>Voici les autres projets sur lesquelles je travaille:</p>-->
 </section>
--- a/src/stylus/general.styl
+++ b/src/stylus/general.styl
@@ -9,7 +9,6 @@ body
    background-color:secondaryColor
    color primaryColor
    font-family: asap, sans-serif
-    padding-bottom 20px
 .hidden
    display none
 a

--- a/src/stylus/steps/page_0_home.styl
+++ b/src/stylus/steps/page_0_home.styl
@@ -24,4 +24,4 @@
      max-width 100%
  .button
-    margin-top 50px
+    margin 50px auto
--- a/src/stylus/steps/page_2_inputSecrets.styl
+++ b/src/stylus/steps/page_2_inputSecrets.styl
@@ -24,7 +24,6 @@
  display: flex
  justify-content: space-around
  font-size: 20px
-  margin-bottom: 50px
  //--STATUS--
@@ -84,65 +83,6 @@
          color primaryColor
          background thirdColor
-  //---TABS AREA---
-  .tabs
-    background-color: #B2B4C2
-    color: black
-    width: 25vw
-    border-radius: 5px 5px 0 0
-    .tab_button
-      display: flex
-      height: 40px
-      cursor: pointer
-      div
-        width: 33%
-        border: solid 2px #707070
-        border-radius: 5px 5px 0 0
-        font-weight: 900
-      .active_tab
-        border-bottom: secondaryColor
-    .desc
-      height: 420px
-      width: calc(100% - 2px)
-      border: solid 2px #707070
-      border-top: none
-      padding: 0 5px
-      font-weight: 200
-      overflow-y: scroll
-      text-align: left
-      div
-        padding-top: 20px
-      .exemple
-        background-color: secondaryColor
-        border: solid 1px grey
-        padding: 10px
-      > div > *
-        margin-bottom: 10px
-      p
-        align-self: center
-        font-weight: 200
-        strong
-          font-weight: 900
-        span
-          background-color: lightgray
-          border-radius: 2px
-          padding: 2px
-          font-weight: 400
-      .hidden
-        display: none
 .majuscules_details
  list-style: circle

--- a/src/stylus/widgets/tabs.styl
+++ b/src/stylus/widgets/tabs.styl
+//---TABS AREA---
+.tabs
+  width: 25vw
+  .tab > input
+    display none
+  .tab_header
+    cursor: pointer
+    display: block
+    width 100%
+    height: 50px
+    line-height: 50px
+    background-color primaryColor
+    color secondaryColor
+    margin-top 5px
+    border-radius: 5px
+    &:hover
+      background-color thirdColor
+      color secondaryColor
+  .tab:first-child .tab_header
+    margin-top 0
+  .tab > input:checked ~ .tab_header
+    background-color primaryColor
+    color fourthColor
+    border-radius: 5px 5px 0 0
+    &:hover
+      background-color primaryColor
+      color fourthColor
+  .tab_content
+    display none
+    .warning
+      margin 10px
+      padding 10px
+  .tab > input:checked ~ .tab_content
+    display block
+    overflow-y: scroll
+    max-height calc(100vh - 490px)
+    text-align left
+    border-radius: 0 0 5px 5px
+    padding 10px;
+    background-color: secondaryColorBis
+    color: primaryColor
+  pre
+    background-color: secondaryColor
+    border: solid 1px grey
+    padding: 10px
+    div
+      width: 33%
+      border: solid 2px #707070
+      border-radius: 5px 5px 0 0
+      font-weight: 900
+    .active_tab
+      border-bottom: secondaryColor
+  .desc
+    height: 420px
+    width: calc(100% - 2px)
+    border: solid 2px #707070
+    border-top: none
+    padding: 0 5px
+    font-weight: 200
+    overflow-y: scroll
+    text-align: left
+    div
+      padding-top: 20px
+    > div > *
+      margin-bottom: 10px
+    p
+      align-self: center
+      font-weight: 200
+      strong
+        font-weight: 900
+      span
+        background-color: lightgray
+        border-radius: 2px
+        padding: 2px
+        font-weight: 400
+    .hidden
+      display: none
--- a/src/stylus/widgets/warning.styl
+++ b/src/stylus/widgets/warning.styl
@@ -21,3 +21,12 @@
    &:first-child
      margin-top 0;
+#secuTips
+  display inline-block;
+  border 2px solid #F66
+  border-radius 100%;
+  background #FCC
+  color #C00
+  padding-top 2px
+  line-height 22px
+  width 24px