first commit

_WORKFILES/dessin-pictos.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="dessin-pictos.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1"
+     inkscape:cx="154.5"
+     inkscape:cy="29"
+     inkscape:window-width="2880"
+     inkscape:window-height="1526"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="page"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g2528"
+       inkscape:label="terrain-de-vie-REGULAR-MENU"
+       transform="translate(6.2177084,-2.2489583)"
+       inkscape:export-filename="..\assets\pictos\terrain-de-vie-REGULAR-MENU.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         id="path790"
+         cx="71.357956"
+         cy="19.674818"
+         rx="4.5815058"
+         ry="4.5815053" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 71.357956,15.044283 v 9.216103"
+         id="path1684" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="M 75.966008,19.674818 H 66.749905"
+         id="path1686" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="M 71.376784,15.172736 72.33624,16.30742"
+         id="path1688" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         d="m 71.331631,15.175325 -0.959456,1.134683"
+         id="path1690" />
+      <path
+         style="fill:#ffffff;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         d="m 68.731778,18.579643 1.555716,-1.285982 1.88169,-0.245245 1.930202,1.322245 0.02279,1.904879 -1.590524,1.765844 -2.806214,0.467818 -1.274387,-1.625623 z"
+         id="path1694"
+         sodipodi:nodetypes="ccccccccc" />
+    </g>
+    <g
+       id="g4074"
+       inkscape:label="puissance-d-agir-REGULAR-MENU"
+       transform="translate(3.175,-1.7197917)"
+       inkscape:export-filename="..\assets\pictos\puissance-d-agir-REGULAR-MENU.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
+      <circle
+         style="fill:none;stroke:#000000;stroke-width:0.211667;stroke-dasharray:none;stroke-opacity:1"
+         id="path3315"
+         cx="92.027863"
+         cy="19.082895"
+         r="4.6104493" />
+      <ellipse
+         style="fill:none;stroke:#000000;stroke-width:0.079375;stroke-dasharray:none;stroke-opacity:1"
+         id="circle4047"
+         cx="92.027863"
+         cy="19.082895"
+         rx="2.2631533"
+         ry="2.2631531" />
+      <circle
+         style="fill:#000000;stroke:none;stroke-width:0.0672404;stroke-dasharray:none;stroke-opacity:1"
+         id="path4049"
+         cx="92.027863"
+         cy="19.082895"
+         r="0.39687499" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 87.381484,19.082895 h 9.292758"
+         id="path4051" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="M 92.027863,23.729274 V 14.436516"
+         id="path4053" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 94.351053,23.106777 -4.64638,-8.047764"
+         id="path4057" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="M 96.051746,21.406084 88.00398,16.759706"
+         id="path4059" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 96.051745,16.759705 -8.047764,4.64638"
+         id="path4061" />
+      <path
+         style="fill:#000000;stroke:#000000;stroke-width:0.0738563;stroke-dasharray:none;stroke-opacity:1"
+         d="m 94.351052,15.059012 -4.646378,8.047766"
+         id="path4063" />
+    </g>
+  </g>
+</svg>

_WORKFILES/dev_design_fevrier.txt

@@ -0,0 +1,42 @@
+I / PICTOS
+
+OUTILS D'ENQUETE
+1.1 terrain de vie
+1.2 proximité
+1.3 superposition
+1.4 puissance d'agir
+1.5 actions
+1.6 doléancier
+
+Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px)
+Deux tailles : 35px (menu) et 28px (cartel)
+Points : 3px 5px
+
+NAVIGATION
+2.1 mode d'emploi
+2.2 connexion
+2.3 rechercher
+2.4 retour aux cartes vivantes
+2.5 casque écoute
+2.6 chevron fermer onglet
+2.7 entités liées (sens de liaison)
+2.8 scrollbar
+2.9 custom video/sound player
+
+FOND D'ENQUÊTE
+3.1 terrain de vie
+3.2 puissance d'agir
+3.3 doléance
+
+Essayer les pictos contextuellement	-> +ieurs tailles et épaisseurs ?
+					-> rapport à la typo
+
+
+II / ANIMATIONS
+1. Terrains de vie en particules
+2. Survol terrains de vie sur carte
+3. Ecoute terrain de vie sur carte
+4. Survol association sur carte
+5. Survol entité sur enquête
+6. Apparition volets latéraux enquête
+7. Clic/survol menu mode de navigation

