first commit

2023-03-15 15:31:55 +01:00
commit bf635fea29
52 changed files with 1391 additions and 0 deletions
@@ -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%)
+`;