From 89e22f1a5853cb80219c48adfc6df139d6ad9ab1 Mon Sep 17 00:00:00 2001
From: Li Zhineng <im@zhineng.li>
Date: Thu, 9 Oct 2025 16:48:23 +0800
Subject: qrcodes

---
 _sass/main.scss                          |  51 +++++++++++++++++++++++++++++++
 assets/images/donation-qrcode-alipay.jpg | Bin 0 -> 49964 bytes
 assets/images/donation-qrcode-wechat.jpg | Bin 0 -> 47799 bytes
 wall-of-love.markdown                    |  43 ++++++++++++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 assets/images/donation-qrcode-alipay.jpg
 create mode 100644 assets/images/donation-qrcode-wechat.jpg

diff --git a/_sass/main.scss b/_sass/main.scss
index ac8d238..e10513b 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -183,3 +183,54 @@ body {
     align-items: center;
   }
 }
+
+.donation {
+  margin-block-end: 2rem;
+
+  @media (min-width: 48rem) {
+    width: 40%;
+    margin-inline-start: 2rem;
+    float: right;
+  }
+}
+
+.donation-title {
+  font-size: 1.25rem;
+}
+
+.donation-details {
+  margin-top: 1rem;
+  background-color: var(--color-neutral-900);
+  border: 1px solid var(--color-neutral-800);
+  border-radius: 0.5rem;
+}
+
+.donation-summary {
+  display: flex;
+  align-items: center;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  gap: 0.5rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M4.22 6.222a.75.75 0 0 1 1.06 0L8 8.942l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  background-position: right 1rem top 50%;
+  background-repeat: no-repeat;
+  list-style: none;
+  cursor: pointer;
+}
+
+.donation-summary + p {
+  padding: 1rem;
+}
+
+.donation-details[open] .donation-summary {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23737373' fill-rule='evenodd' d='M11.78 9.783a.75.75 0 0 1-1.06 0L8 7.063l-2.72 2.72a.75.75 0 1 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  border-bottom: 1px solid var(--color-neutral-800);
+}
+
+.donation-note {
+  margin-block-start: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-neutral-600);
+}
diff --git a/assets/images/donation-qrcode-alipay.jpg b/assets/images/donation-qrcode-alipay.jpg
new file mode 100644
index 0000000..7c3a30c
Binary files /dev/null and b/assets/images/donation-qrcode-alipay.jpg differ
diff --git a/assets/images/donation-qrcode-wechat.jpg b/assets/images/donation-qrcode-wechat.jpg
new file mode 100644
index 0000000..2a3e689
Binary files /dev/null and b/assets/images/donation-qrcode-wechat.jpg differ
diff --git a/wall-of-love.markdown b/wall-of-love.markdown
index 86ca867..0af13a0 100644
--- a/wall-of-love.markdown
+++ b/wall-of-love.markdown
@@ -5,5 +5,48 @@ layout: default
 Big thanks to everyone keeping this project alive and breathing. You’re the
 real reason the fans are still spinning.
 
+<section class="donation">
+    <h2 class="donation-title">
+        Love our work? Buy us a coffee!
+    </h2>
+    <details class="donation-details" name="qrcodes" open>
+        <summary class="donation-summary">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14" class="donation-icon">
+                <path fill="#1aad19" d="M5.091 8.703a.45.45 0 0 1-.21.052.46.46 0 0 1-.407-.248l-.03-.07-1.275-2.904a.3.3 0 0 1-.022-.102c0-.134.105-.242.234-.242q.079.002.14.048l1.503 1.112a.68.68 0 0 0 .622.074l7.072-3.27C11.45 1.604 9.362.589 7 .589 3.134.588 0 3.3 0 6.647c0 1.825.943 3.468 2.419 4.579a.49.49 0 0 1 .17.549l-.314 1.222c-.015.057-.038.117-.038.177 0 .134.104.243.233.243.051 0 .092-.02.135-.046l1.533-.918a.7.7 0 0 1 .371-.112.7.7 0 0 1 .206.032A8 8 0 0 0 7 12.705c3.866 0 7-2.712 7-6.058 0-1.014-.29-1.968-.797-2.808l-8.06 4.833z"/>
+            </svg>
+            WeChat
+        </summary>
+        <p>
+            <img
+                src="{{ '/assets/images/donation-qrcode-wechat.jpg' | relative_url }}"
+                alt="Donate via Alipay"
+                width="128"
+                height="128"
+            />
+        </p>
+    </details>
+    <details class="donation-details" name="qrcodes">
+        <summary class="donation-summary">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+                <path fill="#1677ff" d="M12.758 1.502H3.243A2.243 2.243 0 0 0 1 3.745v9.515a2.243 2.243 0 0 0 2.243 2.242h9.515A2.24 2.24 0 0 0 15 13.26V3.745a2.24 2.24 0 0 0-2.242-2.243"/>
+                <path fill="#fff" d="M12.527 10.294c-.56-.188-1.312-.475-2.15-.778.503-.875.905-1.87 1.17-2.952h-2.76V5.57h3.38v-.555h-3.38V3.358h-1.38c-.242 0-.242.238-.242.238v1.418H3.747v.555h3.418v.994H4.342v.554h5.475c-.2.69-.47 1.34-.788 1.928-1.776-.586-3.673-1.06-4.863-.768-.762.187-1.252.522-1.54.873-1.323 1.61-.375 4.053 2.418 4.053 1.652 0 3.243-.92 4.476-2.437 1.84.883 5.48 2.402 5.48 2.402v-2.164s-.456-.036-2.473-.71m-7.743 1.974c-2.178 0-2.823-1.715-1.746-2.654.36-.317 1.016-.472 1.365-.506 1.293-.127 2.491.366 3.905 1.056-.993 1.295-2.259 2.104-3.524 2.104"/>
+            </svg>
+            Alipay
+        </summary>
+        <p>
+            <img
+                src="{{ '/assets/images/donation-qrcode-alipay.jpg' | relative_url }}"
+                alt="Donate via Alipay"
+                width="128"
+                height="128"
+            />
+        </p>
+    </details>
+    <p class="donation-note">
+        The thank-you list is tracked manually, and we will process your
+        donation within 3 days. Thank you for your support and patience.
+    </p>
+</section>
+
 - **王同学。** — ¥66.00 via _Alipay_ on _October 5th, 2025_
 - **吴**** — Donated a front panel on _December 15th, 2024_
-- 
cgit v1.2.3