assets/pictos/action.svg

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thin"
+        fill="white"
+        stroke="none"
+        cx="17.5"
+        cy="17.5"
+        r="9" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="12"
+        x2="17.5"
+        y2="23"
+        transform="rotate(135, 17.5, 17.5)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(45) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(90) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(135) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(180) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(225) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(270) translate(0 -16)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 14, 25.5
+            L 17.5, 17.5
+            L 21, 25.5"
+        transform-origin="center"
+        transform="rotate(315) translate(0 -16)" />
+
+    </g> 
+</svg>

assets/pictos/doleance.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+        <circle
+            class="thick"
+            fill="white"
+            cx="17.5"
+            cy="17.5"
+            r="17" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(45, 17.5, 17.5)" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(90, 17.5, 17.5)" />
+        <line
+            class="thin"
+            x1="17.5"
+            y1="0"
+            x2="17.5"
+            y2="35"
+            transform="rotate(135, 17.5, 17.5)" />
+        <circle
+            class="thin"
+            fill="white"
+            cx="17.5"
+            cy="17.5"
+            r="8" />
+
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(45) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(90) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(135) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(180) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(225) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(270) translate(-12 2)" />
+        <path
+            class="thin"
+            fill="none"
+            d="M 15.5, 20.5
+                L 17.5, 17.5
+                L 19.5, 20.5"
+            transform-origin="center"
+            transform="rotate(315) translate(-12 2)" />
+
+    </g> 
+</svg>

assets/pictos/proximite.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <path
+        class="thick"
+        fill="white"
+        d="M 4, 4
+           L 13, 1
+           L 19, 5
+           L 28, 3
+           L 34, 12
+           L 29, 22
+           L 27, 29
+           L 21, 34
+           L 14, 31
+           L 12, 23
+           L 4, 17
+           L 1, 12
+           Z" />    
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 7, 7
+           L 11, 5
+           L 15, 7
+           L 12, 12
+           L 12, 15
+           L 9, 16
+           L 5, 12
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 20, 11
+           L 22, 9
+           L 24, 9
+           L 27, 7
+           L 29, 11
+           L 26, 15
+           L 24, 16
+           L 21, 14
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 18, 23
+           L 22, 22
+           L 24, 25
+           L 22, 28
+           L 20, 29
+           L 17, 27
+           Z" />
+    </g> 
+</svg>

assets/pictos/puissance-d-agir.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thick"
+        fill="white"
+        cx="17.5"
+        cy="17.5"
+        r="17" />
+    <circle
+        class="thin"
+        fill="none"
+        cx="17.5"
+        cy="17.5"
+        r="9.3" />
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(135, 17.5, 17.5)" />
+    </g> 
+</svg>

assets/pictos/superposition.svg

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">    
+    <path 
+        class="thick"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        class="thick"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        class="thick"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+           
+            
+    <path 
+        fill="white"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        fill="white"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        fill="white"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+
+    <circle
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+
+    <path 
+        class="thin"
+        fill="none"
+        d="M 12, 13
+           L 21, 13
+           L 31, 22
+           L 22, 32
+           L 8, 26
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 1, 11
+           L 9, 2
+           L 25, 9
+           L 21, 23
+           L 3, 20
+           Z" />
+    <path 
+        class="thin"
+        fill="none"
+        d="M 21, 2
+           L 30, 6
+           L 33, 13
+           L 25, 24
+           L 18, 27
+           L 7, 12
+           Z" />
+    </g> 
+</svg>

assets/pictos/terrain-de-vie.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="35px"
+   height="35px"
+   viewBox="0 0 35 35"
+   xmlns="http://www.w3.org/2000/svg">
+   <g id="picto">
+    <circle
+        class="thick"
+        fill="white"
+        cx="17.5"
+        cy="17.5"
+        r="17" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="0"
+        x2="17.5"
+        y2="35"
+        transform="rotate(90, 17.5, 17.5)" />
+    <path
+        class="thick"
+        fill="white"
+        d="M 9, 12
+           L 21, 8
+           L 27, 14
+           L 27, 21
+           L 19, 26
+           L 12, 27
+           L 6, 21
+           Z"
+        transform="translate(0 0.5)"
+    />
+
+    <path
+        class="thin"
+        fill="none"
+        d="M 15, 20.5
+            L 17.5, 17.5
+            L 20, 20.5"
+        transform-origin="center"
+        transform="translate(0 -15.75)" />
+    <path
+        class="thin"
+        fill="none"
+        d="M 15, 20.5
+            L 17.5, 17.5
+            L 20, 20.5"
+        transform-origin="center"
+        transform="rotate(90) translate(0 -15.75)" />
+
+    </g> 
+</svg>

