Merge pull request #41 from kairi003/feature-add-donation-link

Feature add donation link
kairi003 · Aug 11, 2023 · 61eb80c · 61eb80c
2 parents 4edaf90 + 0569310
commit 61eb80c
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 1 deletion.
diff --git a/src/donation.css b/src/donation.css
@@ -0,0 +1,52 @@
+/* summary styles */
+.donation details summary {
+  width: fit-content;
+  outline: none;
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.donation details summary:hover {
+  outline: none;
+  box-shadow: 0 0 5px rgba(0, 128, 255, 0.5);
+}
+
+/* donation description styles */
+.donation-description p {
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+}
+
+/* payment button container styles */
+.donation .payment-buttons-container {
+  display: flex;
+  gap: 10px;
+  padding: 0;
+  list-style-type: none;
+  justify-content: center;
+  margin-top: 15px;
+  text-decoration: none;
+}
+
+/* payment button styles */
+.donation .payment-button {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  background-color: #aaedad;
+  color: #333;
+  text-decoration: none;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: filter 0.3s;
+}
+
+.donation .payment-button:hover {
+  filter: brightness(0.8);
+}
+
+.donation .payment-button img {
+  margin-right: 5px;
+  height: 20px;
+}
diff --git a/src/images/generic.svg b/src/images/generic.svg
diff --git a/src/images/paypal.svg b/src/images/paypal.svg
diff --git a/src/popup.css b/src/popup.css
@@ -1,7 +1,7 @@
 html {
   width: 500px;
   box-sizing: border-box;
-  font-family: sans-serif;
+  font-family: 'Arial', sans-serif;
 }
 
 body {

diff --git a/src/popup.html b/src/popup.html
@@ -2,8 +2,10 @@
 <html>
 
 <head>
+  <meta charset="utf-8">
   <link rel="stylesheet" href="popup.css">
   <link rel="stylesheet" href="iconfont/material-icons.css">
+  <link rel="stylesheet" href="donation.css">
   <script src="popup.js" defer></script>
 </head>
 
@@ -58,6 +60,30 @@ <h1>
         <tbody></tbody>
       </table>
     </div>
+
+    <div class="donation">
+      <details>
+        <summary class>
+          Buy Me a Coffee ☕
+        </summary>
+        <div class="donation-description">
+          <p>Got a $2,000 offer to buy this extension, but I'm never going to sell it to spammers!</p>
+          <p>By the way, your cup of coffee pleases me 😎</p>
+        </div>
+        <ul class="payment-buttons-container">
+          <li>
+            <a class="payment-button" href="https://www.buymeacoffee.com/kairi003" target="_blank">
+              <img src="images/generic.svg" alt="Credit Card"> Credit Card
+            </a>
+          </li>
+          <li>
+            <a class="payment-button" href="https://paypal.me/kairi003" target="_blank">
+              <img src="images/paypal.svg" alt="PayPal"> PayPal
+            </a>
+          </li>
+        </ul>
+      </details>
+    </div>
   </main>
 </body>