Website: add banner asking visitors to check out the redesign (#4872)

index.html

@@ -215,6 +215,7 @@
             <li class="navbar__nav-item"><a href="https://www.npmjs.com/package/simple-icons">NPM</a></li>
             <li class="navbar__nav-item"><a href="https://packagist.org/packages/simple-icons/simple-icons">Packagist</a></li>
         </ul>
+        <p class="redesign-banner">We're redesigning the website! Please <a href="https://simple-icons.github.io/simple-icons-website/">Check it out</a> and <a href="https://github.com/simple-icons/simple-icons/discussions/4865">Share you feedback</a>. <span>Hide this message <button id="hide-feedback-request-once">Once</button> or <button id="hide-feedback-request">Always</button> | <button id="redirect-to-redesign">Redirect automatically</button></span></p>
     </header>
     <main role="main">
         <p class="hero">{{ iconCount }} Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>

site_script.js

@@ -191,4 +191,58 @@
   $orderByRelevance.addEventListener('click', function() {
     selectOrdering($orderByRelevance);
   });
+
+  /* Redesign */
+
+  var $banner = document.querySelector('.redesign-banner'),
+      $redirectAutomatically = document.getElementById('redirect-to-redesign'),
+      $hideOnce = document.getElementById('hide-feedback-request-once'),
+      $hideAlways = document.getElementById('hide-feedback-request');
+
+  var redesignUrl = 'https://simple-icons.github.io/simple-icons-website/',
+      hideBannerAlwaysIdentifier = 'hide-banner',
+      redirectAutomaticallyIdentifier = 'redirect-to-redesign';
+
+  $redirectAutomatically.addEventListener('click', function() {
+    var redirect = true;
+    if (localStorage) {
+      var currentVal = localStorage.getItem(redirectAutomaticallyIdentifier);
+      if (currentVal === 'true') {
+        redirect = false;
+      }
+
+      localStorage.setItem(redirectAutomaticallyIdentifier, redirect);
+    }
+
+    if (redirect) {
+      window.location.replace(redesignUrl);
+    } else {
+      $redirectAutomatically.innerHTML = "Redirect automatically";
+    }
+  });
+  $hideOnce.addEventListener('click', function () {
+    $banner.classList.add('hidden');
+  });
+  $hideAlways.addEventListener('click', function () {
+    if (localStorage) {
+      localStorage.setItem(hideBannerAlwaysIdentifier, true);
+    }
+
+    $banner.classList.add('hidden');
+  });
+
+  if (localStorage) {
+    var redirect = localStorage.getItem(redirectAutomaticallyIdentifier);
+    if (redirect === 'true') {
+      $redirectAutomatically.innerHTML = "Disable redirect";
+      if (document.referrer !== redesignUrl) {
+        window.location.replace(redesignUrl);
+      }
+    }
+
+    var hide = localStorage.getItem(hideBannerAlwaysIdentifier);
+    if (hide) {
+      $banner.classList.add('hidden');
+    }
+  }
 })( document );

stylesheet.css

@@ -351,6 +351,31 @@ a.share-button {
   padding: 1.5rem 0 1.5rem 1.5rem;
 }
 
+.redesign-banner {
+  background-color: #565f63;
+  color: #FFF;
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+}
+.redesign-banner a {
+  color: #0096ee;
+}
+.redesign-banner a:focus, .redesign-banner a:hover,
+.redesign-banner button:focus, .redesign-banner button:hover {
+  text-decoration: underline;
+}
+.redesign-banner span {
+  float: right
+}
+.redesign-banner button {
+  border: none;
+  background-color: transparent;
+  color: #0096ee;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
 .hidden {
   display: none;
 }