background.js

@@ -0,0 +1,126 @@
+// grain
+grained('#grain-bg', {
+    animate: true,
+    patternWidth: 100,
+    patternHeight: 100,
+    grainOpacity: 0.5,
+    grainDensity: 1,
+    grainWidth: 1,
+    grainHeight: 1,
+    grainChaos: 10,
+    grainSpeed: 1
+});
+
+/* 
+|O couleur prev      O  |
+|     couleur d'appoint |
+|                       |
+|                       |
+|                       |
+|        couleur next  O|
+*/
+
+//  au clic sur le mode suivant :
+//  - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
+//  - couleurs next (ou prev) est une nouvelle couleur
+//  - couleur appoint s'adapte en fonction de couleur next
+
+
+let pageAmount = 0;
+let currentPage = 1, prevPage;
+
+document.querySelectorAll('.mode').forEach(function(node, index) {
+    pageAmount++;
+    node.addEventListener('click', function() {
+        document.querySelectorAll('.active').forEach(function(el) {
+            el.classList.remove('active'); 
+        });
+        node.classList.toggle('active');
+        prevPage = currentPage;
+        currentPage = index + 1;
+
+        console.log(currentPage, prevPage);
+
+        if (currentPage != prevPage) {
+            if (currentPage > prevPage) {
+                couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
+                couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
+            } else {
+                couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
+                couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
+            }
+            couleurs.appoint.h = couleurs.next.h + 200;
+            console.log(couleurs.prev.h, couleurs.next.h);
+    
+            let mainContainer = document.getElementById('BG_BG_BG');
+            let containerTmp = document.getElementById('BG_BG_BG_tmp');
+            containerTmp.style.background = `
+            radial-gradient(circle at 0% 14%, 
+                    hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+                    rgba(255, 255, 255, 0) 100%),
+            radial-gradient(circle at 93% 95%,
+                hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+                rgba(255, 255, 255, 0) 100%),
+            radial-gradient(circle at 73% 10%,
+                hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+                rgba(255, 255, 255, 0) 100%)
+            `;
+            containerTmp.style.opacity = 1;
+            setTimeout(function() {
+                mainContainer.style.opacity = 0;
+            },100);
+    
+            setTimeout(function() {
+                mainContainer.style.background = `
+                radial-gradient(circle at 0% 14%, 
+                        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+                        rgba(255, 255, 255, 0) 100%),
+                radial-gradient(circle at 93% 95%,
+                    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+                    rgba(255, 255, 255, 0) 100%),
+                radial-gradient(circle at 73% 10%,
+                    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+                    rgba(255, 255, 255, 0) 100%)
+                `;
+                containerTmp.style.opacity = 0;
+                mainContainer.style.opacity = 1;
+            }, 500);
+        }
+
+    })
+});
+
+let couleurs = {
+    prev: {
+        h: 42,
+        s: 40.6,
+        l: 44.9 + 20,
+    },
+    next: {
+        h: 0,
+        s: 30.5,
+        l: 46.3 + 20,
+    },
+    appoint: {
+        h: 0,
+        s: 66,
+        l: 35.7 + 20,
+    }
+}
+
+couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
+couleurs.appoint.h = couleurs.next.h + 200;
+console.log(couleurs.prev.h, couleurs.next.h);
+
+let container = document.getElementById("BG_BG_BG");
+container.style.background = `
+radial-gradient(circle at 0% 14%, 
+        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
+        rgba(255, 255, 255, 0) 100%),
+radial-gradient(circle at 93% 95%,
+    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
+    rgba(255, 255, 255, 0) 100%),
+radial-gradient(circle at 73% 10%,
+    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
+    rgba(255, 255, 255, 0) 100%)
+`;

grained/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014, Sarath Saleem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

grained/README.md

