diff --git a/src/routes/contribuer.svelte b/src/routes/contribuer.svelte
index bf724e07a238416b8f5d3d3ef2493b17601eadac..1e3814ab92245479dca69539d782fde34b82553a 100644
--- a/src/routes/contribuer.svelte
+++ b/src/routes/contribuer.svelte
@@ -17,69 +17,194 @@
<h2 class="pb-3 pt-5 text-xl text-gray-700 font-bold">
1. Proposer une contribution depuis l'interface, sans coder
</h2>
- <TextUnderconstructionMessage />
- <!--
- <h3 class="pb-3 pt-5 text-xl text-gray-700 font-light">
- Ajouter/modifier un paramètre de la loi
- </h3>
- <h4 class="pb-2 pl-5 pt-2 text-base text-black font-bold">
- Modifier un paramètre existant
- </h4>
- <p class="leading-normal pb-3 pl-5 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis.
- </p>
- <h4 class="pb-2 pl-5 pt-5 text-base text-black font-bold">
- Ajouter un nouveau paramètre
- </h4>
- <p class="leading-normal pb-3 pl-5 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis.
- </p>
- <h3 class="pb-3 pt-5 text-xl text-gray-700 font-light">
- Ajouter/modifier une référence législative
- </h3>
- <p class="leading-normal pb-3 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis.
- </p>
- <h4 class="pb-2 pl-5 pt-2 text-base text-black font-bold">
- Modifier une référence législative existante
- </h4>
+
<p class="leading-normal pb-3 pl-5 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis.
+ Chacun des paramètres de la loi est indiqué comme <!-- Inspired from Material Icons name: New Releases / with white symbol inside -->
+ <span class="bg-gray-400 text-white rounded inline-flex pr-1">
+ <div class="flex items-center">
+ <svg
+ aria-hidden="true"
+ class="block h-5 w-5 text-white mx-1 "
+ viewBox="0 0 24 23"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M22 10.5L19.56 7.71L19.9 4.02L16.29 3.2L14.4 0L11 1.46L7.6 0L5.71 3.19L2.1 4L2.44 7.7L0 10.5L2.44 13.29L2.1 16.99L5.71 17.81L7.6 21L11 19.53L14.4 20.99L16.29 17.8L19.9 16.98L19.56 13.29L22 10.5ZM9.09 15.22L5.29 11.41L6.77 9.93L9.09 12.26L14.94 6.39L16.42 7.87L9.09 15.22Z"
+ fill="#13CC03"
+ />
+ <path
+ d="M9.09004 15.2187L5.29004 11.4087L6.77004 9.92867L9.09004 12.2587L14.94 6.38867L16.42 7.86867L9.09004 15.2187Z"
+ fill="white"
+ />
+ </svg>
+ Vérifié
+ </div></span
+ >
+ ou <!-- Inspired from Material Icons name: Warning / with white symbol inside -->
+ <span class="bg-gray-400 text-white rounded inline-flex pr-1">
+ <div class="flex items-center">
+ <svg
+ aria-hidden="true"
+ class="fill-current h-5 w-5 text-white mx-1"
+ viewBox="0 0 24 22"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ class="text-[#FFAC33]"
+ d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
+ />
+ <path
+ d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
+ />
+ <path
+ d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
+ />
+ </svg>
+ À vérifier
+ </div></span
+ >. Cet indice permet de savoir si le paramètre a été relu par des
+ experts ayant confirmé qu'il est à jour.
</p>
- <h4 class="pb-2 pl-5 pt-5 text-base text-black font-bold">
- Ajouter une référence législative existante
- </h4>
+
<p class="leading-normal pb-3 pl-5 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis.
- </p>
- <h3 class="pb-3 pt-5 text-xl text-gray-700 font-light">
- Contribuer à l'élaboration des formules de calcul
- </h3>
- <p class="leading-normal pb-3 text-base text-justify">
- Sed massa velit, feugiat id ultricies ac, accumsan non magna. Aliquam
- nec pulvinar dolor. Mauris et nunc sapien. Cras in maximus mi. Proin
- vestibulum justo ut nulla molestie, sed pellentesque sapien convallis.
- Vestibulum sodales nibh gravida auctor convallis. In hac habitasse
- platea dictumst. Donec tincidunt mauris eget arcu sagittis, in accumsan
- orci ultrices. Nullam pharetra ante risus, ut pulvinar dui varius non.
- Nam venenatis pulvinar orci in rhoncus.
+ En cliquant sur les noms des dispositifs, les paramètres apparaissent
+ dans le volet de gauche (sur ordinateur) ou dans le volet inférieur (sur
+ mobile).
</p>
- -->
+ <div class="grid grid-cols-2 items-start">
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-historique.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+
+ <div class="">
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Pour accéder à l'espace de contribution pour un paramètre
+ spécifique, cliquez sur le bouton<span
+ class=" bg-gray-100 rounded inline-flex underline text-gray-600"
+ ><div class="flex items-center">
+ <svg
+ aria-hidden="true"
+ class="h-4 fill-current stroke-transparent text-gray-600 w-4"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ ><path
+ d="M12.804 16.6663L13.7085 18.2402C12.8402 18.6382 11.8905 18.9005 10.9045 19V17.1729C11.5739 17.0915 12.207 16.9196 12.804 16.6663ZM2.82714 10.9045H1C1.0995 11.8995 1.36181 12.8402 1.7598 13.7085L3.33367 12.804C3.0804 12.207 2.90854 11.5739 2.82714 10.9045ZM12.804 3.33367L13.7085 1.7598C12.8402 1.36181 11.8995 1.0995 10.9045 1V2.82714C11.5739 2.90854 12.207 3.0804 12.804 3.33367ZM17.1729 9.09548H19C18.9005 8.1005 18.6382 7.1598 18.2402 6.29146L16.6663 7.19598C16.9196 7.79296 17.0915 8.42613 17.1729 9.09548ZM7.19598 16.6663L6.29146 18.2402C7.1598 18.6382 8.10955 18.9005 9.09548 19V17.1729C8.42613 17.0915 7.79296 16.9196 7.19598 16.6663ZM9.09548 2.82714V1C8.1005 1.0995 7.1598 1.36181 6.29146 1.7598L7.19598 3.33367C7.79296 3.0804 8.42613 2.90854 9.09548 2.82714ZM15.7528 5.63116L17.3266 4.71759C16.7568 3.93065 16.0603 3.23417 15.2734 2.66432L14.3598 4.23819C14.8935 4.64523 15.3548 5.10653 15.7528 5.63116ZM3.33367 7.19598L1.7598 6.29146C1.36181 7.1598 1.0995 8.1005 1 9.09548H2.82714C2.90854 8.42613 3.0804 7.79296 3.33367 7.19598ZM17.1729 10.9045C17.0915 11.5739 16.9196 12.207 16.6663 12.804L18.2402 13.7085C18.6382 12.8402 18.9005 11.8905 19 10.9045H17.1729ZM14.3688 15.7528L15.2824 17.3266C16.0693 16.7568 16.7658 16.0603 17.3357 15.2734L15.7618 14.3598C15.3548 14.8935 14.8935 15.3548 14.3688 15.7528ZM5.63116 4.24724L4.72663 2.66432C3.93065 3.24322 3.24322 3.93065 2.67337 4.72663L4.24724 5.6402C4.64523 5.10653 5.10653 4.64523 5.63116 4.24724ZM4.24724 14.3688L2.67337 15.2734C3.24322 16.0603 3.9397 16.7568 4.72663 17.3266L5.6402 15.7528C5.10653 15.3548 4.64523 14.8935 4.24724 14.3688ZM10.9045 5.47739H9.09548V10.3709L12.9759 14.2513L14.2513 12.9759L10.9045 9.62914V5.47739Z"
+ /></svg
+ >
+
+ Historique
+ </div></span
+ > situé en dessous du paramètre.
+ </p>
+ </div>
+
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-proposer-modification.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+ <div>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Ce bouton ouvre un nouvel onglet dans votre navigateur vous
+ permettant de consulter, entre autres, l'historique des valeurs du
+ paramètre.
+ </p>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify ">
+ Pour contribuer, cliquez sur le bouton bleu <span
+ class="text-white uppercase bg-le-bleu rounded p-1 text-sm "
+ >Proposer une modification</span
+ >.
+ </p>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Ce bouton ouvre un nouvel écran, similaire au précédent, à
+ l'exception prêt que les champs sont éditables.
+ </p>
+ </div>
+ </div>
+
+ <div
+ class="border-b-0 border-t border-r-0 border-l-0 pt-5 grid grid-cols-2 gap-4 items-start"
+ >
+ <div>
+ <p
+ class="leading-normal pb-3 pl-5 text-base text-justify font-semibold "
+ >
+ L'écran de contribution vous permet de :
+ </p>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-ecran-contribution.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+ </div>
+ <div class="pt-10">
+ <div class="">
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Éditer le nom du paramètre et sa description :
+ </p>
+ </div>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-proposer-nom-description.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+
+ <div class="">
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Éditer chacune des valeurs du paramètres (historique et dernière
+ valeur) :
+ </p>
+ </div>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-modifier-valeur.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+
+ <div>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Ajouter une dernière valeur (la loi a changé) :
+ </p>
+ </div>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-ajouter-valeur.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+
+ <div>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Confirmer que la dernière valeur est à jour :
+ </p>
+ </div>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-confirmer-valeur.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+ <div>
+ <p class="leading-normal pb-3 pl-5 text-base text-justify">
+ Ajouter la ou les références législatives :
+ </p>
+ </div>
+ <div class="mx-4 my-2">
+ <img
+ src="/tutoriel-contribution-cliquer-ajout-reference.png"
+ alt="montre où cliquer pour amender un dispositif"
+ />
+ </div>
+ </div>
+ </div>
+
<!-- Partie depuis les dépôts de code-->
<h2 class="pb-3 pt-5 text-xl text-gray-700 font-bold">
2. Proposer une contribution directement dans le dépôt git
diff --git a/static/tutoriel-contribution-cliquer-ajout-reference.png b/static/tutoriel-contribution-cliquer-ajout-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..5814767c49aac2cdeb94245fcdf1c002d974a6d7
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-ajout-reference.png differ
diff --git a/static/tutoriel-contribution-cliquer-ajouter-valeur.png b/static/tutoriel-contribution-cliquer-ajouter-valeur.png
new file mode 100644
index 0000000000000000000000000000000000000000..435b0ef935de13f2555483faecc9914da274351e
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-ajouter-valeur.png differ
diff --git a/static/tutoriel-contribution-cliquer-confirmer-valeur.png b/static/tutoriel-contribution-cliquer-confirmer-valeur.png
new file mode 100644
index 0000000000000000000000000000000000000000..081e0562fa0e148ce389b01bff28c535cfb8a3cb
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-confirmer-valeur.png differ
diff --git a/static/tutoriel-contribution-cliquer-historique.png b/static/tutoriel-contribution-cliquer-historique.png
new file mode 100644
index 0000000000000000000000000000000000000000..abfa72e93316785cc189ba7cd435d98db30e092d
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-historique.png differ
diff --git a/static/tutoriel-contribution-cliquer-modifier-valeur.png b/static/tutoriel-contribution-cliquer-modifier-valeur.png
new file mode 100644
index 0000000000000000000000000000000000000000..8eea4d72a7b493a2bdf68b623eae318686dc0f00
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-modifier-valeur.png differ
diff --git a/static/tutoriel-contribution-cliquer-proposer-modification.png b/static/tutoriel-contribution-cliquer-proposer-modification.png
new file mode 100644
index 0000000000000000000000000000000000000000..f988d2e3903e78b27da9d6a17a1e3cf0e43fc922
Binary files /dev/null and b/static/tutoriel-contribution-cliquer-proposer-modification.png differ
diff --git a/static/tutoriel-contribution-ecran-contribution.png b/static/tutoriel-contribution-ecran-contribution.png
new file mode 100644
index 0000000000000000000000000000000000000000..7febffefd33002e58f6abefeecb7cc77b9579316
Binary files /dev/null and b/static/tutoriel-contribution-ecran-contribution.png differ
diff --git a/static/tutoriel-contribution-proposer-nom-description.png b/static/tutoriel-contribution-proposer-nom-description.png
new file mode 100644
index 0000000000000000000000000000000000000000..23235e2bf31e47117b7c41ecac4e699c16956dd8
Binary files /dev/null and b/static/tutoriel-contribution-proposer-nom-description.png differ