Skip to content

Commit

Permalink
feat(settings): redesign about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hakadao
hakadao committed Jul 13, 2024
1 parent d4c6095 commit 0b6bacc
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 72 deletions.
Binary file added assets/sponsor/afdian.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/sponsor/bmc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
219 changes: 147 additions & 72 deletions src/components/Settings/components/About.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { version } from '../../../../package.json'
const importSettingsRef = ref<HTMLElement>()
const hasNewVersion = ref<boolean>(false)
const dialogVisible = reactive({
sponsor: false,
justWannaChangeTheJob: false,
})
Expand Down Expand Up @@ -87,87 +88,156 @@ async function checkGitHubRelease() {
</script>

<template>
<div
flex items-center justify-center w-full
>
<div flex="~ col gap-4" items-center mt-8>
<div relative>
<div>
<div max-w-600px mx-auto>
<div relative w-200px m-auto>
<img
:src="`${browser.runtime.getURL('/assets/bewly-vtuber-style-logo.png')}`" alt="" height="120"
:src="`${browser.runtime.getURL('/assets/bewly-vtuber-style-logo.png')}`" alt="" width="200"
>

<a
v-if="hasNewVersion"
v-if=" hasNewVersion"
href="https://github.com/hakadao/BewlyBewly/releases" target="_blank"
style="backdrop-filter: var(--bew-filter-glass);"
pos="absolute bottom-0 right-0" transform="translate-x-50%" un-text="xs $bew-text-1" p="y-1 x-2" bg="$bew-fill-3"
pos="absolute bottom-0 right-0" transform="translate-x-50%" un-text="xs $bew-text-1" p="y-1 x-2" bg="$bew-fill-1"
rounded-12
>
NEW
</a>
</div>
<section text-xl>
<section text-xl text-center>
<p>BewlyBewly</p>
<p text-center>
<a href="https://github.com/hakadao/BewlyBewly/releases" target="_blank" un-text="sm color-$bew-text-2 hover:color-$bew-text-3">v{{ version }}</a>
</p>
</section>
<section mt-4 flex gap-2>
<a
href="https://github.com/hakadao/BewlyBewly" target="_blank"
p="y-2 x-4" flex items-center bg="black dark:white" un-text="!white dark:!black"
rounded-12
w-100px
>
<div i-tabler:brand-github mr-2 shrink-0 /> GitHub
</a>
<a
href="https://space.bilibili.com/5011356/dynamic" target="_blank"
p="y-2 x-4" flex items-center bg="#fb7299 dark:#ffa7c0" un-text="!white dark:!black"
rounded-12
w-100px
>
<div i-tabler:brand-bilibili mr-2 shrink-0 /> Bilibili
</a>
<a
href="https://discord.gg/TS6vgBmZVp" target="_blank"
p="y-2 x-4" flex items-center bg="#5866f2 dark:#a0a7f8" un-text="!white dark:!black"
rounded-12
w-100px
>
<div i-tabler:brand-discord mr-2 shrink-0 /> Discord
</a>
<a
href="https://x.com/search?q=BewlyBewly%20(from%3Ahakadaooo%20OR%20from%3Ahakadaoooo)&src=typed_query" target="_blank"
p="y-2 x-4" flex items-center bg="#1d9bf0 dark:#7ec6f7" un-text="!white dark:!black"
rounded-12
w-100px
>
<div i-tabler:brand-twitter mr-2 shrink-0 /> Twitter
</a>
</section>
<section mt-4 flex="~ col gap-2 items-center">
<Button class="btn" @click="handleImportSettings">
<template #left>
<div i-uil:import />
</template>
<input ref="importSettingsRef" type="file" accept=".json" hidden>
{{ $t('settings.import_settings') }}
</Button>
<Tooltip placement="bottom" :content="$t('settings.export_settings_desc')">
<Button class="btn" @click="handleExportSettings">
<template #left>
<div i-uil:export />
</template>
{{ $t('settings.export_settings') }}
</Button>
</Tooltip>

<section
style="box-shadow: var(--bew-shadow-1), var(--bew-shadow-edge-glow-1);"
mt-6 p-4 bg="$bew-fill-alt" rounded="$bew-radius"
flex="~ col items-center gap-6"
>
<section w-full>
<h3 class="title">
Links
</h3>
<div grid="~ xl:cols-5 lg:cols-4 md:cols-3 cols-2 gap-2">
<a
href="https://github.com/hakadao/BewlyBewly" target="_blank"
class="link-card"
bg="black dark:white !opacity-10 !hover:opacity-20"
un-text="black dark:white"
>
<div i-tabler:brand-github /> GitHub
</a>
<a
href="https://space.bilibili.com/5011356/dynamic" target="_blank"
class="link-card"
bg="#fb7299 dark:#ffa7c0 !opacity-10 !hover:opacity-20"
un-text="#fb7299 dark:#ffa7c0"
>
<div i-tabler:brand-bilibili /> Bilibili
</a>
<a
href="https://discord.gg/TS6vgBmZVp" target="_blank"
class="link-card"
bg="#5866f2 dark:#a0a7f8 !opacity-10 !hover:opacity-20"
un-text="#5866f2 dark:#a0a7f8"
>
<div i-tabler:brand-discord /> Discord
</a>
<a
href="https://x.com/search?q=BewlyBewly%20(from%3Ahakadaooo%20OR%20from%3Ahakadaoooo)&src=typed_query" target="_blank"
class="link-card"
bg="#1d9bf0 dark:#7ec6f7 !opacity-10 !hover:opacity-20"
un-text="#1d9bf0 dark:#7ec6f7"
>
<div i-tabler:brand-twitter /> Twitter
</a>

<button
class="link-card"
bg="#f87171 dark:#fca5a5 !opacity-10 !hover:opacity-20"
un-text="#f87171 dark:#fca5a5"
@click="dialogVisible.sponsor = true"
>
<div i-tabler:heart /> Sponsor
</button>
<Dialog
v-if="dialogVisible.sponsor"
width="50%"
max-width="600px"
title="Sponsor"
content-height="50vh"
append-to-bewly-body
@close="dialogVisible.sponsor = false"
>
<p mb-4>
Afdian / 爱发电:
<a
href="https://afdian.net/@hakadao" target="_blank"
color="$bew-theme-color"
>https://afdian.net/@hakadao</a>
</p>
<img
:src="browser.runtime.getURL('/assets/sponsor/afdian.jpg')" alt=""
max-w-400px w-full
>

<p mb-4 mt-6>
Buy me a coffee:
<a
href="https://buymeacoffee.com/hakadao" target="_blank"
color="$bew-theme-color"
>https://buymeacoffee.com/hakadao</a>
</p>
<img
:src="browser.runtime.getURL('/assets/sponsor/bmc.png')" alt=""
max-w-150px w-full
>
</Dialog>
</div>
</section>
<section w-full>
<h3 class="title">
{{ `${$t('settings.import_settings')} / ${$t('settings.export_settings')}` }}
</h3>
<div flex="~ gap-2">
<Button class="btn" @click="handleImportSettings">
<template #left>
<div i-uil:import />
</template>
<input ref="importSettingsRef" type="file" accept=".json" hidden>
{{ $t('settings.import_settings') }}
</Button>
<Tooltip placement="bottom" :content="$t('settings.export_settings_desc')">
<Button class="btn" @click="handleExportSettings">
<template #left>
<div i-uil:export />
</template>
{{ $t('settings.export_settings') }}
</Button>
</Tooltip>
</div>
</section>
<section>
<h3 class="title">
{{ $t('settings.contributors') }}
</h3>
<a
href="https://github.com/hakadao/BewlyBewly/graphs/contributors" target="_blank"
>
<img
src="https://contrib.rocks/image?repo=hakadao/BewlyBewly"
w-full
>
</a>
</section>
</section>
<section mt-4>
<!-- <h3 text="xl center" mb-2>
{{ $t('settings.contributors') }}
</h3> -->
<Button type="tertiary" @click="dialogVisible.justWannaChangeTheJob = true">
<Button
type="tertiary" mx-auto
@click="dialogVisible.justWannaChangeTheJob = true"
>
<template #left>
<i class="i-solar:expressionless-circle-bold-duotone" text-xl />
</template>
Expand Down Expand Up @@ -217,14 +287,6 @@ async function checkGitHubRelease() {
/>
</Dialog>
</section>
<section mt-8>
<h3 text="xl center" mb-2>
{{ $t('settings.contributors') }}
</h3>
<a href="https://github.com/hakadao/BewlyBewly/graphs/contributors" target="_blank">
<img src="https://contrib.rocks/image?repo=hakadao/BewlyBewly">
</a>
</section>
</div>
</div>
</template>
Expand All @@ -234,4 +296,17 @@ async function checkGitHubRelease() {
--b-button-color: var(--bew-fill-1);
--b-button-color-hover: var(--bew-fill-2);
}
.title {
--uno: "text-base fw-bold mb-2";
}
.link-card {
--uno: "w-full h-46px px-4 py-2 flex items-center rounded-$bew-radius";
--uno: "duration-300";
> div {
--uno: "mr-2 shrink-0";
}
}
</style>

0 comments on commit 0b6bacc

Please sign in to comment.