From 54dddfa9ef14f44168b2a18b69570eeb9b1b38f5 Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Sun, 15 Dec 2024 21:33:05 +0800
Subject: [PATCH] feat(about): add sponsor button

---
 app/src/assets/svg/icon.svg    |  1 +
 app/src/views/system/About.vue | 57 +++++++++++++++++++++++++++-------
 2 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 app/src/assets/svg/icon.svg

diff --git a/app/src/assets/svg/icon.svg b/app/src/assets/svg/icon.svg
new file mode 100644
index 00000000..c7bf1425
--- /dev/null
+++ b/app/src/assets/svg/icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><style>.e{fill:#fff;fill-rule:evenodd;}.f{fill:url(#c);}</style><radialGradient id="c" cx="257.68" cy="166.3" fx="257.68" fy="166.3" r="388.1" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00d2ff"/><stop offset=".34" stop-color="#3682d8"/></radialGradient></defs><path id="b" class="e" d="M453.68,15.23C435.1,5.29,416.68,0,365.86,0H146.14C95.32,0,76.9,5.29,58.32,15.23,39.74,25.16,25.16,39.74,15.23,58.32,5.29,76.9,0,95.32,0,146.14v219.72c0,50.82,5.29,69.24,15.23,87.82,9.94,18.58,24.52,33.16,43.09,43.09,18.58,9.94,37.01,15.23,87.82,15.23h219.72c50.82,0,69.24-5.29,87.82-15.23,18.58-9.94,33.16-24.52,43.09-43.09,9.94-18.58,15.23-37.01,15.23-87.82V146.14c0-50.82-5.29-69.24-15.23-87.82-9.94-18.58-24.52-33.16-43.09-43.09Z"/><path id="d" class="f" d="M189.14,139.38l133.32,191.73h.99V139.38h27.06v235.62h-27.72L188.81,181.29h-.99v193.71h-27.06V139.38h28.38Z"/></svg>
\ No newline at end of file
diff --git a/app/src/views/system/About.vue b/app/src/views/system/About.vue
index 58d7f7c6..b97a264f 100644
--- a/app/src/views/system/About.vue
+++ b/app/src/views/system/About.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import GithubButton from '@0xjacky/vue-github-button'
-import logo from '@/assets/img/logo.png'
+import logo from '@/assets/svg/icon.svg?url'
 import ver from '@/version.json'
 
 const thisYear = new Date().getFullYear()
@@ -11,16 +11,22 @@ const thisYear = new Date().getFullYear()
     class="text-center"
     :bordered="false"
   >
-    <div class="logo">
-      <img
-        :src="logo"
-        alt="logo"
-      >
+    <div class="flex justify-center">
+      <div class="logo">
+        <div class="logo-container">
+          <div class="image-bg" />
+          <img
+            class="image-src"
+            :src="logo"
+            alt="logo"
+          >
+        </div>
+      </div>
     </div>
     <h2>Nginx UI</h2>
     <p>Yet another WebUI for Nginx</p>
     <p>Version: {{ ver.version }} ({{ ver.total_build || $gettext('Development Mode') }})</p>
-    <div class="star-on-github">
+    <div class="mb-2">
       <GithubButton
         href="https://github.com/0xJacky/nginx-ui"
         data-color-scheme="no-preference: light; light: light; dark: dark;"
@@ -31,6 +37,16 @@ const thisYear = new Date().getFullYear()
         Star
       </GithubButton>
     </div>
+    <div class="mb-2">
+      <GithubButton
+        href="https://github.com/sponsors/nginxui"
+        data-color-scheme="no-preference: light; light: light; dark: dark;"
+        data-icon="octicon-heart" data-size="large"
+        aria-label="Sponsor @nginxui on GitHub"
+      >
+        Sponsor
+      </GithubButton>
+    </div>
     <h3>
       {{ $gettext('Project Team') }}
     </h3>
@@ -53,12 +69,31 @@ const thisYear = new Date().getFullYear()
 
 <style lang="less" scoped>
 .logo {
+  position: relative;
+  height: 256px;
+  width: 256px;
+
+  .image-bg {
+    height: 120px;
+    width: 120px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    filter: blur(72px);
+    transform: translate(-50%, -50%);
+    background-image: linear-gradient(-45deg, #3682D8 50%, #00D2FF 50%);
+  }
+
+  .image-src {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   img {
     max-width: 120px
   }
 }
-
-.star-on-github {
-  margin-bottom: 10px;
-}
 </style>