From 5476cf39e94db6be1b4247c2f201c8cd0468985e Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Fri, 7 Jun 2024 18:04:39 -0500
Subject: [PATCH] modal for "continue with confidence"

---
 _includes/fancybutton.html   |  3 +-
 _includes/modal.html         | 42 ------------------
 _includes/sideload.html      | 32 ++++++++++++++
 _scss/helpers/utilities.scss |  8 ----
 _scss/helpers/variables.scss |  2 +-
 _scss/libs/micromodal.scss   | 51 ++++++++++++----------
 _scss/pages/home.scss        | 82 +-----------------------------------
 apps.html                    |  7 +--
 assets/js/main.js            |  8 ++--
 index.html                   |  4 +-
 maps.html                    |  4 +-
 11 files changed, 77 insertions(+), 166 deletions(-)
 delete mode 100644 _includes/modal.html
 create mode 100644 _includes/sideload.html

diff --git a/_includes/fancybutton.html b/_includes/fancybutton.html
index 9ae1d85..e5e7adc 100644
--- a/_includes/fancybutton.html
+++ b/_includes/fancybutton.html
@@ -1,4 +1,5 @@
-<a class="btn-main btn-slim" href="{{ include.href }}">
+<a class="btn-main btn-slim" href="{{ include.href }}" data-micromodal-trigger="{{ include.modal }}" %}
+>
     <div class="btn-split">
         <div class="btn-logo">
             <img class="btn-android" src="{{ site.baseurl}}/assets/images/btr-android.svg">
diff --git a/_includes/modal.html b/_includes/modal.html
deleted file mode 100644
index 56da990..0000000
--- a/_includes/modal.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
-  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
-    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
-      <header class="modal__header">
-        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
-      </header>
-      <main class="modal__content" id="product-modal-content">
-        <div class="modal__content__header">
-          <div class="header__logo">
-            <img src="{{ site.baseurl }}{{ page_data.modal.butter_app_logo }}" alt="{% t modal.butter_app_logo_alt %}" />
-          </div>
-          <div class="header__text">
-            <h2 class="modal__title ls-40" id="product-modal-title">{% t modal.title %}</h2>
-            <ul class="info__list">
-              {% for item in site.translations[site.lang].modal.info_list %}
-                <li>{{ item }}</li>
-              {% endfor %}
-            </ul>
-          </div>
-          <div class="header__btn">
-            <a class="btn-main" href="{{ site.baseurl }}{{ page_data.modal.button_url }}">{% t modal.button_text %}</a>
-          </div>
-        </div>
-        <div class="modal__content__description">
-          <p class="content-text ls-40">{% t modal.text %}</p>
-        </div>
-        <div class="modal__content__slider">
-          <div class="screens-slider">
-            {% for slide in page_data.modal.slider_list %}
-              <div class="slider-item">
-                <img src="{{ site.baseurl }}{{ slide }}" alt="slider image" />
-              </div>
-            {% endfor %}
-          </div>
-        </div>
-      </main>
-      <footer class="modal__footer">
-        <p class="ls-40">{% t modal.warning %}</p>
-      </footer>
-    </div>
-  </div>
-</div>
diff --git a/_includes/sideload.html b/_includes/sideload.html
new file mode 100644
index 0000000..0f7b94e
--- /dev/null
+++ b/_includes/sideload.html
@@ -0,0 +1,32 @@
+<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
+            <main class="modal__content" id="product-modal-content">
+                <div class="modal__content__header">
+                    <div class="header__text">
+                        <h2 class="modal__title ls-40" id="product-modal-title">Continue With Confidence</h2>
+                    </div>
+                </div>
+                <div class="modal__content__description">
+                    <p class="modal__text ls-40">
+                        Downloading apps from unknown sources can expose your device to malicious software. For this
+                        reason, your phone will warn against it.
+                    </p>
+                    <p class="modal__text ls-40">
+                        The Butter App Store and the apps in it are checked for malware before they are shared. Consider
+                        it a safe source.
+                    </p>
+                </div>
+                <a class="modal__close" aria-label="Close modal" data-micromodal-close>
+                    Go Back
+                </a>
+                <hr style="color: #00000033">
+                <a class="modal__close modal__continue"
+                    onclick="MicroModal.close(); window.location='{{ site.baseurl }}/assets/download/butter.apk'"
+                    aria-label="Download App Store">
+                    Continue to Download
+                </a>
+            </main>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/_scss/helpers/utilities.scss b/_scss/helpers/utilities.scss
index 49a4a16..59065b5 100644
--- a/_scss/helpers/utilities.scss
+++ b/_scss/helpers/utilities.scss
@@ -94,19 +94,11 @@ body {
   }
 }
 
