feat: change waitlist to App Store

assets/css/style.css

@@ -203,7 +203,7 @@ em {
     display: none;
     color: #ffffff;
     background-color: var(--primary-color);
-    padding: 10px 20px;
+    padding: 12px 20px;
     margin: 2rem 0;
 }
 
@@ -548,3 +548,11 @@ em {
     list-style: square;
     line-height: 1.8rem;
 }
+
+#appstore {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    width: 180px;
+    border-radius: 0;
+    border: 0;
+}

src/_includes/layouts/base.liquid

@@ -30,7 +30,9 @@
               </ul>
             </div>
             <div class="c-navbar__right">
-              <button class="c-button c-button--cta-navbar" id="openModal">Join the waitlist</button>
+              <a href="https://testflight.apple.com/join/913htqtU" class="c-button c-button--cta-navbar">
+                  Join the TestFlight
+              </a>
             </div>
           </div>
         </nav>
@@ -45,81 +47,6 @@
                 <button id="submit" disabled>Submit</button>
             </div>
         </div>
-
-        <script>
-        const modal = document.getElementById('modal')
-        const openModal = document.getElementById('openModal')
-        const openModal2 = document.getElementById('openModal2')
-        const closeModal = document.getElementById('closeModal')
-
-        const emailForm = document.getElementById('email')
-        const submitButton = document.getElementById('submit')
-
-        function enableSubmit() {
-          submitButton.removeAttribute('disabled')
-        }
-
-        openModal.onclick = function() {
-            modal.style.display = 'block'
-
-            setTimeout(function() {
-              emailForm.focus()
-            }, 66)
-        }
-
-        openModal2.onclick = function() {
-            modal.style.display = 'block'
-
-            setTimeout(function() {
-              emailForm.focus()
-            }, 66)
-        }
-
-        closeModal.onclick = function() {
-          modal.style.display = 'none'
-        }
-
-        document.onclick = function () {
-          if (event.target === modal) {
-            modal.style.display = 'none'
-          }
-        }
-
-        document.addEventListener('keydown', function(e) {
-          if (e.key === 'Escape' || e.keyCode === 27) {
-            modal.style.display = 'none'
-          }
-        })
-
-        submitButton.onclick = function() {
-          if (!emailForm.value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-            window.alert("email doesnt seem valid")
-
-            return
-          }
-
-          const form = new FormData()
-
-          form.append('payload', emailForm.value)
-
-          fetch('https://flo.edgy0.workers.dev/', {
-            method: 'POST',
-            body: form
-          })
-          .then(res => res.text())
-          .then(text => {
-            window.alert(text)
-
-            modal.style.display = 'none'
-            emailForm.value = ''
-          })
-          .catch(err => {
-            window.alert("Something went wrong ", err.message)
-          })
-        }
-        </script>
     </main>
-
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>
   </body>
 </html>

src/index.liquid

@@ -7,7 +7,9 @@ layout: layouts/base
     <div>
         <h1>Meet flo</h1>
         <h3>An open source Navidrome client written in Swift.</h3>
-        <button class="c-button c-button--cta" id="openModal2">Join the waitlist</button>
+        <a href="https://apps.apple.com/id/app/flo-navidrome-client/id6529533140">
+            <img id="appstore" src="/assets/img/download-on-the-app-store.svg">
+        </a>
         <div class="c-hero__right">
             <img src="/assets/img/flo_hero.jpeg" alt="flo">
         </div>