From b250d9d0cb153fcfe916e49f472f045c0091c2b0 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Tue, 28 Mar 2023 14:57:57 +0200
Subject: [PATCH] =?UTF-8?q?menus=20responsive=20(de=20sm=20desktop=20?=
 =?UTF-8?q?=C3=A0=20large=20desktop)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/pictos/action-3.svg | 108 +++++++++++++++++++++++++++++++++++++
 assets/pictos/action-4.svg | 102 +++++++++++++++++++++++++++++++++++
 assets/pictos/action-5.svg |  81 ++++++++++++++++++++++++++++
 assets/pictos/action-6.svg |  64 ++++++++++++++++++++++
 background.js              |   3 +-
 index.html                 |   2 +-
 6 files changed, 358 insertions(+), 2 deletions(-)
 create mode 100644 assets/pictos/action-3.svg
 create mode 100644 assets/pictos/action-4.svg
 create mode 100644 assets/pictos/action-5.svg
 create mode 100644 assets/pictos/action-6.svg

diff --git a/assets/pictos/action-3.svg b/assets/pictos/action-3.svg
new file mode 100644
index 0000000..1f26a28
--- /dev/null
+++ b/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>
diff --git a/assets/pictos/action-4.svg b/assets/pictos/action-4.svg
new file mode 100644
index 0000000..256574e
--- /dev/null
+++ b/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>
diff --git a/assets/pictos/action-5.svg b/assets/pictos/action-5.svg
new file mode 100644
index 0000000..c3ca0c2
--- /dev/null
+++ b/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>
diff --git a/assets/pictos/action-6.svg b/assets/pictos/action-6.svg
new file mode 100644
index 0000000..836bec7
--- /dev/null
+++ b/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>
diff --git a/background.js b/background.js
index a9026ce..04bee54 100644
--- a/background.js
+++ b/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
diff --git a/index.html b/index.html
index ea54a2b..5aa53e1 100644
--- a/index.html
+++ b/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>