<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css"/>
    <link rel="stylesheet" href="../3rd/font-awesome-4.7.0/css/font-awesome.min.css"/>
  </head>

  <body>
    <div id="main">

      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <div class="select select_block" data-page="home_page">
              <p class="select" data-page="home_page"><i class="select select_icon fa fa-star" data-page="home_page"></i></p>
              <p class="select select_label" data-page="home_page">Accueil</p>
            </div>
            <div class="select select_block" data-page="ui_options_page">
              <p class="select" data-page="ui_options_page"><i class="select select_icon fa fa-cube" data-page="ui_options_page"></i></p>
              <p class="select select_label" data-page="ui_options_page">Interface</p>
            </div>
            <div class="select select_block" data-page="gc_options_page">
              <p class="select" data-page="gc_options_page"><i class="select select_icon fa fa-cog" data-page="gc_options_page"></i></p>
              <p class="select select_label" data-page="gc_options_page">Grammaire</p>
            </div>
            <div class="select select_block" data-page="sc_options_page">
              <p class="select" data-page="sc_options_page"><i class="select select_icon fa fa-book" data-page="sc_options_page"></i></p>
              <p class="select select_label" data-page="sc_options_page">Dictionnaires</p>
            </div>
            <div class="select select_block" data-page="info_page">
              <p class="select" data-page="info_page"><i class="select select_icon fa fa-info-circle" data-page="info_page"></i></p>
              <p class="select select_label" data-page="info_page">Informations</p>
            </div>
            <div class="select select_block invisible" data-page="test_page">
              <p class="select" data-page="test_page"><i class="select select_icon fa fa-flask" data-page="test_page"></i></p>
              <p class="select select_label" data-page="test_page">Zone de test</p>
            </div>
          </ul>
        </nav>
      </header> <!-- #menu -->

      <div id="page">

        <section id="home_page" class="page">

          <div id="mainlogo">
            <div class="center"><img src="../img/logo150_text.png" alt="Grammalecte"></div>
            <p class="underline center">
              Version ${version}
            </p>
            <p id="link_website" class="link center" data-url="http://grammalecte.net/?from=grammalecte-fx">Site web</p>
            <div class="notice center">
              <div id="conj_button">Conjugueur</div>
            </div>
          </div>

          <div id="thanks">
            <p class="center">Grammalecte remercie</p>
            <p class="center"><img id="link_sponsor1" class="link border" src="../img/LaMouette.png" alt="La Mouette" data-url="http://www.lamouette.org/?from=grammalecte-fx" /></p>
            <p class="center"><img id="link_sponsor2" class="link border" src="../img/Algoo_logo.png" alt="Algoo" data-url="https://www.algoo.fr/?from=grammalecte-fx" /></p>
            <p id="link_othersponsors" class="link center" data-url="http://grammalecte.net/?thanks">
              et tous ceux qui l’ont soutenu
            </p>
          </div>
        </section> <!-- #home_page -->

        <section id="ui_options_page" class="page">
          <h1>OPTIONS D’INTERFACE</h1>
          <h2>Menu contextuel</h2>
          <p>Les commandes permettant de lancer Grammalecte sont trouvables via le menu contextuel.</p>
          <p class="right"><img src="../img/contextmenu.png" title="menu contextuel sur sélection" /></p>
          <h2>Boutons d’accès</h2>
          <p>Grammalecte peut aussi afficher un bouton d’accès au correcteur en bas à gauche des zones de texte.</p>
          <p class="right"><img src="../img/menu_button1.png" title="bouton d’accès au correcteur" /></p>
          <p>Vous pouvez activer ou désactiver l’affichage de ces boutons sur les zones de texte. Il existe deux types de zones de texte.</p>
          <div class="option_section" id="ui_option_textarea_box">
              <p><input type="checkbox" id="ui_option_textarea" /> <label for="ui_option_textarea">“Textareas”</label></p>
              <p class="option_description">Ces zones de texte sont les champs de formulaire usuels pour saisir du texte. Ils ne permettent que la saisie de texte brut, sans fioritures.</p>
          </div>
          <div class="option_section" id="ui_option_editablenode_box">
              <p><input type="checkbox" id="ui_option_editablenode" /> <label for="ui_option_editablenode">“Nodes” éditables</label></p>
              <p class="option_description">Ces zones de texte sont des sections de page web éditables. Il est fréquent que ces zones de texte apparaissent comme des “textareas” standard. Il est aussi fréquent que ces zones de texte soient couplées avec toutes sortes de logiciels (de simples scripts d’aide à la mise en page ou des applications complexes). Ces zones de texte permettent l’affichage de texte enrichi (italique, gras, hyperlien, images, etc.).</p>
          </div>
          <h2>Raccourcis clavier</h2>
          <p class="shortcut">CTRL+MAJ+F</p>
          <p class="shortcut_label">Correcteur grammatical</p>
          <p class="shortcut">CTRL+MAJ+6</p>
          <p class="shortcut_label">Conjugueur</p>
          <p class="shortcut">CTRL+MAJ+7</p>
          <p class="shortcut_label">Éditeur lexical</p>
          <!--<p class="shortcut">CTRL+MAJ+8</p>
          <p class="shortcut_label">Dictionnaires communautaires</p>-->
        </section> <!-- #ui_options_page -->

        <section id="gc_options_page" class="page">
          <h1>OPTIONS GRAMMATICALES</h1>
          <div id="grammar_options">
            ${webextOptionsHTML}
          </div>
          <div id="default_options_button" class="button blue center">Options par défaut</div>
        </section> <!-- #gc_options_page -->

        <section id="sc_options_page" class="page">
          <h1>OPTIONS ORTHOGRAPHIQUES</h1>
          <div id="hunspell_options">
            <h2>DICTIONNAIRES DE GRAMMALECTE</h2>
            <div class="option_section" id="main_dic_box">
                <p><input type="checkbox" id="main_dic" data-dictionary="main" checked disabled="disabled" /> <label for="main_dic">Dictionnaire principal</label></p>
                <p class="option_description">Environ 83 000 entrées, 500 000 flexions.<br/>Ni éditable, ni désactivable.<br/>Ce dictionnaire est créé à partir du dictionnaire orthographique pour Firefox et LibreOffice, conçu sur le <a id="link_grammalecte" class="link" data-url="http://grammalecte.net/home.php?prj=fr">site de Grammalecte</a>.</p>
            </div>
            <div class="option_section" id="community_dic_box">
                <p><input type="checkbox" id="community_dic" data-dictionary="community" disabled/> <label for="community_dic" style="color: hsl(0, 0%, 70%);">Dictionnaire communautaire</label></p>
                <p class="option_description" style="color: hsl(0, 0%, 70%);">Ce dictionnaire est composé à partir de dictionnaires communautaires disponibles en ligne aux membres.</p>
                <p class="option_description">Non disponible. Fonctionnalité à venir.</p>
                <div class="button_row">
                  <!--<div class="dic_button" id="dic_community_button">Éditer</div>
                  <div class="dic_button" id="dictionaries_button">Dictionnaires en ligne</div>-->
                </div>
            </div>
            <div class="option_section" id="personal_dic_box">
                <p><input type="checkbox" id="personal_dic" data-dictionary="personal" /> <label for="personal_dic">Dictionnaire personnel</label></p>
                <p class="option_description">Ce dictionnaire est créé et édité via l’éditeur lexical et n’est pas partagé.</p>
                <div class="button_row">
                  <div class="dic_button" id="dic_personal_button">Éditer</div>
                </div>
            </div>
          </div>

          <div id="hunspell_options" style="display: none; opacity: .25">
            <h2>DICTIONNAIRES HUNSPELL</h2>
            <p class="dictionaries_info">Les dictionnaires Hunspell ne sont utilisées que pour la correction orthographique proposée par Firefox (soulignement rouge).<br/><br/>Section inactive.<br/>Le système d’extension <i>WebExtension</i> ne propose pas encore d’interface de programmation pour le correcteur orthographique.</p>
            <div class="option_section" id="fr-FR-modern_box">
                <p><input type="checkbox" id="fr-FR-modern" /> <label for="fr-FR-modern">“Moderne”</label></p>
                <p class="option_description">Ce dictionnaire propose l’orthographe telle qu’elle est écrite aujourd’hui le plus couramment. C’est le dictionnaire recommandé si le français n’est pas votre langue maternelle ou si vous ne désirez qu’une seule graphie correcte par mot.</p>
            </div>
            <div class="option_section" id="fr-FR-classic_box">
                <p><input type="checkbox" id="fr-FR-classic" /> <label for="fr-FR-classic">“Classique” (recommandé)</label></p>
                <p class="option_description">Il s’agit du dictionnaire “Moderne”, avec des graphies classiques en sus, certaines encore communément utilisées, d’autres désuètes. C’est le dictionnaire recommandé si le français est votre langue maternelle.</p>
            </div>
            <div class="option_section" id="fr-FR-reform_box">
                <p><input type="checkbox" id="fr-FR-reform" /> <label for="fr-FR-reform">“Réforme 1990”</label></p>
                <p class="option_description">Avec ce dictionnaire, seule l’orthographe réformée est reconnue. Attendu que bon nombre de graphies réformées sont considérées comme erronées par beaucoup, ce dictionnaire est déconseillé. Les graphies passées dans l’usage sont déjà incluses dans le dictionnaire “Moderne”.</p>
            </div>
            <div class="option_section" id="fr-FR-classic-reform_box">
                <p><input type="checkbox" id="fr-FR-classic-reform" /> <label for="fr-FR-classic-reform">“Toutes variantes”</label></p>
                <p class="option_description">Ce dictionnaire contient les variantes graphiques, classiques, réformées, ainsi que d’autres plus rares encore. Ce dictionnaire est déconseillé à ceux qui ne connaissent pas très bien la langue française.</p>
            </div>
          </div>
        </section> <!-- #sc_options_page -->

        <section id="test_page" class="page">
          <div id="test_cmd">
            <h1>ZONE DE TEST</h1>
            <p>Section de contrôle pour le développement du logiciel…</p>
            <p id="link_testpage" class="link" data-url="https://grammalecte.net/test.html">Page de test</p>
            <textarea id="text_to_test" rows="10"></textarea>
            <div id="fulltests_button" class="button blue">Tests complets</div> <div id="text_to_test_button" class="button green fright">Analyser</div>
          </div>
          <pre id="tests_result"></pre>
        </section> <!-- #test_page -->

        <section id="info_page" class="page">
          <h1>INFORMATIONS</h1>

          <h2>Licence d’utilisation</h2>
          <p>Grammalecte est un correcteur grammatical <i>open&nbsp;source</i> sous <span id="link_gpl" class="link" data-url="https://www.gnu.org/licenses/gpl.html">licence GPL 3</span>.</p>

          <h2>Respect de la vie privée</h2>
          <p>Grammalecte ne modifie aucun réglage de votre navigateur, ne vous espionne pas et ne communique aucune information de quelque sorte à quiconque, pas même à l’auteur du logiciel.</p>

          <h2>Droits demandés par l’extension à votre navigateur</h2>
          <h3>“Accéder à vos données pour tous les sites web” (Firefox)</h3>
          <p>Il est nécessaire de pouvoir lire ce que contient une page web pour proposer la correction grammaticale. Ceci ne se fait qu’à la demande de l’utilisateur.</p>
          <p>Contrairement à tous les autres correcteurs grammaticaux, tout se fait en mode hors-ligne. Aucune information n’est transmise.</p>

          <h3>“Télécharger des fichiers et consulter et modifier l’historique des téléchargements” (Firefox)</h3>
          <p>Grammalecte requiert les droits de l’interface “downloads” pour pouvoir exporter votre dictionnaire personnel sur le disque dur (par une astuce de programmation).</p>
          <p>Mais l’extension ne télécharge rien et ne consulte ni ne modifie votre historique de téléchargement.</p>

          <h2>Revue de code</h2>
          <p>Le code de l’extension est passé en revue par les équipes de Mozilla et de Google.</p>

          <h2>Développement et tests</h2>
          <p>Cette extension est développée et testée avec Firefox. Il se peut qu’il y ait des différences de comportement avec Chrome et les autres navigateurs avec lesquels cette extension est compatible.</p>
        </section> <!-- #info_page -->

      </div> <!-- #page -->

    </div> <!-- #main -->

    <script src="../grammalecte/graphspell/helpers.js"></script>
    <script src="main.js"></script>
  </body>

</html>
