Add Liberapay link

assets/css/_base.scss

@@ -190,3 +190,10 @@ body pre {
 .form-control::placeholder {
   color: #959fa7;
 }
+
+.btn-gh-sponsors {
+  font-weight: 600;
+  color: #333;
+  background-color: #eee;
+  border-color: #ccc;
+}

lib/asciinema_web/templates/layout/_donate_modal.html.heex

@@ -0,0 +1,54 @@
+<div class="modal fade" id="donate-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Support asciinema</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <p>Hi, I'm <a href="https://github.com/ku1ik">Marcin</a>, the creator
+          and dedicated maintainer of the asciinema project.</p>
+
+        <p>Please consider becoming a patron if you ever thought, "Wow, that's
+          cool!" about asciinema. Your support would allow me to dedicate more
+          time to the project, ensuring continuous maintenance, development of new
+          features, timely bug fixes, and the smooth operation of asciinema.org.</p>
+
+        <hr />
+
+        <h3>
+          Sponsor via Github Sponsors
+        </h3>
+
+        <p>
+          <a href="https://github.com/sponsors/ku1ik" class="btn btn-sm btn-gh-sponsors">
+            🩷&nbsp;&nbsp;Sponsor
+          </a>
+        </p>
+
+        <hr />
+
+        <h3>
+          Donate via Liberapay
+        </h3>
+
+        <p>
+          <a href="https://liberapay.com/ku1ik/donate">
+            <img
+              alt="Donate using
+        Liberapay"
+              src="https://liberapay.com/assets/widgets/donate.svg"
+            />
+          </a>
+        </p>
+
+        <hr />
+
+        <p>Thank you! ❤️</p>
+      </div>
+    </div>
+  </div>
+</div>

lib/asciinema_web/templates/layout/_footer.html.heex

@@ -4,7 +4,7 @@
       <div class="col" style="text-align: center">
         This site is powered by
         <a href="https://github.com/asciinema/asciinema-server">asciinema-server</a>
-        <br /> ❤️ <a href="https://github.com/sponsors/ku1ik">Donate</a>
+        <br /> ❤️ <a href="#" data-toggle="modal" data-target="#donate-modal">Donate</a>
       </div>
     </div>
   </div>

lib/asciinema_web/templates/layout/app.html.heex

@@ -23,6 +23,7 @@
     </main>
 
     <%= render("_footer.html", conn: @conn) %>
+    <%= render("_donate_modal.html") %>
     <script phx-track-static src={Routes.static_path(@conn, "/js/app.js")}>
     </script>
   </body>