@@ -0,0 +1,60 @@
+
+Add animated grain texture effect to your content.
+--------------------------------------------------
+
+With **grained.js** you can add customized noise effect on your web page. It has easily customizable options to generate the animated noise effect.
+The animation is added using CSS3 key-frame animation and instantly generated png noise image.
+
+[!["Create your own"](http://sarathsaleem.github.io/grained/img/textute-list.gif)](http://sarathsaleem.github.io/grained)
+
+**[Create your own](http://sarathsaleem.github.io/grained)**
+
+How to use
+------------
+
+Include the library file in your html page.
+
+    <script src="grained.js"></script>
+
+initialize the library by
+
+    grained('elementId',options)
+
+*`'elementId'`* is the id of the container element to add the grain effect.  It is important to note that grainedjs will not change the background of the container element. It appends a div element as the first child of the container. Grainedjs will add two style changes to the container element *`'position:relative;overflow:hidden'.`* If the container position is absolute it will remand as absolute only.
+
+Since a `'div'` element with class `'grained'` is added as first child element with position absolute it will have the z index priority and appears on top of other contents in the container element. If you want the other elements in container element on top of grained effect you have to  add a css like
+
+*`#container > * { position:relative; }`*
+
+So the ideal structure of implementaion is like follows
+
+    <div id="container">
+       <div class="contents">
+         your contents goes here .. like <a>, <p> etc
+       </div>
+    </div>
+after initilizing  `grained('#container', {});` it will look like this
+
+
+    <div id="container">
+        <div class='grained'></div>
+        <div class="contents">
+            your contents goes here .. like <a>, <p> etc
+        </div>
+    </div>
+
+Options
+-------
+
+With these options you can crate customized grained effect , these are the option parameter you can change and the default values.
+
+     var options = {
+             animate: true,
+             patternWidth: 100,
+             patternHeight: 100,
+             grainOpacity: 0.05,
+             grainDensity: 1,
+             grainWidth: 1,
+             grainHeight: 1
+     };
+With animation true/false you can create textures with grain movement and a static one. The other value you can see the live in **[online generator](http://sarathsaleem.github.io/grained)**

grained/bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "Grained",
+  "main": "grained.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/sarathsaleem/grained",
+  "authors": [
+    "Sarath Saleem <https://github.com/sarathsaleem>"
+  ],
+  "description": "Add animated grain noise texture effect to your web content",
+  "keywords": [
+    "texture",
+    "grained",
+    "grain-effect",
+    "noise",
+    "noise-effect",
+    "generate-texture"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

grained/grained.js

@@ -0,0 +1,148 @@
+/*! Grained.js
+* Author : Sarath Saleem  - https://github.com/sarathsaleem
+* MIT license: http://opensource.org/licenses/MIT
+* GitHub : https://github.com/sarathsaleem/grained
+* v0.0.1
+*/
+(function (window, doc) {
+
+    "use strict";
+
+    function grained(ele, opt) {
+
+        var element = null,
+            elementId = null,
+            selectorElement = null;
+
+        if (typeof ele === 'string') {
+            element = doc.getElementById(ele.split('#')[1]);
+        }
+
+        if (!element) {
+            console.error('Grained: cannot find the element with id ' + ele);
+            return;
+        } else {
+            elementId = element.id;
+        }
+
+        //set style for parent
+        if (element.style.position !== 'absolute') {
+            element.style.position = 'relative';
+        }
+        element.style.overflow = 'hidden';
+
+        var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"];
+
+        //default option values
+        var options = {
+            animate: true,
+            patternWidth: 100,
+            patternHeight: 100,
+            grainOpacity: 0.1,
+            grainDensity: 1,
+            grainWidth: 1,
+            grainHeight: 1,
+            grainChaos: 0.5,
+            grainSpeed: 20
+
+        };
+
+        Object.keys(opt).forEach(function (key) {
+            options[key] = opt[key];
+        });
+
+
+        var generateNoise = function () {
+            var canvas = doc.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            canvas.width = options.patternWidth;
+            canvas.height = options.patternHeight;
+            for (var w = 0; w < options.patternWidth; w += options.grainDensity) {
+                for (var h = 0; h < options.patternHeight; h += options.grainDensity) {
+                    var rgb = Math.random() * 256 | 0;
+                    ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')';
+                    ctx.fillRect(w, h, options.grainWidth, options.grainHeight);
+                }
+            }
+            return canvas.toDataURL('image/png');
+        };
+
+        function addCSSRule(sheet, selector, rules, index) {
+            var ins = '';
+            if (selector.length) {
+                ins = selector + "{" + rules + "}";
+            } else {
+                ins = rules;
+            }
+
+            if ("insertRule" in sheet) {
+                sheet.insertRule(ins, index);
+            } else if ("addRule" in sheet) {
+                sheet.addRule(selector, rules, index);
+            }
+        }
+
+
+        var noise = generateNoise();
+
+        var animation = '',
+            keyFrames = ['0%:-10%,10%', '10%:-25%,0%', '20%:-30%,10%', '30%:-30%,30%', '40%::-20%,20%', '50%:-15%,10%', '60%:-20%,20%', '70%:-5%,20%', '80%:-25%,5%', '90%:-30%,25%', '100%:-10%,10%'];
+
+        var pre = prefixes.length;
+        while (pre--) {
+            animation += '@' + prefixes[pre] + 'keyframes grained{';
+            for (var key = 0; key < keyFrames.length; key++) {
+                var keyVal = keyFrames[key].split(':');
+                animation += keyVal[0] + '{';
+                animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');';
+                animation += '}';
+            }
+            animation += '}';
+        }
+
+        //add animation keyframe
+        var animationAdded = doc.getElementById('grained-animation');
+        if (animationAdded) {
+            animationAdded.parentElement.removeChild(animationAdded);
+        }
+        var style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation';
+        style.innerHTML = animation;
+        doc.body.appendChild(style);
+
+        //add custimozed style
+        var styleAdded = doc.getElementById('grained-animation-' + elementId);
+        if (styleAdded) {
+            styleAdded.parentElement.removeChild(styleAdded);
+        }
+
+        style = doc.createElement("style");
+        style.type = "text/css";
+        style.id = 'grained-animation-' + elementId;
+        doc.body.appendChild(style);
+
+        var rule = 'background-image: url(' + noise + ');';
+        rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;';
+        pre = prefixes.length;
+        if (options.animate) {
+            while (pre--) {
+                rule += prefixes[pre] + 'animation-name:grained;';
+                rule += prefixes[pre] + 'animation-iteration-count: infinite;';
+                rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;';
+                rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);';
+            }
+        }
+
+        //selecter element to add grains
+        selectorElement = '#' + elementId + '::before';
+
+
+        addCSSRule(style.sheet, selectorElement, rule);
+
+
+    }
+
+    window.grained = grained;
+    //END
+})(window, document);

index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="styles.css">
+        <script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
+    </head>
+    <body>
+        <div id="content">
+            <!-- deux svg pour pouvoir utiliser mix blend mode avec les histoires de stacking context -->
+            <svg id="stroke" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
+                <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
+                </path>
+            </svg>
+
+            <svg id="fill" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
+                <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
+                </path>
+            </svg>
+            <div id="buttons_container">
+                <!-- svg dans object pour pouvoir les manipuler avec css -->
+                <div class="mode active">
+                    <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
+                    <p>Terrain de vie</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
+                    <p>Proximité</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
+                    <p>Superposition</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
+                    <p>Puissance d'agir</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg>
+                    <p>Action</p>
+                </div>
+                <div class="mode">
+                    <svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
+                    <p>Doléancer</p>
+                </div>
+            </div>
+            <div id="BG_BG_BG"></div>
+            <div id="BG_BG_BG_tmp"></div>
+        </div>
+        <div id="grain-bg"></div>
+        <script src="grained/grained.js" defer></script>
+        <script src="background.js" defer></script>
+    </body>
+</html>

styles.css

@@ -0,0 +1,137 @@
+@charset "UTF-8";
+/* mix blend mode est dépendant du stacking context */
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 400;
+  src: url("assets/fonts/PublicSans-Regular.ttf") format("TrueType");
+}
+@font-face {
+  font-family: "Public";
+  font-style: normal;
+  font-weight: 300;
+  src: url("assets/fonts/PublicSans-Light.ttf") format("TrueType");
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Public", sans-serif;
+  font-weight: 400;
+}
+
+#content {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+#content svg {
+  width: 30%;
+  height: auto;
+}
+#content svg path {
+  cursor: pointer;
+}
+#content svg#fill {
+  fill: white;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+}
+#content svg#stroke {
+  position: absolute;
+  fill: none;
+  stroke: black;
+  stroke-width: 1px;
+}
+#content #buttons_container {
+  position: absolute;
+  bottom: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+#content #buttons_container .mode {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  margin: 0px 10px;
+  padding: 7px 15px;
+  padding-left: 10px;
+  border-radius: 50px;
+  cursor: pointer;
+  border: solid 0.8px rgba(0, 0, 0, 0.5);
+  transition: border 0.4s ease-in-out;
+  font-weight: 300;
+  font-size: 1rem;
+}
+#content #buttons_container .mode svg {
+  width: 28px;
+  height: auto;
+  margin-right: 10px;
+}
+#content #buttons_container .mode svg .thick {
+  transition: stroke-width 0.2s ease-in-out;
+  stroke-width: 0.8;
+  stroke: black;
+}
+#content #buttons_container .mode svg .thin {
+  transition: stroke-width 0.2s ease-in-out;
+  stroke-width: 0.5;
+  stroke: black;
+}
+#content #buttons_container .mode p {
+  height: fit-content;
+  margin-bottom: 3px;
+}
+#content #buttons_container .mode.active {
+  font-weight: 400;
+  border: solid 1.2px rgb(0, 0, 0);
+}
+#content #buttons_container .mode.active svg .thick {
+  stroke-width: 1.2;
+  stroke: black;
+}
+#content #buttons_container .mode.active svg .thin {
+  stroke-width: 0.6;
+  stroke: black;
+}
+#content #BG_BG_BG {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -1;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+#content #BG_BG_BG_tmp {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  z-index: -2;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#grain-bg {
+  position: absolute !important;
+  width: 100vw;
+  height: 100vh;
+}
+
+#grain-bg > * {
+  position: relative;
+}
+
+/*# sourceMappingURL=styles.css.map */