-
 .btn-main.btn-slim {
   padding: .5em 2.5em;
 }
 
-
 // Text utility classes
-.content-text {
-  font-family: $text-font-family;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
 .caption {
   color: $dark-gray;
   font-family: $text-font-family;
diff --git a/_scss/helpers/variables.scss b/_scss/helpers/variables.scss
index c59d3a7..f6b99da 100644
--- a/_scss/helpers/variables.scss
+++ b/_scss/helpers/variables.scss
@@ -11,5 +11,5 @@ $royal-blue: #6166E9;
 
 // Typography
 $base-font-family: 'Poppins', sans-serif !default;
-$text-font-family: 'Prata', serif;
+$text-font-family: 'Poppins', sans-serif !default;
 $footer-font-family: 'Inter', sans-serif;
diff --git a/_scss/libs/micromodal.scss b/_scss/libs/micromodal.scss
index 9e18067..c2433c7 100644
--- a/_scss/libs/micromodal.scss
+++ b/_scss/libs/micromodal.scss
@@ -16,47 +16,54 @@
 
 .modal__container {
   background-color: #fff;
-  padding: 30px;
-  max-width: 1070px;
-  max-height: 100vh;
-  border-radius: 4px;
-  overflow-y: auto;
-  box-sizing: border-box;
+  margin: 10px;
+  max-width: 500px;
+  border-radius: 21px;
 }
 
-.modal__header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.modal__title {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 600;
-  font-size: 1.75em;
-  line-height: 1.25;
-  color: $dark-gray;
-  box-sizing: border-box;
+.header__text {
+  margin: 0 20px;
+  h2.modal__title {
+    margin: 30px auto 20px auto;
+    font-weight: 700;
+    font-size: 24px;
+    color: black;
+    box-sizing: border-box;
+    text-align: center;
+  }
 }
 
 .modal__close {
+  margin: 20px;
   cursor: pointer;
   background: transparent;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  display: block;
   border: 0;
 }
 
-.modal__header .modal__close:before { content: "\2715"; font-size: 24px; }
+.modal__continue {
+  color: #6166E9;
+}
 
 .modal__content {
   margin-top: 2rem;
-  margin-bottom: 2rem;
   line-height: 1.5;
   @media (max-width: 768px) {
     margin-top: 1rem;
   }
 }
 
+.modal__content__description {
+  margin: 0 20px;
+  p {
+    font-family: $text-font-family;
+    font-size: 16px;
+    margin: 20px 0;
+  }
+}
 
 /**************************\
   Demo Animation Style
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 2784d3e..6589d69 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -184,7 +184,7 @@ a:active {
     font-weight: 500;
     margin: 30px 0 15px 0;
   }
-  p {
+  p.informational-text {
     font-size: 14px;
     font-weight: 400;
     margin: 10px 0;
@@ -306,7 +306,6 @@ a:active {
   width: auto;
 }
 
-
 // -------------------------
 // Footer Styles
 // -------------------------
@@ -315,85 +314,6 @@ a:active {
   padding: 35px 0;
 }
 
-
-// -------------------------
-// Modal Styles
-// -------------------------
-.modal__content {
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    @media (max-width: 768px) {
-      flex-direction: column;
-    }
-    .header__logo {
-      img {
-        display: block;
-        max-width: 100%;
-        @media (max-width: 768px) {
-          max-width: 120px;
-          width: 100%;
-        }
-      }
-    }
-    .header__text {
-      margin: 0 30px;
-      max-width: 430px;
-      width: 100%;
-      @media (max-width: 768px) {
-        margin: 20px 0;
-      }
-      .info__list {
-        font-size: 14px;
-        list-style: none;
-        margin-top: 10px;
-        padding: 0;
-      }
-    }
-    .header__btn {
-      @media (min-width: 769px) {
-        margin-left: auto;
-      }
-      .btn-main {
-        @media (max-width: 992px) {
-          font-size: 10px;
-        }
-      }
-    }
-  }
-
-  &__description {
-    margin: 30px 0;
-  }
-
-  &__slider {
-    //to prevent slider jump
-    @media (min-width: 1200px) {
-      min-height: 586px;
-      height: 100%;
-    }
-    .slider-item {
-      margin: 0 10px;
-    }
-    img {
-      max-width: 100%;
-      @media (max-width: 768px) {
-        margin: 0 auto;
-      }
-    }
-  }
-}
-
-.modal__footer {
-  p {
-    font-size: 14px;
-    a {
-      color: inherit;
-    }
-  }
-}
-
-
 // -------------------------
 // Slider Styles
 // -------------------------
diff --git a/apps.html b/apps.html
index d6b057a..f0db9bd 100644
--- a/apps.html
+++ b/apps.html
@@ -4,16 +4,17 @@ breadcrumb: "App Store"
 ---
 
 <!-- Custom style= makes the image line up with the icon. -->
-<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero" style="max-width: 473px; display: block; margin: 0 auto;">
+<img src="{{ site.baseurl }}/assets/images/app-store-top.png" alt="App Store icon samples" class="hero"
+    style="max-width: 473px; display: block; margin: 0 auto;">
 <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Butter Tile" class="app-tile">
 
 <h1>Discover the Butter App Store</h1>
 <p class="subtitle">Featuring free, ad-free Android apps that use less internet and less battery</p>
 
 <div class="btn-container">
-    {% assign apk_url = site.baseurl | append: "/assets/download/butter.apk" %}
-    {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href=apk_url %}
+    {% include fancybutton.html main_cta="Download App Store" sub_cta="Less than 10 MB" href="#" modal="product-modal" %}
 </div>
+{% include sideload.html %}
 
 <a class="btn-secondary" href="{{ site.base_url }}/fdroid-webdash/">View in Browser</a>
 
diff --git a/assets/js/main.js b/assets/js/main.js
index 0fe5213..6fe59ee 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -29,9 +29,11 @@ $(document).ready(function(){
 
 // Prevent default for modal trigger button
 const btnModal = document.querySelector('.btn-modal');
-btnModal.addEventListener('click', (event) => {
-  event.preventDefault();
-});
+if (btnModal) {
+  btnModal.addEventListener('click', (event) => {
+    event.preventDefault();
+  });
+}
 
 // If #usb-butter exists and a request to thishost.tld/usb-butter returns status 200
 // change display of #usb-butter to inherit
diff --git a/index.html b/index.html
index 70ff86c..f7cb03d 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,4 @@ layout: default
       </div>
     </a>
   </div>
-</div>
-
-{% include modal.html %}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/maps.html b/maps.html
index 5ecaf6c..6941d51 100644
--- a/maps.html
+++ b/maps.html
@@ -15,11 +15,11 @@ breadcrumb: "Offline Maps"
 </div>
 
 <h2>About OsmAnd</h2>
-<p>OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
+<p class="informational-text">OsmAnd allows you to navigate taking into account the preferred roads and vehicle dimensions. Plan routes based on
     inclines and record GPX tracks without an internet connection. OsmAnd is an open source app. It does not collect
     user data and you decide what data the app will have access to.</p>
 <h2>Map Files</h2>
-<p>Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
+<p class="informational-text">Download map files for your region. To import a map file into OsmAnd, locate the file in your device downloads. Then
     open it with the OsmAnd app.</p>
 
 <div class="filelist">