slideshow

geovisto · May 1, 2024 · fc5c1e9 · fc5c1e9
1 parent c8ab7b4
commit fc5c1e9
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 19 deletions.
diff --git a/src/pages/index.css b/src/pages/index.css
@@ -3,18 +3,43 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+
+.background-container {
   height: 95vh;
+  background: url('/img/slideshow/marker.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: mymoveopacity 5s infinite;
+  z-index: 0;
+}
+
+@keyframes mymoveopacity {
+  0% { opacity: 0;}
+  25% { opacity: 1;}
+  50% { opacity: 1;}
+  75% { opacity: 1;}
+  100% { opacity: 0;}
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.header-container {
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  width: 100%;
+  text-align: center;
+  top: 25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+
 }
 
 .buttons {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,26 +10,58 @@ import { Button } from "react-bootstrap";
 import { Layers } from "../components/bootstrap/layers/layers";
 import { Research } from "../components/bootstrap/research/research";
 import { Tools } from "../components/bootstrap/tools/tools";
-import { Authors } from "../components/bootstrap/authors/authors";
-
-
+import { useEffect } from "react";
+import useBaseUrl from '@docusaurus/useBaseUrl';
 /**
  * This file contains implementation of landing page
  *
  * @author Tomas Koscielniak
  */
 const HomepageHeader = () => {
     const { siteConfig } = useDocusaurusContext();
+    var i = 0;
+    var slideInterval = 5000
+    var images = []
+    var timeout
+
+    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);
+        document.getElementById("background").style.backgroundImage = "url(" + images[i] + ")"; 
+
+        console.log(i)
+        if (i < images.length-1) {
+            i++;
+        } else {
+            i = 0;
+        }
+        timeout = setTimeout(setBackground, slideInterval)
+    }
+
+    useEffect(() => {   
+        timeout = setTimeout(setBackground, slideInterval)
+
+        return () => {
+            clearTimeout(timeout);
+            console.log("cleaning up header");
+        }
+    },[]);
+
     return (
-        <header className={clsx("hero heroBanner")}>
-            <div className="container header-container">
+        <header >
+            <div id="background" className="background-container">
+            </div>
+            <div className="header-container">
                 <img
                     src={GeovistoLogo}
                     alt={"logo"}
                     id="front_image"
                     className="pt-lg-5"
                 />
-                <p className="hero__subtitle">{siteConfig.tagline}</p>
                 <div className="header__button__wrapper">
                     <Link to="/docs/intro">
                         <Button variant="default" className="btn-header">Get started</Button>
@@ -38,14 +70,16 @@ const HomepageHeader = () => {
                         <Button variant="default" className="btn-header">Try Playground</Button>
                     </Link>
                 </div>
-
             </div>
         </header>
     );
 };
 
-export const Home = (): JSX.Element => (
-    <Layout
+export const Home = () => {
+    const { siteConfig } = useDocusaurusContext();
+
+    return (
+        <Layout
         title={`Home`}
         description="Description will go into a meta tag in <head />"
     >
@@ -55,6 +89,7 @@ export const Home = (): JSX.Element => (
                 <h1 className="w-100 title">
                     About Geovisto
                 </h1>
+                <h4>{siteConfig.tagline}</h4>
                 <div className="container-sm w-100">
                     Geovisto is a modular library written in TypeScript that
                     provides multiple layers for geospatial data visualization.
@@ -77,6 +112,7 @@ export const Home = (): JSX.Element => (
 
         </main>
     </Layout>
-);
+    )
+};
 
 export default Home;
diff --git a/static/img/slideshow/choro.jpg b/static/img/slideshow/choro.jpg
diff --git a/static/img/slideshow/choro.png b/static/img/slideshow/choro.png
diff --git a/static/img/slideshow/connection.png b/static/img/slideshow/connection.png
diff --git a/static/img/slideshow/dot.png b/static/img/slideshow/dot.png
diff --git a/static/img/slideshow/heat.png b/static/img/slideshow/heat.png
diff --git a/static/img/slideshow/marker.png b/static/img/slideshow/marker.png
diff --git a/static/img/slideshow/tiles.png b/static/img/slideshow/tiles.png