Donate button

tcf_website/static/landing/landing.css

@@ -119,16 +119,18 @@ header.masthead h1 {
 
 /* About info box */
 .about-team .about-info {
-  border: 3px solid var(--accent-color);
-  border-radius: 0%;
+  /* border: 3px solid var(--accent-color); */
+  /* border-radius: 0%; */
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+
 }
 
 .about-team .about-info p {
   font-size: 0.9rem;
 }
 
 .about-team .about-info:hover {
-  box-shadow: 4px 4px 10px var(--accent-color);
+  box-shadow: 2px 2px 5px var(--main-color);
 }
 
 @media (min-width: 768px) {

tcf_website/templates/base/index.html

@@ -65,6 +65,9 @@
   <!-- History Page modal -->
   {% include "common/history_page_modal.html" with path_id="historyPage" path=request.get_full_path %}
 
+  <!-- Donate page modal -->
+  {% include "common/donate_page_modal.html" with path_id="donatePage"  path=request.get_full_path %}
+
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-54T5TXX"
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

tcf_website/templates/common/donate_page_modal.html

@@ -0,0 +1,25 @@
+<!-- Donate page modal (imported in index.html) -->
+{% load static %}
+<div class="modal fade" id={{ path_id }} tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"></h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="text-center">
+                    We keep our servers running through university grants and your donations.
+                    Just $4 keeps our servers up for a day, so we can keep serving you the best content.
+                </div>
+                <div class="text-center">
+                    <img src="{% static 'landing/Zelle_qr.jpg' %}" alt="Zelle QR Code" class="img-fluid" style="width: 80%;">
+                    <a href="https://enroll.zellepay.com/qr-codes?data=eyJuYW1lIjoiVEhFQ09VUlNFRk9SVU0iLCJhY3Rpb24iOiJwYXltZW50IiwidG9rZW4iOiJza3g3c2FAdmlyZ2luaWEuZWR1In0=" class="btn btn-primary bg-tcf-indigo">Zelle Link</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

tcf_website/templates/landing/landing.html

@@ -194,8 +194,9 @@ <h3 class="card-title">About Us</h3>
                                     We keep our servers running through university grants and your donations.
                                     Just $4 keeps our servers up for a day, so we can keep serving you the best content.
                                 </p>
-                                <a href="https://gf.me/u/yvhyfa" class="btn btn-primary bg-tcf-indigo">Donate $4
-                                    today</a>
+                                <a class="ml-auto d-flex align-items-center" href="#donatePage" data-toggle="modal">
+                                    <button class="btn btn-primary bg-tcf-indigo">Donate $4 today</button>
+                                </a>
                             </div>
                         </div>
                     </a>