mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(about): add sponsor button

Browse source
This commit is contained in:
Jacky 2024-12-15 21:33:05 +08:00
parent 5d9ce4892e
commit 54dddfa9ef
No known key found for this signature in database
GPG key ID: 215C21B10DF38B4D
2 changed files with 47 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/svg/icon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

57
app/src/views/system/About.vue
View file

@ -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>