Add popup to pro site

docs/_layouts/default.html

@@ -10,6 +10,15 @@
     {% seo %}
   </head>
 
+<div id="popup-overlay" class="popup-overlay"></div>
+<div id="popup-banner" class="popup-banner-hidden">
+    <button class="popup-close-button" id="close-popup">✖</button>
+    <p class="pro-cta">Check out the new <a href="https://pro.freemusicdemixer.com" target="_blank">PRO site</a> for enhanced demixing!</p>
+    <p class="pro-promo">Use promo code LAUNCH10 for 100% off until March 31!</p>
+    <a href="https://pro.freemusicdemixer.com" target="_blank"><img src="/assets/images/popup_pro.webp" alt="pro-freemusicdemixer-logo" height="256px"/></a>
+    <p class="pro-signup-cta"><a href="https://docs.google.com/forms/d/e/1FAIpQLSek_QU_BGd7CL2BLVOLDs7JmTZzcLKJiK5k4ysxoCEMjEGrtA/viewform?usp=sf_link" target="_blank">Sign up to the mailing list</a> for promo codes, special offers, and more!</p>
+</div>
+
 <script src="/banner.js"></script>
 <div id="sticky-banner" class="sticky-banner" style="display: none;">
     <div class="banner-content">
@@ -30,7 +39,7 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
         <h2>{{ site.human_description | default: site.github.project_tagline }}</h2>
         <section id="downloads">
           <a href="{{ '/' | relative_url }}" class="btn btn-github">Home</a>
-          <a href="{{ '/pro' | relative_url }}" class="btn btn-gold-github">PRO</a>
+          <a href="https://pro.freemusicdemixer.com" class="btn btn-gold-github">PRO</a>
           <a href="{{ '/about' | relative_url }}" class="btn btn-github">About</a>
           <a href="{{ '/blog' | relative_url }}" class="btn btn-github">Blog</a>
         </section>

docs/assets/css/style.scss

@@ -888,3 +888,96 @@ input[type="file"]:disabled, label:disabled {
 .styled-link:hover {
     text-decoration: none; /* Ensure the underline doesn't appear on hover */
 }
+
+.popup-banner-hidden {
+    display: none;
+}
+
+.popup-banner-shown {
+    display: flex;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: auto; /* adjust width as necessary */
+    max-width: 500px; /* max-width for responsiveness */
+    background: #ffffff;
+    color: black;
+    font-size: 24px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    z-index: 1001;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;
+    // center justify text
+    text-align: center;
+}
+
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.75);
+    z-index: 1000;
+    display: none;
+}
+
+.popup-overlay-shown {
+    display: block;
+}
+
+.popup-close-button {
+    background: none;
+    border: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 24px;
+}
+
+.pro-cta {
+    font-size: larger; /* or you could use a specific font size like 1.5em */
+    margin-bottom: 5px;
+}
+
+.pro-promo {
+    margin-top: 5px;
+    color: green;
+    font-weight: bold; /* Bold links */
+}
+
+.pro-signup-cta {
+    font-size: large; /* or the specific size you want */
+}
+
+/* Styles for smaller screens */
+@media (max-width: 320px) { /* iPhone SE width */
+  #popup-banner {
+    width: 90%; /* Reduce width to 90% of the screen size */
+    /* Adjust the font size for all child paragraphs */
+    .pro-cta {
+      font-size: 18px;
+    }
+    .pro-promo {
+      font-size: 14px;
+    }
+    .pro-signup-cta {
+      font-size: 12px;
+    }
+    /* Adjust the height of the image for smaller screens */
+    img {
+      height: 128px; /* Adjust the image height */
+    }
+  }
+}
+
+@media (max-width: 568px) { /* Larger phones */
+  #popup-banner {
+    width: 80%; /* Slightly larger width than for the smallest screens */
+    /* Other styles as necessary */
+  }
+}

docs/banner.js

@@ -16,4 +16,30 @@ document.addEventListener("DOMContentLoaded", function() {
     } else {
         console.error('Dismiss button not found');
     }
+
+    const popupBanner = document.getElementById('popup-banner');
+    const popupOverlay = document.getElementById('popup-overlay');
+    const closeButton = document.getElementById('close-popup');
+
+    // Initialize shouldShowPopup based on sessionStorage
+    let shouldShowPopup = !sessionStorage.getItem('popupDismissed');
+
+    // Function to hide the popup and overlay
+    function hidePopup() {
+        popupBanner.classList.remove('popup-banner-shown');
+        popupOverlay.classList.remove('popup-overlay-shown');
+        shouldShowPopup = false; // Update the flag so it won't show again
+        sessionStorage.setItem('popupDismissed', 'true');
+    }
+
+    window.addEventListener('scroll', () => {
+        let scrolledPercentage = (window.scrollY / (document.body.offsetHeight - window.innerHeight)) * 100;
+        if (scrolledPercentage > 30 && shouldShowPopup) { // Trigger at 30% scroll
+            popupBanner.classList.add('popup-banner-shown');
+            popupOverlay.classList.add('popup-overlay-shown');
+        }
+    });
+
+    closeButton.addEventListener('click', hidePopup);
+    popupOverlay.addEventListener('click', hidePopup);
 });

docs/service-worker.js

@@ -37,8 +37,19 @@ self.addEventListener("fetch", (event) => {
   // Check if the request is for a .bin file
   if (event.request.url.endsWith('.bin')) {
     event.respondWith(
-      caches.match(event.request)
-        .then((response) => response || fetch(event.request))
+      caches.open(CACHE_NAME).then(cache => {
+        return cache.match(event.request).then(response => {
+          if (response) {
+            // Return the cached response if found
+            return response;
+          }
+          // Otherwise fetch from the network, cache the response, and return it
+          return fetch(event.request).then(networkResponse => {
+            cache.put(event.request, networkResponse.clone());
+            return networkResponse;
+          });
+        });
+      })
     );
   } else {
     // For non-.bin files, just fetch from the network