From 39088680889dba076e07ff8f5341d16b7ddbf522 Mon Sep 17 00:00:00 2001
From: Iva Utikalova <iva.utikiv@gmail.com>
Date: Thu, 2 May 2024 01:04:36 +0200
Subject: [PATCH] frontend fix

---
 src/pages/index.css |  8 +++++---
 src/pages/index.tsx | 37 ++++++++++++++++++++++++++++++-------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.css b/src/pages/index.css
index d3ba4f9..8f8bbb0 100644
--- 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
index b264a97..efe2090 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -20,9 +20,15 @@ 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')
@@ -30,23 +36,40 @@ const HomepageHeader = () => {
     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");
         }
     },[]);