frontend fix

geovisto · May 1, 2024 · 3908868 · 3908868
1 parent 1d40482
commit 3908868
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/src/pages/index.css b/src/pages/index.css
@@ -13,8 +13,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  animation: mymoveopacity 5s infinite;
   z-index: 0;
+  opacity: 0;
+  transition: opacity 1s;
 }
 
 @keyframes mymoveopacity {
@@ -157,13 +158,14 @@
 .header__button__wrapper {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
-  gap: 3rem;
   padding-top: 2rem;
+  gap: 5%;
 }
 
 .btn-header {
+  width: 200px;
   min-width: 10rem;
   font-size: 20px;
   background-color: #819200;

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -20,33 +20,56 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 const HomepageHeader = () => {
     const { siteConfig } = useDocusaurusContext();
     var i = 0;
-    var slideInterval = 5000
+    var j = 0;
+    var slideInterval = 6000
     var images = []
-    var timeout
+    var timeoutBackground
+    var timeoutOpacity1
+    var timeoutOpacity2
+    var timeoutOpacity3
+    var opacity
+
 
     images.push('/img/slideshow/heat.png')
     images.push('/img/slideshow/connection.png')
     images.push('/img/slideshow/choro.png')
     images.push('/img/slideshow/tiles.png')
 
     const setBackground = () => {
-        clearTimeout(timeout);
+        clearTimeout(timeoutBackground);
         document.getElementById("background").style.backgroundImage = "url(" + images[i] + ")"; 
+        timeoutOpacity1 = setTimeout(function() {document.getElementById("background").style.opacity = '1';}, 0)
+        timeoutOpacity2 = setTimeout(function() {document.getElementById("background").style.opacity = '0';}, 5000)
+        timeoutOpacity3 = setTimeout(function() {document.getElementById("background").style.opacity = '1';}, 6000)
+        timeoutBackground = setTimeout(setBackground, slideInterval)
+
 
-        console.log(i)
+        console.log("setBackground")
+        console.log('i: '+ i)
         if (i < images.length-1) {
             i++;
         } else {
             i = 0;
         }
-        timeout = setTimeout(setBackground, slideInterval)
     }
 
+
+
+
+
     useEffect(() => {   
-        timeout = setTimeout(setBackground, slideInterval)
+        timeoutBackground = setTimeout(setBackground, slideInterval)
+        timeoutOpacity1 = setTimeout(function() {document.getElementById("background").style.opacity = '1';}, 0)
+        timeoutOpacity2 = setTimeout(function() {document.getElementById("background").style.opacity = '0';}, 5000)
+        timeoutOpacity3 = setTimeout(function() {document.getElementById("background").style.opacity = '1';}, 6000)
+
+
 
         return () => {
-            clearTimeout(timeout);
+            clearTimeout(timeoutBackground);
+            clearTimeout(timeoutOpacity1);
+            clearTimeout(timeoutOpacity2);
+            clearTimeout(timeoutOpacity3);
             console.log("cleaning up header");
         }
     },[]);