From e2de50e17b8e692a9042098aee42aab53fa53070 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 1 Jul 2022 15:41:02 -0400
Subject: [PATCH] Word carousel... currently random.

---
 src/layouts/index.html           |  2 +-
 src/layouts/partials/footer.html | 67 ++++++++++++++++++++++++++++++++
 src/static/css/style.css         | 44 +++++++++++++++++++++
 3 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index e23df97..fc3ca6f 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -7,7 +7,7 @@
     <div class="row hero my-auto">
       <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-6 col-sm-12">
         <div style="margin-top:auto; margin-bottom:auto;">
-          <h1 class="display-1 mb-4"><span class="yellow">Equitable</span> Open&#8208;Source for web3</h1>
+          <h1 class="display-1 mb-4"><span class="yellow">Equitable</span> Open&#8208;Source for <span class="verb">web3</span></h1>
           <p class="mb-5 fs-sm-5 fs-lg-6 lead">The tools that build the internet have steeped too long. For the past two
             decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never
             thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index a4f3a27..1bfda96 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -82,6 +82,8 @@
     </div>
   </div>
 
+  <script src="js/classListShim.js"></script>
+
   <!-- JavaScript Bundle with Popper -->
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
@@ -150,3 +152,68 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
 
     gtag('config', 'G-Q3M5LVH76F');
   </script>
+
+  <script>
+        var words = (function(){
+    var words = [
+        'web',
+        'web3',
+        'games',
+        'AI',
+        'automation',
+        'data',
+        'ML',
+        'YOU'
+        ],
+      el = document.querySelector('.verb'),
+      currentIndex,
+      currentWord,
+      prevWord,
+      duration = 3000;
+    var _getIndex = function(max, min){
+      currentIndex = Math.floor(Math.random() * (max - min + 1)) + min;
+      //Generates a random number between beginning and end of words array
+      return currentIndex;
+    };
+    var _getWord = function(index){
+      currentWord = words[index];
+      return currentWord;
+    };
+    var _clear = function() {
+      setTimeout(function(){
+        el.className = 'verb';
+      }, duration/4);
+    };
+    var _toggleWord = function(duration){
+      setInterval(function(){
+        //Stores value of previous word
+        prevWord = currentWord;
+        //Generate new current word
+        currentWord = words[_getIndex(words.length-1, 0)];
+        //Generate new word if prev matches current
+        if(prevWord === currentWord){
+          currentWord = words[_getIndex(words.length-1, 0)];
+        }
+        //Swap new value
+        el.innerHTML = currentWord;
+        //Clear class styles
+        _clear();
+        //Fade in word
+        el.classList.add(
+          'js-block',
+          'js-fade-in-verb'
+          );
+      }, duration);
+    };
+    var _init = function(){
+      _toggleWord(duration);
+    };
+    //Public API
+    return {
+      init : function(){
+        _init();
+      }
+    };
+    })();
+    words.init();
+  </script>
diff --git a/src/static/css/style.css b/src/static/css/style.css
index f8debed..57be1ef 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -517,3 +517,47 @@ For authenticated users:
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B3033'%3e%3cpath fill-rule='evenodd' d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3e%3c/svg%3e");
         transform: rotate(90deg);
       }
+
+      /* CSS for text cycling */
+
+      @-moz-keyframes
+      fade-it { 0% {
+      opacity:0
+      }
+      100% {
+      opacity:1
+      }
+      }
+      @-webkit-keyframes
+      fade-it { 0% {
+      opacity:0
+      }
+      100% {
+      opacity:1
+      }
+      }
+      @keyframes
+      fade-it { 0% {
+      opacity:0
+      }
+      100% {
+      opacity:1
+      }
+      }
+      .js-fade-in-verb {
+        animation-name: fade-it;
+        animation-duration: 1s;
+        animation-fill-mode: forwards;
+        -webkit-animation-name: fade-it;
+        -webkit-animation-duration: 1s;
+        -webkit-animation-fill-mode: forwards
+      }
+      .verb.js-block { display: inline-block }
+      .verb.js-hide {
+        display: none;
+        opacity: 0
+      }
+      .verb {
+        display: inline-block;
+        visibility: visible;
+      }