feat: add /about page

kepelet · Sep 13, 2024 · 7710bda · 7710bda
1 parent 3d90f52
commit 7710bda
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 104 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -518,3 +518,33 @@ em {
         border-radius: 10px;
     }
 }
+
+.l-about {
+    padding: 1.8rem;
+}
+
+.l-about__content {
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+}
+
+.l-about h1 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 3rem;
+}
+
+.l-about h3 {
+    font-size: 2rem;
+}
+
+.l-about ul {
+    margin-top: 2rem;
+}
+
+.l-about li {
+    margin-left: 1.5rem;
+    margin-bottom: 0.5rem;
+    list-style: square;
+    line-height: 1.8rem;
+}
diff --git a/src/_includes/layouts/base.liquid b/src/_includes/layouts/base.liquid
@@ -16,7 +16,108 @@
 
   <body>
     <main class="l-container">
-      {{ content }}
+        <nav class="c-navbar">
+          <div class="c-navbar__wrapper">
+            <div class="c-navbar__left">
+              <h2><a href="/">flo</a></h2>
+            </div>
+            <div class="c-navbar__center">
+              <ul>
+                <li><a href="#features">Features</a></li>
+                <li><a href="#faq">FAQ</a></li>
+                <li><a target="_blank" rel="noopener noreferer" href="https://github.com/kepelet/flo">Source Code</a></li>
+                <li><a target="_blank" rel="noopener noreferer" href="https://github.com/orgs/kepelet/projects/1/views/1">Roadmap</a></li>
+              </ul>
+            </div>
+            <div class="c-navbar__right">
+              <button class="c-button c-button--cta-navbar" id="openModal">Join the waitlist</button>
+            </div>
+          </div>
+        </nav>
+        {{ content }}
+        <div class="js-modal" id="modal">
+            <div class="js-modal__content">
+                <span class="js-modal__close" id="closeModal">&times;</span>
+                <h2>Join the waitlist</h2>
+                <p>Currently flo is in early preview and we'll let you know when we're on the App Store.</p>
+                <input id="email" type="email" placeholder="john@doe.com" required>
+                <div class="cf-turnstile" data-callback="enableSubmit" data-sitekey="0x4AAAAAAAi7bs0DROJL1xPi" data-size="flexible"></div>
+                <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>

diff --git a/src/about.liquid b/src/about.liquid
@@ -0,0 +1,27 @@
+---
+title: About flo
+layout: layouts/base
+---
+
+<div class="l-about">
+    <div class="l-about__content">
+        <h1>About flo</h1>
+        <p>flo is made with ♥️ by the <a href="https://github.com/kepelet">Kelompok Penerbang Walet (Kepelet)</a> and is mostly maintained by <a href="https://github.com/faultables">faultables.</a></p>
+    </div>
+
+    <div class="l-about__content">
+        <h3>flo for iOS Privacy Policy</h3>
+        <br>
+        <p>The flo for iOS app does not collect or process any personal information from its users. The app is used to connect to third-party Navidrome servers that may or may not collect personal information and are not covered by this privacy policy.</p>
+    </div>
+
+    <div class="l-about__content">
+        <h3>Licensing</h3>
+        <ul>
+            <li><a href="https://github.com/Alamofire/Alamofire">Alamofire</a> - MIT license
+            <li><a href="https://github.com/kishikawakatsumi/KeychainAccess">KeychainAccess</a> - MIT license
+            <li><a href="https://icons8.com/illustrations/illustration/jumble-travel-destination-hand-pointing-to-a-globe">Travel destination, hand pointing to a globe</a> illustration by <a href="https://icons8.com/illustrations/author/RogqKjMRAQ79">xopolin</a> from <a href="https://icons8.com/illustrations">Ouch!</a></li>
+            <li><a href="https://icons8.com/illustrations/illustration/jumble-music-streaming-services-with-vintage-ambience-bust-sculpture-and-gramophone-1">Music streaming services with vintage ambience, bust sculpture and gramophone</a> illustration by <a href="https://icons8.com/illustrations/author/259416">Marina Green</a> from <a href="https://icons8.com/illustrations">Ouch!</a></li>
+        </ul>
+    </div>
+</div>
diff --git a/src/index.liquid b/src/index.liquid
@@ -3,25 +3,6 @@ title: Home
 layout: layouts/base
 ---
 
-<nav class="c-navbar">
-  <div class="c-navbar__wrapper">
-    <div class="c-navbar__left">
-      <h2><a href="#">flo</a></h2>
-    </div>
-    <div class="c-navbar__center">
-      <ul>
-        <li><a href="#features">Features</a></li>
-        <li><a href="#faq">FAQ</a></li>
-        <li><a target="_blank" rel="noopener noreferer" href="https://github.com/kepelet/flo">Source Code</a></li>
-        <li><a target="_blank" rel="noopener noreferer" href="https://github.com/orgs/kepelet/projects/1/views/1">Roadmap</a></li>
-      </ul>
-    </div>
-    <div class="c-navbar__right">
-      <button class="c-button c-button--cta-navbar" id="openModal">Join the waitlist</button>
-    </div>
-  </div>
-</nav>
-
 <div class="c-hero">
     <div>
         <h1>Meet flo</h1>
@@ -113,87 +94,3 @@ layout: layouts/base
         <p>If your question is not listed here, I'm reachable via email at <a href="mailto:oss@rizaldy.club">oss@rizaldy.club</a> or <a href="https://edgy.social/@rizaldy" target="_blank" rel="noopener noreferer">@rizaldy@edgy.social</a> on Fediverse. You can also use <a href="https://github.com/kepelet/flo/discussions" target="_blank" rel="noopener noreferer">GitHub Discussions</a> for non-private questions.</p>
     </div>
 </div>
-
-<div class="js-modal" id="modal">
-    <div class="js-modal__content">
-        <span class="js-modal__close" id="closeModal">&times;</span>
-        <h2>Join the waitlist</h2>
-        <p>Currently flo is in early preview and we'll let you know when we're on the App Store.</p>
-        <input id="email" type="email" placeholder="john@doe.com" required>
-        <div class="cf-turnstile" data-callback="enableSubmit" data-sitekey="0x4AAAAAAAi7bs0DROJL1xPi" data-size="flexible"></div>
-        <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>