menus responsive (de sm desktop à large desktop)

assets/pictos/action-3.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="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="11"
+        x2="17.5"
+        y2="24" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="11"
+        x2="17.5"
+        y2="24"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="11"
+        x2="17.5"
+        y2="24"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="11"
+        x2="17.5"
+        y2="24"
+        transform="rotate(135, 17.5, 17.5)" />
+
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(45) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(90) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(135) translate(-15 0)" />
+        
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(180) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(225) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(270) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(315) translate(-15 0)" />
+    </g> 
+</svg>

assets/pictos/action-4.svg

@@ -0,0 +1,102 @@
+<?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">  
+    <line
+        class="thin"
+        x1="17.5"
+        y1="10"
+        x2="17.5"
+        y2="25" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="10"
+        x2="17.5"
+        y2="25"
+        transform="rotate(45, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="10"
+        x2="17.5"
+        y2="25"
+        transform="rotate(90, 17.5, 17.5)" />
+    <line
+        class="thin"
+        x1="17.5"
+        y1="10"
+        x2="17.5"
+        y2="25"
+        transform="rotate(135, 17.5, 17.5)" />
+
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(45) translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(90) translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(135) translate(-15 0)" />
+        
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(180) translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(225) translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(270) translate(-15 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5"
+        transform-origin="center"
+        transform="rotate(315) translate(-15 0)" />
+    </g> 
+</svg>

assets/pictos/action-5.svg

@@ -0,0 +1,81 @@
+<?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="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2.5" />
+
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(45) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(90) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(135) translate(-15 0)" />
+        
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(180) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(225) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(270) translate(-15 0)" />
+    <line
+        class="thick"
+        x1="15"
+        y1="17.5"
+        x2="20"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(315) translate(-15 0)" />
+    </g> 
+</svg>

assets/pictos/action-6.svg

@@ -0,0 +1,64 @@
+<?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="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="3.5" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2"
+        transform-origin="center"
+        transform="translate(0 -12)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2"
+        transform-origin="center"
+        transform="translate(0 12)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2"
+        transform-origin="center"
+        transform="translate(-12 0)" />
+    <circle
+        class="circle-fill"
+        fill="black"
+        cx="17.5"
+        cy="17.5"
+        r="2"
+        transform-origin="center"
+        transform="translate(12 0)" />
+
+    <line
+        class="thin"
+        x1="3"
+        y1="17.5"
+        x2="32"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(45)" />
+    <line
+        class="thin"
+        x1="3"
+        y1="17.5"
+        x2="32"
+        y2="17.5"
+        transform-origin="center"
+        transform="rotate(135)" />
+    </g> 
+</svg>

background.js

@@ -33,6 +33,7 @@ document.querySelectorAll('.mode').forEach(function(node, index) {
 // pb si on clique plusieurs fois d'affilé, revient pas sur les bonnes couleurs
 // le passage entre toutes les couleurs quand le diffAmount est élevé n'est pas bien
 //      -> préférer ajouter un rectangle de la bonne couleur et lui augmenter l'opacité
+//      -> ou peut-être changer le fond en css ?
 
 function changeColors(diffAmount) {
     let originColor = colors.bg.h,
@@ -110,7 +111,7 @@ function toggleMode(direction) {
 }
 
 
-// DEUXIEME TEST DE COULEURS
+// COULEURS DE FOND
 // basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp
 
 // ajouter un grain fixe : cf

index.html

@@ -61,7 +61,7 @@
                 </div>
             </div>
             <div class="mode">
-                <svg data-src="assets/pictos/action-2.svg" data-cache="disabled"></svg>
+                <svg data-src="assets/pictos/action-6.svg" data-cache="disabled"></svg>
                 <div class="mode_container">
                     <p>Action</p>
                 </div>