styles.scss

@@ -0,0 +1,153 @@
+/* mix blend mode est dépendant du stacking context */
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 400;
+    src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
+}
+
+@font-face {
+    font-family: 'Public';
+    font-style: normal;
+    font-weight: 300;
+    src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
+}
+
+
+
+
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Public', sans-serif;
+    font-weight: 400;
+}
+
+
+
+#content {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    svg {
+        width: 30%;
+        height: auto;
+        path {
+            cursor: pointer;
+        }
+    }
+
+    svg#fill {
+        fill: white;
+        mix-blend-mode: overlay;
+        opacity: 0.6;
+    }
+
+    svg#stroke {
+        position: absolute;
+        fill: none;
+        stroke: black;
+        stroke-width: 1px;
+    }
+
+    #buttons_container {
+        position: absolute;
+        bottom: 5vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1;
+        .mode {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: white;
+            margin: 0px 10px;
+            padding: 7px 15px;
+            padding-left: 10px;
+            border-radius: 50px;
+            cursor: pointer;
+            border: solid 0.8px rgba(0, 0, 0, 0.5);
+            transition: border 0.4s ease-in-out;
+            font-weight: 300;
+            font-size: 1rem;
+            svg {
+                width: 28px;
+                height: auto;
+                margin-right: 10px;
+                .thick {
+                    transition: stroke-width 0.2s ease-in-out;
+                    stroke-width: 0.8;
+                    stroke: black;
+                }
+                .thin {
+                    transition: stroke-width 0.2s ease-in-out;
+                    stroke-width: 0.5;
+                    stroke: black;
+                }
+            }
+            p {
+                height: fit-content;
+                margin-bottom: 3px;
+            }
+        }
+        .mode.active {
+            font-weight: 400;
+            border: solid 1.2px rgba(0, 0, 0, 1);
+            svg .thick {
+                stroke-width: 1.2;
+                stroke: black;
+            }
+            svg .thin {
+                stroke-width: 0.6;
+                stroke: black;
+            }
+        }
+    }
+    
+    #BG_BG_BG {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+    
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: -1;
+        opacity: 1;
+        transition: opacity 0.5s ease-in-out;
+    }
+    
+    #BG_BG_BG_tmp {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+    
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        z-index: -2;
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+    }
+
+
+}
+
+#grain-bg {
+    position: absolute !important;
+    width: 100vw;
+    height: 100vh;
+}
+
+#grain-bg > * {
+    position: relative;
+}